add helpers for marketing screenshots

Author: hahn-kev

frontend/viewer/Taskfile.yml

@@ -47,5 +47,11 @@ tasks:
     env:
       AUTO_START_SERVER: true
     cmd: pnpm run test:playwright {{.CLI_ARGS}}
+  generate-marketing-screenshots:
+    desc: 'they should be in the screenshots folder'
+    env:
+      AUTO_START_SERVER: true
+      MARKETING_SCREENSHOTS: true
+    cmd: pnpm run test:playwright {{.CLI_ARGS}}
   playwright-test-report:
     cmd: pnpm run test:playwright-report

frontend/viewer/playwright.config.ts

@@ -4,16 +4,19 @@ const vitePort = '5173';
 const dotnetPort = '5137';
 const autoStartServer = process.env.AUTO_START_SERVER ? Boolean(process.env.AUTO_START_SERVER) : false;
 const serverPort = process.env.SERVER_PORT ?? (autoStartServer ? vitePort : dotnetPort);
-const allReporters: ReporterDescription[] = [['list'], [
+const allReporters: ReporterDescription[] = [
+  ['list'],
+];
+const localReporters: ReporterDescription[] = [['html', { outputFolder: 'html-test-results', open: 'never' }]];
+const ciReporters: ReporterDescription[] = [['github'], ['junit', {outputFile: 'test-results/results.xml'}], [
   '@argos-ci/playwright/reporter',
   {
+    //by only using the argos reporter in CI, screenshots will be placed in the screenshots folder when run locally
     // Upload to Argos on CI only.
     uploadToArgos: !!process.env.CI
     // Argos token not required when using GitHub Actions.
   }
 ]];
-const localReporters: ReporterDescription[] = [['html', { outputFolder: 'html-test-results', open: 'never' }]];
-const ciReporters: ReporterDescription[] = [['github'], ['junit', {outputFile: 'test-results/results.xml'}]];
 export default defineConfig({
   testDir: './tests',
   fullyParallel: true,

frontend/viewer/tests/project-view-snapshots.test.ts

@@ -1,32 +1,27 @@
 import {type Page, expect, test} from '@playwright/test';
 import { assertScreenshot } from './snapshot';
 
-const viewports = [
-  {height: 720, width: 1280, name: 'medium'},
-  {height: 812, width: 375, name: 'iphone-11'},
-];
+for (const colorScheme of ['light', 'dark'] as const) {
+  test(`ui snapshot selected entry (color: ${colorScheme})`, async ({page}) => {
+    await page.emulateMedia({colorScheme});
+    await page.goto('/testing/project-view');
+    await waitForProjectViewReady(page);
+    await page.getByRole('row', {name: 'ambuka to cross a body of'}).click();
+    await expect(page.getByRole('heading', {name: 'ambuka'})).toBeVisible();
+    await expect(page.locator('.i-mdi-dots-vertical')).toBeVisible();
+    await expect(page.locator('.i-mdi-loading')).toHaveCount(0);
+    await assertScreenshot(page, 'project-view-entry-selected-' + colorScheme);
+  });
 
-  for (const colorScheme of ['light', 'dark'] as const) {
-    test(`ui snapshot selected entry (color: ${colorScheme})`, async ({page}) => {
-      await page.emulateMedia({colorScheme});
-      await page.goto('/testing/project-view');
-      await waitForProjectViewReady(page);
-      await page.getByRole('row', {name: 'ambuka to cross a body of'}).click();
-      await expect(page.getByRole('heading', {name: 'ambuka'})).toBeVisible();
-      await expect(page.locator('.i-mdi-dots-vertical')).toBeVisible();
-      await expect(page.locator('.i-mdi-loading')).toHaveCount(0);
-      await assertScreenshot(page, 'project-view-entry-selected-' + colorScheme);
-    });
-
-    test(`ui snapshot default (color: ${colorScheme})`, async ({page}) => {
-      await page.emulateMedia({colorScheme});
-      await page.goto('/testing/project-view');
-      await waitForProjectViewReady(page);
-      await expect(page.getByRole('textbox', {name: 'Filter'})).toBeVisible();
-      await page.getByRole('row', { name: 'ambuka to cross a body of' }).scrollIntoViewIfNeeded();
-      await assertScreenshot(page, 'project-view-default-' + colorScheme);
-    });
-  }
+  test(`ui snapshot default (color: ${colorScheme})`, async ({page}) => {
+    await page.emulateMedia({colorScheme});
+    await page.goto('/testing/project-view');
+    await waitForProjectViewReady(page);
+    await expect(page.getByRole('textbox', {name: 'Filter'})).toBeVisible();
+    await page.getByRole('row', { name: 'ambuka to cross a body of' }).scrollIntoViewIfNeeded();
+    await assertScreenshot(page, 'project-view-default-' + colorScheme);
+  });
+}
 
 
 async function waitForProjectViewReady(page: Page) {

frontend/viewer/tests/snapshot.ts

@@ -3,11 +3,26 @@ import type {Page} from '@playwright/test';
 
 const defaultOptions: ArgosScreenshotOptions = {
   viewports: [
-    {height: 720, width: 1280},
+    { height: 720, width: 1280 },
     'iphone-x'
-  ]
+  ],
 };
 
+const marketingScreenshotSizes: Exclude<ArgosScreenshotOptions['viewports'], undefined> = [
+  { width: 1024, height: 500 },//android feature graphic
+  { width: 720, height: 1280 },
+  { preset: 'macbook-16', orientation: 'landscape' },
+  { preset: 'macbook-16', orientation: 'portrait' },
+  { width: 1620, height: 2160 },//ipad
+  { width: 2160, height: 1620 }
+];
+
 export async function assertScreenshot(page: Page, name: string, options?: ArgosScreenshotOptions): Promise<void> {
+  if (process.env.MARKETING_SCREENSHOTS === 'true') {
+    options = {
+      ...options,
+      viewports: [...defaultOptions.viewports ?? [], ...marketingScreenshotSizes]
+    };
+  }
   await argosScreenshot(page, name, {...defaultOptions, ...options});
 }