devops: add docker screenshot expectations for html-reporter tests (#17341)

.github/workflows/tests_primary.yml

@@ -144,14 +144,15 @@ jobs:
         DEBUG: pw:install
     - run: npm run build
     - run: npx playwright install --with-deps
-    - run: npm run test-html-reporter
-      if: always() && matrix.os != 'ubuntu-latest'
-    - run: xvfb-run npm run test-html-reporter
-      if: always() && matrix.os == 'ubuntu-latest'
-    - run: npm run test-web
-      if: always() && matrix.os != 'ubuntu-latest'
+    - run: |
+        ./utils/docker/build.sh --amd64 focal $PWTEST_DOCKER_BASE_IMAGE
+        npx playwright docker build
+        xvfb-run npm run test-html-reporter
+      env:
+        PLAYWRIGHT_DOCKER: 1
+        PWTEST_DOCKER_BASE_IMAGE: playwright:localbuild
     - run: xvfb-run npm run test-web
-      if: always() && matrix.os == 'ubuntu-latest'
+      if: always()
 
   test-package-installations:
     name: "Installation Test ${{ matrix.os }} (${{ matrix.node_version }})"

packages/html-reporter/playwright.config.ts

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import path from 'path';
 import type { PlaywrightTestConfig } from '@playwright/experimental-ct-react';
 import { devices } from '@playwright/experimental-ct-react';
 
@@ -22,51 +21,16 @@ const config: PlaywrightTestConfig = {
   testDir: 'src',
   forbidOnly: !!process.env.CI,
   retries: process.env.CI ? 2 : 0,
+  ignoreSnapshots: !process.env.PLAYWRIGHT_DOCKER,
   reporter: 'html',
   use: {
     ctPort: 3101,
     trace: 'on-first-retry',
   },
-  projects: [],
+  projects: [{
+    name: 'chromium',
+    use: { ...devices['Desktop Chrome'] },
+  }],
 };
 
-if (process.env.REBASE) {
-  require('dotenv').config({
-    path: path.join(__dirname, '.env'),
-  });
-
-  if (!process.env.TEST_WORKER_INDEX) {
-    // eslint-disable-next-line no-console
-    console.log(`Running against service: ${process.env.SERVICE_URL}`);
-  }
-
-  config.timeout = 600000;
-  const configurations = [
-    { os: 'windows', platform: 'win32' },
-    { os: 'linux', platform: 'linux' },
-    { os: 'macos', platform: 'darwin' },
-  ];
-  for (const { os, platform } of configurations) {
-    config.projects.push({
-      name: `service-${platform}`,
-      _screenshotsDir: `./__screenshots__/${platform}/chromium`,
-      use: {
-        ...devices['Desktop Chrome'],
-        connectOptions: {
-          timeout: 600000,
-          wsEndpoint: process.env.SERVICE_URL + `?os=${os}`,
-        },
-      },
-    });
-  }
-} else {
-  config.projects = [
-    {
-      name: 'chromium',
-      _screenshotsDir: `./__screenshots__/${process.platform}/chromium`,
-      use: { ...devices['Desktop Chrome'] },
-    },
-  ];
-}
-
 export default config;

packages/html-reporter/src/chip.spec.tsx

@@ -28,6 +28,7 @@ test('expand collapse', async ({ mount }) => {
   await expect(component.locator('text=Chip body')).not.toBeVisible();
   await component.locator('text=Title').click();
   await expect(component.locator('text=Chip body')).toBeVisible();
+  await expect(component).toHaveScreenshot();
 });
 
 test('render long title', async ({ mount }) => {
@@ -37,6 +38,7 @@ test('render long title', async ({ mount }) => {
   </AutoChip>);
   await expect(component).toContainText('Extremely long title.');
   await expect(component.locator('text=Extremely long title.')).toHaveAttribute('title', title);
+  await expect(component).toHaveScreenshot();
 });
 
 test('setExpanded is called', async ({ mount }) => {