test: playwright cache (#1029)

* test: playwright cache

* fix: add mask test map

* fix: lint

.gitignore

@@ -19,6 +19,6 @@ node_modules
 .env
 .env.development
 /test-results/
-/playwright-report/
+playwright-report*
 /blob-report/
-/playwright/playwright/.cache/
+.cache*

package.json

@@ -80,6 +80,7 @@
     "test:watch": "jest --watchAll",
     "playwright": "playwright test --config=playwright/playwright.config.ts",
     "playwright:update": "npm run playwright -- -u",
+    "playwright:clear-cache": "rm -rf ./playwright/.cache",
     "playwright:docker": "./scripts/playwright-docker.sh 'npm run playwright'",
     "playwright:docker:update": "./scripts/playwright-docker.sh 'npm run playwright:update'",
     "playwright:docker:clear-cache": "./scripts/playwright-docker.sh clear-cache",

playwright/README.md

@@ -132,6 +132,7 @@
 - `npm run playwright:install` - install playwright browsers and dependencies
 - `npm run playwright` - run tests
 - `npm run playwright:update` - update screenshots
+- `npm run playwright:clear-cache` - clear cache vite
 - `npm run playwright:docker` - run tests using docker
 - `npm run playwright:docker:update` - update screenshots using docker
-- `npm run playwright:docker:clear-cache` - clear node_modules cache for docker container
+- `npm run playwright:docker:clear-cache` - clear node_modules cache for docker container and clear cache vite

playwright/playwright.config.ts

@@ -18,7 +18,10 @@ reporter.push(
         'html',
         {
             open: process.env.CI ? 'never' : 'on-failure',
-            outputFolder: resolve(process.cwd(), 'playwright-report'),
+            outputFolder: resolve(
+                process.cwd(),
+                process.env.IS_DOCKER ? 'playwright-report-docker' : 'playwright-report',
+            ),
         },
     ],
 );
@@ -54,6 +57,7 @@ const config: PlaywrightTestConfig = {
         /* Port to use for Playwright component endpoint. */
         screenshot: 'only-on-failure',
         timezoneId: 'UTC',
+        ctCacheDir: process.env.IS_DOCKER ? '.cache-docker' : '.cache',
         ctViteConfig: {
             publicDir: pathFromRoot('.storybook/public'),
             json: {

scripts/playwright-docker.sh

@@ -15,6 +15,7 @@ run_command() {
     $CONTAINER_TOOL run --rm --network host -it -w /work \
         -v $(pwd):/work \
         -v "$NODE_MODULES_CACHE_DIR:/work/node_modules" \
+        -e IS_DOCKER=1 \
         "$IMAGE_NAME:$IMAGE_TAG" \
         /bin/bash -c "$1"
 }
@@ -30,6 +31,7 @@ fi
 
 if [[ "$1" = "clear-cache" ]]; then
     rm -rf "$NODE_MODULES_CACHE_DIR"
+    rm -rf "./playwright/.cache-docker"
     exit 0
 fi
 

src/blocks/Map/__tests__/Map.visual.test.tsx

@@ -4,30 +4,28 @@ import {test} from '../../../../playwright/core/index';
 
 import {Default, Direction, MapsTypes, Size} from './helpers';
 
-const DEFAULT_MAP_DELAY = 20 * 1000;
-
 test.describe('Map', () => {
-    test.skip('render stories <Default>', async ({mount, expectScreenshot, delay}) => {
+    test('render stories <Default>', async ({mount, expectScreenshot, page}) => {
         await mount(<Default />);
-        await delay(DEFAULT_MAP_DELAY);
-        await expectScreenshot({skipTheme: 'dark'});
+
+        await expectScreenshot({skipTheme: 'dark', mask: [page.locator('.pc-map')]});
     });
 
-    test.skip('render stories <Size>', async ({mount, expectScreenshot, delay}) => {
+    test('render stories <Size>', async ({mount, expectScreenshot, page}) => {
         await mount(<Size />);
-        await delay(DEFAULT_MAP_DELAY);
-        await expectScreenshot({skipTheme: 'dark'});
+
+        await expectScreenshot({skipTheme: 'dark', mask: [page.locator('.pc-map')]});
     });
 
-    test.skip('render stories <Direction>', async ({mount, expectScreenshot, delay}) => {
+    test('render stories <Direction>', async ({mount, expectScreenshot, page}) => {
         await mount(<Direction />);
-        await delay(DEFAULT_MAP_DELAY);
-        await expectScreenshot({skipTheme: 'dark'});
+
+        await expectScreenshot({skipTheme: 'dark', mask: [page.locator('.pc-map')]});
     });
 
-    test.skip('render stories <MapsTypes>', async ({mount, expectScreenshot, delay}) => {
+    test('render stories <MapsTypes>', async ({mount, expectScreenshot, page}) => {
         await mount(<MapsTypes />);
-        await delay(DEFAULT_MAP_DELAY);
-        await expectScreenshot({skipTheme: 'dark'});
+
+        await expectScreenshot({skipTheme: 'dark', mask: [page.locator('.pc-map')]});
     });
 });