Add playwright test to check responsiveness in transactions page

.github/workflows/pull-request.yml

@@ -56,5 +56,15 @@ jobs:
         run: npx playwright install --with-deps chromium firefox webkit
         shell: bash
 
-      - name: Run Playwright tests
+      - name: Run Playwright e2e tests
         run: HOME=/root npm run e2e
+
+      - name: Run Playwright e2e responsive tests with mocks
+        run: HOME=/root npm run e2e-test-responsive
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 7
+

apps/golden-sample-app-e2e/page-objects/test-runner.ts

@@ -1,15 +1,20 @@
 import { test as baseTest } from '@playwright/test';
+import { VisualValidator } from '../utils/visual-validator';
 import { IdentityPage } from './pages/identity-page';
 import { testConfig } from '../test-config';
 import 'dotenv/config';
 
 export const test = baseTest.extend<{
   // Pages
   identityPage: IdentityPage;
+  visual: VisualValidator;
 }>({
   identityPage: async ({ page }, use, testInfo) => {
     await use(
       new IdentityPage(page, testInfo, { url: testConfig.appBaseUrl() })
     );
   },
+  visual: async ({ page }, use) => {
+    await use(new VisualValidator(page));
+  },
 });

apps/golden-sample-app-e2e/project.json

@@ -0,0 +1,15 @@
+{
+  "name": "golden-sample-app-e2e",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "application",
+  "tags": [],
+  "implicitDependencies": ["golden-sample-app"],
+  "targets": {
+    "e2e-chrome-mobile": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "npx playwright test --project 'mobile-chrome' --grep '@visual.+@responsive|@responsive.+@visual' --workers=2"
+      }
+    }
+  }
+}

apps/golden-sample-app-e2e/specs/login.spec.ts

