Skip to content

Commit 8755228

Browse files
lukaw3dlukaw3d
authored
Merge pull request #2044 from oasisprotocol/lw/screenshots
Make Chrome Web Store screenshots using Playwright
2 parents 5c3bd2a + 0263965 commit 8755228

23 files changed

Lines changed: 473 additions & 27 deletions

‎.changelog/2044.doc.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Make Chrome Web Store screenshots using Playwright

‎README.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -151,6 +151,9 @@ yarn start:prod
151151
# Open http://localhost:5000/account/oasis1qq3xrq0urs8qcffhvmhfhz4p0mu7ewc8rscnlwxe/stake
152152
# and switch to testnet. This exercises at least: fonts, grpc, testnet grpc, API,
153153
# and validator logos.
154+
155+
# Update screenshots
156+
(cd playwright; yarn test:screenshots)
154157
```
155158

156159
### Code style

‎internals/getSecurityHeaders.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,8 +52,9 @@ const getCsp = ({ isExtension, isDev }) =>
5252
${isDev ? hmr : ''}
5353
;
5454
frame-ancestors
55-
${isExtension ? dappFrameAncestors : `'none'`};
55+
${isExtension ? dappFrameAncestors : `'self'`};
5656
frame-src
57+
'self'
5758
https://global.transak.com
5859
https://global-stg.transak.com;
5960
img-src 'self' data: https:;

‎playwright/package.json‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,11 @@
33
"version": "0.0.0-development",
44
"private": true,
55
"scripts": {
6-
"test": "playwright test",
7-
"test:prod": "BASE_URL=http://localhost:5000 EXTENSION_PATH=../build-ext/ playwright test"
6+
"test": "playwright test --project main",
7+
"test:prod": "BASE_URL=http://localhost:5000 EXTENSION_PATH=../build-ext/ playwright test --project main",
8+
"test:screenshots": "playwright test --project screenshots"
89
},
910
"devDependencies": {
10-
"@playwright/test": "1.40.1"
11+
"@playwright/test": "1.46.1"
1112
}
1213
}

‎playwright/playwright.config.ts‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ const doubleIfDev = (time: number) => (process.env.BASE_URL ? time : time * 2)
1313
* See https://playwright.dev/docs/test-configuration.
1414
*/
1515
const config: PlaywrightTestConfig = {
16-
testDir: './tests',
1716
/* Maximum time one test can run for. */
1817
timeout: doubleIfDev(30 * 1000),
1918
expect: {
@@ -48,7 +47,16 @@ const config: PlaywrightTestConfig = {
4847
/* Configure projects for major browsers */
4948
projects: [
5049
{
51-
name: 'chromium',
50+
name: 'main',
51+
testDir: './tests',
52+
use: {
53+
...devices['Desktop Chrome'],
54+
},
55+
},
56+
57+
{
58+
name: 'screenshots',
59+
testDir: './screenshots',
5260
use: {
5361
...devices['Desktop Chrome'],
5462
},

‎playwright/screenshots/chrome-webstore-screenshots.spec.ts‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
import { extensionViewport } from '../utils/extensionTestExtend'
2+
import { warnSlowApi } from '../utils/warnSlowApi'
3+
import { mockApiMoreData } from '../utils/mockApi'
4+
import { ethAccount, privateKey } from '../../src/utils/__fixtures__/test-inputs'
5+
import { test, expect, Page } from '@playwright/test'
6+
7+
const screenshotCss = `
8+
* { scrollbar-width: none; }
9+
[data-testid="build-banner"] { display: none; }
10+
`
11+
12+
const chromeWebStoreDimensions = {
13+
width: 1200,
14+
height: 800,
15+
}
16+
17+
/** Scale for higher quality larger screenshots */
18+
const deviceScaleFactor = (chromeWebStoreDimensions.height - 20) / extensionViewport.height
19+
test.use({
20+
deviceScaleFactor: deviceScaleFactor,
21+
viewport: {
22+
width: Math.round(chromeWebStoreDimensions.width / deviceScaleFactor),
23+
height: Math.round(chromeWebStoreDimensions.height / deviceScaleFactor),
24+
},
25+
})
26+
27+
async function setup(page: Page, url: string) {
28+
await page.goto('/app.webmanifest')
29+
await page.setContent(`
30+
<style>
31+
body {
32+
display: flex;
33+
justify-content: center;
34+
align-items: center;
35+
height: 100vh;
36+
}
37+
iframe {
38+
width: ${extensionViewport.width}px;
39+
height: ${extensionViewport.height}px;
40+
border: 5px solid #0500e2;
41+
}
42+
</style>
43+
<body style="">
44+
<iframe src="${url}"></iframe>
45+
</body>
46+
`)
47+
return page.frameLocator('iframe')!
48+
}
49+
50+
test.beforeEach(async ({ context }) => {
51+
await warnSlowApi(context)
52+
await mockApiMoreData(context)
53+
})
54+
55+
test('make screenshots for Chrome Web Store', async ({ page }) => {
56+
const frame = await setup(page, `/`)
57+
await page.screenshot({
58+
path: './screenshots/extension-store-1.png',
59+
style: screenshotCss,
60+
animations: 'disabled',
61+
omitBackground: true,
62+
})
63+
64+
await frame.getByRole('button', { name: /Open wallet/ }).click()
65+
await frame.getByRole('button', { name: /Private key/ }).click()
66+
await frame.getByText('Create a profile').uncheck()
67+
await frame.getByPlaceholder('Enter your private key here').fill(privateKey)
68+
await page.keyboard.press('Enter')
69+
await expect(frame.getByText('Loading account')).toBeVisible()
70+
await expect(frame.getByText('Loading account')).toBeHidden()
71+
await page.screenshot({
72+
path: './screenshots/extension-store-2.png',
73+
style: screenshotCss,
74+
animations: 'disabled',
75+
omitBackground: true,
76+
})
77+
78+
await frame.getByRole('link', { name: 'Stake' }).click()
79+
await frame.getByRole('columnheader', { name: 'Name' }).click()
80+
await frame.getByRole('img', { name: 'Status is okay' }).nth(3).click()
81+
await frame.getByRole('link', { name: 'Staked' }).scrollIntoViewIfNeeded()
82+
await page.waitForTimeout(1000)
83+
await page.screenshot({
84+
path: './screenshots/extension-store-3.png',
85+
style: screenshotCss,
86+
animations: 'disabled',
87+
omitBackground: true,
88+
})
89+
90+
await frame.getByRole('link', { name: 'Staked' }).click()
91+
await page.screenshot({
92+
path: './screenshots/extension-store-4.png',
93+
style: screenshotCss,
94+
animations: 'disabled',
95+
omitBackground: true,
96+
})
97+
98+
await frame.getByRole('link', { name: 'ParaTimes' }).click()
99+
await page.evaluate(() => {
100+
window.frames[0].scrollBy(0, 10000)
101+
})
102+
await page.screenshot({
103+
path: './screenshots/extension-store-5.png',
104+
style: screenshotCss,
105+
animations: 'disabled',
106+
omitBackground: true,
107+
})
108+
109+
await frame.getByRole('button', { name: 'Deposit to ParaTime' }).click()
110+
await frame.getByRole('textbox', { name: 'Select a ParaTime' }).click()
111+
await page.screenshot({
112+
path: './screenshots/extension-store-6.png',
113+
style: screenshotCss,
114+
animations: 'disabled',
115+
omitBackground: true,
116+
})
117+
118+
await frame.getByRole('option', { name: 'Sapphire' }).click()
119+
await frame.getByRole('button', { name: 'Next' }).click()
120+
await frame.getByRole('textbox', { name: 'recipient' }).fill(ethAccount.address)
121+
await frame.getByRole('button', { name: 'Next' }).click()
122+
123+
await frame.getByRole('textbox', { name: 'amount' }).fill('10.0')
124+
await page.screenshot({
125+
path: './screenshots/extension-store-7.png',
126+
style: screenshotCss,
127+
animations: 'disabled',
128+
omitBackground: true,
129+
})
130+
131+
await frame.getByRole('button', { name: 'Next' }).click()
132+
await page.screenshot({
133+
path: './screenshots/extension-store-8.png',
134+
style: screenshotCss,
135+
animations: 'disabled',
136+
omitBackground: true,
137+
})
138+
})

‎playwright/screenshots/extension-store-1.png‎

63.3 KB
Loading

‎playwright/screenshots/extension-store-2.png‎

63.7 KB
Loading

‎playwright/screenshots/extension-store-3.png‎

71.8 KB
Loading

‎playwright/screenshots/extension-store-4.png‎

62.2 KB
Loading

0 commit comments

Comments
 (0)