Fix visual tests

Author: fcollonval

.github/workflows/visual-test.yml

@@ -14,6 +14,9 @@ jobs:
   visual-test:
     runs-on: ubuntu-latest
     timeout-minutes: 60
+    env:
+      PLAYWRIGHT_BROWSERS_PATH: ${{ github.workspace }}/pw-browsers
+
     steps:
       - name: Checkout 🛎️
         uses: actions/checkout@v3
@@ -25,7 +28,8 @@ jobs:
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
+        run: echo "dir=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT
+
       - name: Setup yarn cache
         uses: actions/cache@v3
         id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
@@ -36,8 +40,17 @@ jobs:
             yarn-
 
       - name: Install Dependencies 📥
+        env:
+          PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: 1
         run: yarn install
 
+      - name: Set up browser cache
+        uses: actions/cache@v3
+        with:
+          path: |
+            ${{ github.workspace }}/pw-browsers
+          key: ${{ runner.os }}-${{ hashFiles('ui-tests/yarn.lock') }}
+
       - name: Install Playwright Browsers
         run: yarn run playwright install --with-deps
         working-directory: packages/components
@@ -59,4 +72,4 @@ jobs:
           name: jupyter-ui-test
           path: |
             packages/components/test-assets/
-            packages/components/tests-out/**/*-snapshots/*
+            packages/components/src/**/*-snapshots/*

packages/components/playwright.config.ts

@@ -3,7 +3,6 @@ import { PlaywrightTestConfig, devices } from '@playwright/test';
 const config: PlaywrightTestConfig = {
   forbidOnly: !!process.env.CI,
   retries: process.env.CI ? 2 : 0,
-  // testMatch: 'tests-out/**/*.test.js',
   testMatch: 'src/**/*.test.ts',
   webServer: {
     command: 'yarn run start:ci',

packages/components/src/menu/menu.test.ts

@@ -6,7 +6,7 @@ import { test, expect } from '@playwright/test';
 test('Default', async ({ page }) => {
   await page.goto('/iframe.html?id=components-menu--default');
 
-  expect(
-    await page.locator('#storybook-root > jp-menu').screenshot()
-  ).toMatchSnapshot('menu-default.png');
+  expect(await page.locator('jp-menu').first().screenshot()).toMatchSnapshot(
+    'menu-default.png'
+  );
 });

packages/components/src/skeleton/skeleton.stories.ts

@@ -12,7 +12,7 @@ export default {
     actions: { disabled: true }
   },
   decorators: [
-    story => `<div style="display: block;">
+    story => `<div data-testid="skeleton-container" style="display: block;">
           ${story()}
         </div>`
   ]

packages/components/src/skeleton/skeleton.test.ts

@@ -6,7 +6,7 @@ import { test, expect } from '@playwright/test';
 test('Default', async ({ page }) => {
   await page.goto('/iframe.html?id=components-skeleton--default');
 
-  expect(await page.locator('jp-skeleton').screenshot()).toMatchSnapshot(
-    'skeleton-default.png'
-  );
+  expect(
+    await page.getByTestId('skeleton-container').screenshot()
+  ).toMatchSnapshot('skeleton-default.png');
 });