@@ -14,7 +14,7 @@ const i18n = {
 
 test.describe.configure({ mode: 'parallel' });
 
-test.describe('@feature @i18n Login tests', () => {
+test.describe('@feature @i18n @e2e Login tests', () => {
   test('Empty user name', async ({ identityPage }) => {
     identityPage.open();
     await test.step('Validate Input fields labels', async () => {

apps/golden-sample-app-e2e/specs/transactions.spec.ts

@@ -0,0 +1,22 @@
+import { test } from '../page-objects/test-runner';
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('transactions');
+});
+test.describe.configure({ mode: 'parallel' });
+
+test.describe('@feature @responsive @visual Transaction page tests', () => {
+  test('Validate responsiveness of the transactions page', async ({
+    page,
+    visual,
+  }) => {
+    await test.step(`Transaction page full`, async () => {
+      await visual.testFullPage('transactions-page-full');
+    });
+    await test.step(`Transaction page with masked data`, async () => {
+      await visual.testWithMask('transactions-page-with-masked-data', {
+        mask: ['.transaction-account-number'],
+      });
+    });
+  });
+});

apps/golden-sample-app-e2e/utils/interfaces/visual-page-types.ts

@@ -0,0 +1,6 @@
+import { VisualTypes } from './visual-types';
+
+export interface VisualPageTypes extends VisualTypes {
+  clip?: { x: number; y: number; width: number; height: number };
+  fullPage?: boolean;
+}

apps/golden-sample-app-e2e/utils/interfaces/visual-types.ts

@@ -0,0 +1,13 @@
+import { Locator } from '@playwright/test';
+
+export interface VisualTypes {
+  animations?: 'disabled' | 'allow';
+  caret?: 'hide' | 'initial';
+  mask?: Array<Locator>;
+  maxDiffPixelRatio?: number;
+  maxDiffPixels?: number;
+  omitBackground?: boolean;
+  scale?: 'css' | 'device';
+  threshold?: number;
+  timeout?: number;
+}

apps/golden-sample-app-e2e/utils/visual-validator.ts

@@ -0,0 +1,75 @@
+import { expect, Locator, Page } from '@playwright/test';
+import { VisualPageTypes } from './interfaces/visual-page-types';
+import { VisualTypes } from './interfaces/visual-types';
+
+export class VisualValidator {
+  rtlPrefix: string;
+  constructor(
+    protected page: Page,
+    protected skip = false,
+    protected rtl = false
+  ) {
+    this.rtlPrefix = rtl ? `rtl-` : ``;
+  }
+
+  async testFullPage(name: string, options?: { waitBefore: number }) {
+    if (this.skip) return;
+    if (options?.waitBefore) {
+      await this.page.waitForTimeout(options.waitBefore);
+    }
+    await expect(this.page).toHaveScreenshot(this.screenName(name), {
+      fullPage: true,
+      maxDiffPixelRatio: 0.01,
+    });
+  }
+
+  async test(name: string, options?: VisualPageTypes) {
+    if (this.skip) return;
+    await expect(this.page).toHaveScreenshot(this.screenName(name), options);
+  }
+
+  async testWithMask(name: string, options: { mask: string[] }) {
+    if (this.skip) return;
+    await expect(this.page).toHaveScreenshot(this.screenName(name), {
+      mask: options.mask.map((selector) => this.page.locator(selector)),
+      maxDiffPixelRatio: 0.01,
+    });
+  }
+
+  async testForm(name: string) {
+    await this.testElement('form', name);
+  }
+
+  async testShowcase(name: string) {
+    await this.testElement('bb-showcase', name);
+  }
+
+  async testElement(
+    element: Locator | string,
+    name: string,
+    options?: VisualTypes
+  ) {
+    if (this.skip) return;
+    const locator =
+      typeof element === 'string' ? this.page.locator(element) : element;
+    await expect(locator).toHaveScreenshot(this.screenName(name), options);
+  }
+
+  async testElementWithMask(
+    element: Locator | string,
+    name: string,
+    options: { mask: string[] }
+  ) {
+    if (this.skip) return;
+    const locator =
+      typeof element === 'string' ? this.page.locator(element) : element;
+    await expect(locator).toHaveScreenshot(this.screenName(name), {
+      mask: options.mask.map((selector) => locator.locator(selector)),
+      maxDiffPixelRatio: 0.01,
+    });
+  }
+
+  private screenName(name) {
+    return `${this.rtlPrefix}${name}.png`;
+  }
+}

apps/golden-sample-app/project.json

@@ -134,7 +134,7 @@
       "options": {
         "devServerTarget": "golden-sample-app:serve",
         "command": "npx",
-        "args": ["playwright", "test"]
+        "args": ["playwright", "test", "--project", "web-chrome", "--grep", "@e2e"]
       },
       "configurations": {
         "production": {}

package.json

@@ -20,7 +20,8 @@
     "affected:test": "nx affected:test",
     "xi18n": "ng extract-i18n golden-sample-app --output-path=apps/golden-sample-app/src/locale && xliffmerge --profile apps/golden-sample-app/src/xliffmerge.json nl-NL",
     "e2e": "nx e2e",
-    "e2e-test": "npx playwright test --update-snapshots",
+    "e2e-test": "npx playwright test --project 'Web Chrome' --grep '@e2e'",
+    "e2e-test-responsive": "npx playwright test --project 'mobile-chrome' --grep '@visual.+@responsive|@responsive.+@visual' --workers=2",
     "lint": "nx run-many --all --target=lint",
     "format": "prettier --write \"{apps,libs}/**/*.{ts,md,html}\" \"!{apps,libs}/**/coverage\" ",
     "format:check": "prettier --list-different \"{apps,libs}/**/*.{ts,md}\" \"!{apps,libs}/**/coverage\""
@@ -88,7 +89,7 @@
     "@nx/jest": "17.3.0",
     "@nx/js": "17.3.0",
     "@nx/workspace": "17.3.0",
-    "@playwright/test": "1.41.2",
+    "@playwright/test": "1.42.1",
     "@schematics/angular": "17.1.4",
     "@types/jest": "^29.4.4",
     "@types/node": "^18.16.9",

playwright.config.ts

@@ -36,7 +36,7 @@ const config: PlaywrightTestConfig = {
   },
   projects: [
     {
-      name: 'Web Chrome',
+      name: 'web-chrome',
       use: {
         ...devices['Desktop Chrome'],
         launchOptions: {
@@ -51,6 +51,28 @@ const config: PlaywrightTestConfig = {
         },
       },
     },
+    {
+      name: 'mobile-chrome',
+      use: {
+        ...devices['Nexus 7'],
+        isMobile: true,
+        baseURL: 'http://localhost:4201',
+      },
+    },
+  ],
+  webServer: [
+    {
+      command: 'npm run mock-server',
+      url: 'http://localhost:9999/dev-interface',
+      timeout: 30 * 1000,
+      reuseExistingServer: false,
+    },
+    {
+      command: 'npx nx serve -c=mocks --port=4201',
+      url: 'http://localhost:4201/',
+      timeout: 120 * 1000,
+      reuseExistingServer: false,
+    },
   ],
 };