Skip to content

Commit 12ed8e3

Browse files
buberddsbuberdds
authored
Merge pull request #2256 from oasisprotocol/mz/playStoreScreenshots
Generate Play Store screenshots
2 parents 14529ef + 44c276f commit 12ed8e3

26 files changed

Lines changed: 116 additions & 0 deletions

‎.changelog/2256.internal.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Generate Play Store screenshots

‎playwright/screenshots/google-play-console-screenshots.spec.ts‎

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

‎playwright/screenshots/play-console-mobile-1.png‎

50.7 KB
Loading

‎playwright/screenshots/play-console-mobile-2.png‎

49.5 KB
Loading

‎playwright/screenshots/play-console-mobile-3.png‎

52.2 KB
Loading

‎playwright/screenshots/play-console-mobile-4.png‎

48.7 KB
Loading

‎playwright/screenshots/play-console-mobile-5.png‎

54 KB
Loading

‎playwright/screenshots/play-console-mobile-6.png‎

47.6 KB
Loading

‎playwright/screenshots/play-console-mobile-7.png‎

49.3 KB
Loading

‎playwright/screenshots/play-console-mobile-8.png‎

61.7 KB
Loading

0 commit comments

Comments
 (0)