diff --git a/.changelog/2256.internal.md b/.changelog/2256.internal.md new file mode 100644 index 0000000000..d8c901b49e --- /dev/null +++ b/.changelog/2256.internal.md @@ -0,0 +1 @@ +Generate Play Store screenshots diff --git a/playwright/screenshots/google-play-console-screenshots.spec.ts b/playwright/screenshots/google-play-console-screenshots.spec.ts new file mode 100644 index 0000000000..69d1019389 --- /dev/null +++ b/playwright/screenshots/google-play-console-screenshots.spec.ts @@ -0,0 +1,115 @@ +import { test, expect, Page, FrameLocator } from '@playwright/test' +import { extensionViewport } from '../utils/extensionTestExtend' +import { warnSlowApi } from '../utils/warnSlowApi' +import { mockApiMoreData } from '../utils/mockApi' +import { ethAccount, privateKey } from '../../src/utils/__fixtures__/test-inputs' + +const screenshotCss = ` + * { scrollbar-width: none; } + [data-testid="build-banner"] { display: none; } +` + +const mobileViewports = [ + { + name: 'mobile', + dims: { width: 1080, height: 1920 }, + setup: { width: 320, height: 585 }, + }, + { + name: 'tablet-7inch', + dims: { width: 1920, height: 1080 }, + setup: { width: 900, height: 550 }, + }, + { + name: 'tablet-10inch', + dims: { width: 2560, height: 1440 }, + setup: { width: 1000, height: 580 }, + }, +] + +async function setup(page: Page, url: string, viewportWidth: number, viewportHeight?: number) { + const iframeHeight = viewportHeight || extensionViewport.height * 0.975 + await page.goto('/app.webmanifest') + await page.setContent(` + + + `) + return page.frameLocator('iframe')! +} + +async function runScreenshotFlow(page: Page, frame: FrameLocator, deviceName: string) { + const takeScreenshot = async (step: number) => { + await page.screenshot({ + path: `./screenshots/play-console-${deviceName}-${step}.png`, + style: screenshotCss, + animations: 'disabled', + omitBackground: true, + }) + } + + await takeScreenshot(1) + + await frame.getByRole('button', { name: /Open wallet/ }).click() + await frame.getByRole('button', { name: /Private key/ }).click() + await frame.getByText('Create a profile').uncheck() + await frame.getByPlaceholder('Enter your private key here').fill(privateKey) + await page.keyboard.press('Enter') + await expect(frame.getByText('Loading account')).toBeVisible() + await expect(frame.getByText('Loading account')).toBeHidden() + await takeScreenshot(2) + + await frame.getByRole('link', { name: 'Stake' }).click() + await frame.getByRole('columnheader', { name: 'Name' }).click() + await frame.getByRole('img', { name: 'Status is okay' }).nth(3).click() + await frame.getByRole('link', { name: 'Staked' }).scrollIntoViewIfNeeded() + await page.waitForTimeout(1000) + await takeScreenshot(3) + + await frame.getByRole('link', { name: 'Staked' }).click() + await takeScreenshot(4) + + await frame.getByRole('link', { name: 'ParaTimes' }).click() + await page.evaluate(() => window.frames[0].scrollBy(0, 10000)) + await takeScreenshot(5) + + await frame.getByRole('button', { name: 'Deposit to ParaTime' }).click() + await frame.getByRole('button', { name: 'Select a ParaTime' }).click() + await takeScreenshot(6) + + await frame.getByRole('option', { name: 'Sapphire' }).click() + await frame.getByRole('button', { name: 'Next' }).click() + await frame.getByRole('textbox', { name: 'recipient' }).fill(ethAccount.address) + await frame.getByRole('button', { name: 'Next' }).click() + await frame.getByRole('textbox', { name: 'amount' }).fill('10.0') + await takeScreenshot(7) + + await frame.getByRole('button', { name: 'Next' }).click() + await takeScreenshot(8) +} + +for (const viewport of mobileViewports) { + test.describe(`Google Play Console ${viewport.name} screenshots`, () => { + const scaleFactor = viewport.dims.height / extensionViewport.height + + test.use({ + deviceScaleFactor: scaleFactor, + viewport: { + width: Math.round(viewport.dims.width / scaleFactor), + height: Math.round(viewport.dims.height / scaleFactor), + }, + }) + + test.beforeEach(async ({ context }) => { + await warnSlowApi(context) + await mockApiMoreData(context) + }) + + test(`make screenshots for ${viewport.name}`, async ({ page }) => { + const frame = await setup(page, `/`, viewport.setup.width, viewport.setup.height) + await runScreenshotFlow(page, frame, viewport.name) + }) + }) +} diff --git a/playwright/screenshots/play-console-mobile-1.png b/playwright/screenshots/play-console-mobile-1.png new file mode 100644 index 0000000000..48fc4b600b Binary files /dev/null and b/playwright/screenshots/play-console-mobile-1.png differ diff --git a/playwright/screenshots/play-console-mobile-2.png b/playwright/screenshots/play-console-mobile-2.png new file mode 100644 index 0000000000..fb3556de4f Binary files /dev/null and b/playwright/screenshots/play-console-mobile-2.png differ diff --git a/playwright/screenshots/play-console-mobile-3.png b/playwright/screenshots/play-console-mobile-3.png new file mode 100644 index 0000000000..0a565316c1 Binary files /dev/null and b/playwright/screenshots/play-console-mobile-3.png differ diff --git a/playwright/screenshots/play-console-mobile-4.png b/playwright/screenshots/play-console-mobile-4.png new file mode 100644 index 0000000000..4b7c6bed92 Binary files /dev/null and b/playwright/screenshots/play-console-mobile-4.png differ diff --git a/playwright/screenshots/play-console-mobile-5.png b/playwright/screenshots/play-console-mobile-5.png new file mode 100644 index 0000000000..d13bad7c81 Binary files /dev/null and b/playwright/screenshots/play-console-mobile-5.png differ diff --git a/playwright/screenshots/play-console-mobile-6.png b/playwright/screenshots/play-console-mobile-6.png new file mode 100644 index 0000000000..d189234d13 Binary files /dev/null and b/playwright/screenshots/play-console-mobile-6.png differ diff --git a/playwright/screenshots/play-console-mobile-7.png b/playwright/screenshots/play-console-mobile-7.png new file mode 100644 index 0000000000..cbf5fe5fb8 Binary files /dev/null and b/playwright/screenshots/play-console-mobile-7.png differ diff --git a/playwright/screenshots/play-console-mobile-8.png b/playwright/screenshots/play-console-mobile-8.png new file mode 100644 index 0000000000..50034911c9 Binary files /dev/null and b/playwright/screenshots/play-console-mobile-8.png differ diff --git a/playwright/screenshots/play-console-tablet-10inch-1.png b/playwright/screenshots/play-console-tablet-10inch-1.png new file mode 100644 index 0000000000..c640ef722a Binary files /dev/null and b/playwright/screenshots/play-console-tablet-10inch-1.png differ diff --git a/playwright/screenshots/play-console-tablet-10inch-2.png b/playwright/screenshots/play-console-tablet-10inch-2.png new file mode 100644 index 0000000000..8475d72a9f Binary files /dev/null and b/playwright/screenshots/play-console-tablet-10inch-2.png differ diff --git a/playwright/screenshots/play-console-tablet-10inch-3.png b/playwright/screenshots/play-console-tablet-10inch-3.png new file mode 100644 index 0000000000..13d971f0d5 Binary files /dev/null and b/playwright/screenshots/play-console-tablet-10inch-3.png differ diff --git a/playwright/screenshots/play-console-tablet-10inch-4.png b/playwright/screenshots/play-console-tablet-10inch-4.png new file mode 100644 index 0000000000..11f6adf5cf Binary files /dev/null and b/playwright/screenshots/play-console-tablet-10inch-4.png differ diff --git a/playwright/screenshots/play-console-tablet-10inch-5.png b/playwright/screenshots/play-console-tablet-10inch-5.png new file mode 100644 index 0000000000..4775d33160 Binary files /dev/null and b/playwright/screenshots/play-console-tablet-10inch-5.png differ diff --git a/playwright/screenshots/play-console-tablet-10inch-6.png b/playwright/screenshots/play-console-tablet-10inch-6.png new file mode 100644 index 0000000000..300cb33f86 Binary files /dev/null and b/playwright/screenshots/play-console-tablet-10inch-6.png differ diff --git a/playwright/screenshots/play-console-tablet-10inch-7.png b/playwright/screenshots/play-console-tablet-10inch-7.png new file mode 100644 index 0000000000..ddf5614e62 Binary files /dev/null and b/playwright/screenshots/play-console-tablet-10inch-7.png differ diff --git a/playwright/screenshots/play-console-tablet-10inch-8.png b/playwright/screenshots/play-console-tablet-10inch-8.png new file mode 100644 index 0000000000..43200fd4ac Binary files /dev/null and b/playwright/screenshots/play-console-tablet-10inch-8.png differ diff --git a/playwright/screenshots/play-console-tablet-7inch-1.png b/playwright/screenshots/play-console-tablet-7inch-1.png new file mode 100644 index 0000000000..d0af392ac8 Binary files /dev/null and b/playwright/screenshots/play-console-tablet-7inch-1.png differ diff --git a/playwright/screenshots/play-console-tablet-7inch-2.png b/playwright/screenshots/play-console-tablet-7inch-2.png new file mode 100644 index 0000000000..61e2808865 Binary files /dev/null and b/playwright/screenshots/play-console-tablet-7inch-2.png differ diff --git a/playwright/screenshots/play-console-tablet-7inch-3.png b/playwright/screenshots/play-console-tablet-7inch-3.png new file mode 100644 index 0000000000..066b5e1cbf Binary files /dev/null and b/playwright/screenshots/play-console-tablet-7inch-3.png differ diff --git a/playwright/screenshots/play-console-tablet-7inch-4.png b/playwright/screenshots/play-console-tablet-7inch-4.png new file mode 100644 index 0000000000..596a357d62 Binary files /dev/null and b/playwright/screenshots/play-console-tablet-7inch-4.png differ diff --git a/playwright/screenshots/play-console-tablet-7inch-5.png b/playwright/screenshots/play-console-tablet-7inch-5.png new file mode 100644 index 0000000000..d91e7edc9f Binary files /dev/null and b/playwright/screenshots/play-console-tablet-7inch-5.png differ diff --git a/playwright/screenshots/play-console-tablet-7inch-6.png b/playwright/screenshots/play-console-tablet-7inch-6.png new file mode 100644 index 0000000000..229d908d92 Binary files /dev/null and b/playwright/screenshots/play-console-tablet-7inch-6.png differ diff --git a/playwright/screenshots/play-console-tablet-7inch-7.png b/playwright/screenshots/play-console-tablet-7inch-7.png new file mode 100644 index 0000000000..a45472521f Binary files /dev/null and b/playwright/screenshots/play-console-tablet-7inch-7.png differ diff --git a/playwright/screenshots/play-console-tablet-7inch-8.png b/playwright/screenshots/play-console-tablet-7inch-8.png new file mode 100644 index 0000000000..73b9cd0369 Binary files /dev/null and b/playwright/screenshots/play-console-tablet-7inch-8.png differ