FI-1344 refactor: Playwright config (use object)

refactor: reexport `devices` from `@playwright/test`
fix: add Playwright's browser version check
fix: add using Playwright version from `package.json`

Dockerfile

@@ -1,4 +1,6 @@
-FROM mcr.microsoft.com/playwright:v1.46.1-noble
+ARG PLAYWRIGHT_VERSION
+
+FROM mcr.microsoft.com/playwright:v${PLAYWRIGHT_VERSION}-noble
 
 COPY ./build/node_modules/e2ed /node_modules/e2ed
 

autotests/tests/e2edReportExample/browserData.ts

@@ -13,8 +13,6 @@ import {
 test('correctly read data from browser', {meta: {testId: '14'}}, async () => {
   await navigateToPage(E2edReportExample);
 
-  await waitForInterfaceStabilization(100);
-
   await createClientFunction(() => {
     console.error('error');
     console.info('info');
@@ -23,10 +21,7 @@ test('correctly read data from browser', {meta: {testId: '14'}}, async () => {
 
     setTimeout(() => {
       throw new Error('foo');
-    }, 8);
-    setTimeout(() => {
-      throw new Error('bar');
-    }, 32);
+    }, 100);
   })();
 
   const consoleMessages = getBrowserConsoleMessages();
@@ -47,5 +42,14 @@ test('correctly read data from browser', {meta: {testId: '14'}}, async () => {
 
   const jsErrors = getBrowserJsErrors();
 
-  await expect(jsErrors.length === 0, 'getBrowserJsErrors read JS errors').eql(true);
+  await expect(
+    jsErrors.length,
+    'getBrowserJsErrors read zero JS errors when there are no errors',
+  ).eql(0);
+
+  await waitForInterfaceStabilization(100);
+
+  await expect(jsErrors.length, 'getBrowserJsErrors read all JS errors').eql(1);
+
+  await expect(String(jsErrors[0]), 'getBrowserJsErrors read all JS errors').contains('foo');
 });

bin/addPackageJsonToBuildDocker.sh

@@ -1,6 +1,6 @@
 #!/usr/bin/env sh
 set -eu
 
-VERSION=`./bin/getVersion.sh`
+E2ED_VERSION=`./bin/getE2edVersion.sh`
 
-echo "{\n  \"dependencies\": {\n    \"e2ed\": \"$VERSION\"\n  }\n}" > ./build/docker/package.json
+echo "{\n  \"dependencies\": {\n    \"e2ed\": \"$E2ED_VERSION\"\n  }\n}" > ./build/docker/package.json

bin/buildDocker.sh

@@ -1,6 +1,10 @@
 #!/usr/bin/env sh
 set -eu
 
-VERSION=`./bin/getVersion.sh`
+E2ED_VERSION=`./bin/getE2edVersion.sh`
+PLAYWRIGHT_VERSION=`./bin/getPlaywrightVersion.sh`
 
-docker build --tag e2edhub/e2ed:$VERSION --tag e2edhub/e2ed:latest .
+docker build \
+       --build-arg PLAYWRIGHT_VERSION=$PLAYWRIGHT_VERSION \
+       --tag e2edhub/e2ed:$E2ED_VERSION \
+       --tag e2edhub/e2ed:latest .

bin/checkPlaywrightBrowserChromiumVersion.sh

@@ -0,0 +1,6 @@
+#!/usr/bin/env sh
+set -eu
+
+PLAYWRIGHT_VERSION=`./bin/getPlaywrightVersion.sh`
+
+grep "\"@playwright/browser-chromium\": \"$PLAYWRIGHT_VERSION\"" ./package.json

bin/getPlaywrightVersion.sh

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+set -eu
+
+grep -m1 @playwright/test ./package.json | cut -d '"' -f 4

package.json

@@ -67,8 +67,9 @@
   "scripts": {
     "asserts": "assert-modules-support-case-insensitive-fs ./autotests ./src && assert-package-lock-is-consistent",
     "precheck:all": "npm run asserts && npm run clear:lint:cache && npm run build",
-    "check:all": "npm audit && npm run parallel check:branch lint test",
+    "check:all": "npm audit && npm run parallel check:branch check:playwright-version lint test",
     "check:branch": "node ./build/checkBranch.js",
+    "check:playwright-version": "./bin/checkPlaywrightBrowserChromiumVersion.sh",
     "clear:lint:cache": "rm -f ./build/tsconfig.tsbuildinfo ./node_modules/.cache/lint-*",
     "lint": "npm run parallel lint:es lint:prettier lint:types",
     "lint:es": "eslint --cache --cache-location=./node_modules/.cache/lint-es --cache-strategy=content --ext=.ts --max-warnings=0 --report-unused-disable-directives .",

src/config.ts

@@ -25,7 +25,7 @@ import {isLocalRun} from './configurator';
 
 import type {FullPackConfig, Mutable, UserlandPack} from './types/internal';
 
-import {defineConfig} from '@playwright/test';
+import {defineConfig, type PlaywrightTestConfig} from '@playwright/test';
 
 const maxTimeoutInMs = 3600_000;
 
@@ -91,6 +91,23 @@ if (isDebug) {
   setReadonlyProperty(userlandPack, 'testTimeout', maxTimeoutInMs);
 }
 
+const useOptions: PlaywrightTestConfig['use'] = {
+  actionTimeout: userlandPack.testIdleTimeout,
+  browserName: userlandPack.browserName,
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  bypassCSP: true,
+  deviceScaleFactor: userlandPack.deviceScaleFactor,
+  hasTouch: userlandPack.enableTouchEventEmulation,
+  headless: isLocalRun ? userlandPack.enableHeadlessMode : true,
+  isMobile: userlandPack.enableMobileDeviceMode,
+  launchOptions: {args: [...userlandPack.browserFlags]},
+  navigationTimeout: userlandPack.pageRequestTimeout,
+  trace: 'retain-on-failure',
+  userAgent: userlandPack.userAgent,
+  viewport: {height: userlandPack.viewportHeight, width: userlandPack.viewportWidth},
+  ...userlandPack.overriddenConfigFields?.use,
+};
+
 const playwrightConfig = defineConfig({
   expect: {timeout: userlandPack.assertionTimeout},
 
@@ -100,19 +117,7 @@ const playwrightConfig = defineConfig({
 
   outputDir: join(relativePathFromInstalledE2edToRoot, INTERNAL_REPORTS_DIRECTORY_PATH),
 
-  projects: [
-    {
-      name: userlandPack.browserName,
-      use: {
-        browserName: userlandPack.browserName,
-        deviceScaleFactor: userlandPack.deviceScaleFactor,
-        hasTouch: userlandPack.enableTouchEventEmulation,
-        isMobile: userlandPack.enableMobileDeviceMode,
-        userAgent: userlandPack.userAgent,
-        viewport: {height: userlandPack.viewportHeight, width: userlandPack.viewportWidth},
-      },
-    },
-  ],
+  projects: [{name: userlandPack.browserName, use: useOptions}],
 
   retries: isLocalRun ? 0 : userlandPack.maxRetriesCountInDocker - 1,
 
@@ -126,32 +131,7 @@ const playwrightConfig = defineConfig({
 
   ...userlandPack.overriddenConfigFields,
 
-  use: {
-    actionTimeout: userlandPack.testIdleTimeout,
-
-    browserName: userlandPack.browserName,
-
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    bypassCSP: true,
-
-    deviceScaleFactor: userlandPack.deviceScaleFactor,
-
-    hasTouch: userlandPack.enableTouchEventEmulation,
-
-    headless: isLocalRun ? userlandPack.enableHeadlessMode : true,
-
-    isMobile: userlandPack.enableMobileDeviceMode,
-
-    navigationTimeout: userlandPack.pageRequestTimeout,
-
-    trace: 'retain-on-failure',
-
-    userAgent: userlandPack.userAgent,
-
-    viewport: {height: userlandPack.viewportHeight, width: userlandPack.viewportWidth},
-
-    ...userlandPack.overriddenConfigFields?.use,
-  },
+  use: useOptions,
 });
 
 const config: FullPackConfig = Object.assign(playwrightConfig, userlandPack);

src/index.ts

@@ -4,6 +4,7 @@
 export {ApiRoute} from './ApiRoute';
 export {Page} from './Page';
 export {PageRoute} from './PageRoute';
+export {devices} from './playwright';
 export {Route} from './Route';
 export {getPlaywrightPage, useContext} from './useContext';
 

src/playwright.ts

@@ -0,0 +1 @@
+export {devices} from '@playwright/test';

src/utils/fullMocks/enableFullMocks.ts

@@ -52,6 +52,7 @@ export const enableFullMocks = async (
         requestKinds: Object.fromEntries(
           Object.entries(testFullMocks).map(([key, value]) => [key, value.length]),
         ),
+        testId: fullMocksState.testId,
       },
       LogEventType.InternalUtil,
     );