chore: add screenshot tests

Author: ma-efremoff

.eslintignore

@@ -0,0 +1 @@
+.cache-playwright*

.gitignore

@@ -29,3 +29,5 @@ lib/
 /blob-report/
 /playwright/.cache/
 coverage/
+
+.cache-playwright*

package-lock.json

@@ -75,6 +75,7 @@
     "jest": "^29.7.0",
     "lodash": "~4.17.13",
     "nano-staged": "^0.8.0",
+    "playwright": "^1.52.0",
     "postcss": "^8.4.14",
     "prettier": "^2.8.8",
     "react": "^18.3.1",

package.json

@@ -26,7 +26,8 @@ export default defineConfig({
         trace: 'on-first-retry',
         headless: true,
         testIdAttribute: 'data-qa',
-        ctCacheDir: __dirname + '/.cache-playwright',
+        ctCacheDir: process.env.DOCKER_CI ? './.cache-playwright.docker' : './.cache-playwright',
+        viewport: {width: 1280, height: 720},
     },
 
     /* Configure projects for major browsers */

playwright.config.ts

@@ -19,12 +19,15 @@ export const expectScreenshotFixture: PlaywrightFixture<ExpectScreenshotFixture>
         ...pageScreenshotOptions
     } = defaultParams) => {
         const captureScreenshot = async () => {
+            await page.waitForLoadState('networkidle');
             return (component || page.locator('.playwright-wrapper-test')).screenshot({
                 animations: 'disabled',
                 ...pageScreenshotOptions,
             });
         };
 
+        await page.mouse.move(0, 0);
+
         //console.log({nameScreenshot, nameSuffix, testInfo: testInfo});
 
         // Wait for loading of all the images

playwright/core/expectScreenshotFixture.ts

@@ -17,7 +17,7 @@ else
 fi
 
 IMAGE_NAME="mcr.microsoft.com/playwright"
-IMAGE_TAG="v"${VERSION}"-focal"
+IMAGE_TAG="v"${VERSION}"-noble"
 PW_VERSION=$(echo $IMAGE_TAG | awk -F "-" '{print $1}' | sed -e 's/^v//')
 
 NAME=$(node -e 'console.log(require("./package.json").name)')
@@ -29,6 +29,15 @@ command_exists() {
     command -v "$1" >/dev/null 2>&1
 }
 
+if command_exists docker; then
+    CONTAINER_TOOL="docker"
+elif command_exists podman; then
+    CONTAINER_TOOL="podman"
+else
+    echo "Neither Docker nor Podman is installed on the system."
+    exit 1
+fi
+
 run_command() {
     toRun="$@"
 
@@ -46,11 +55,14 @@ run_command() {
         echo Env file is found:
         echo "    $useEnvFile"
     else
+        useEnvFile=
         echo "Use the file to provide environment variables:"
         echo "    $envFile"
     fi
 
-    $CONTAINER_TOOL run --rm --network host -it -w /work \
+    $CONTAINER_TOOL run --rm --network host -it \
+        -e DOCKER_CI=1 \
+        -w /work \
         -v $(pwd):/work \
         -v "$NODE_MODULES_CACHE_DIR/node_modules:/work/node_modules" \
         -v "$NODE_MODULES_CACHE_DIR/.cache-playwright:/work/.cache-playwright" \
@@ -59,15 +71,6 @@ run_command() {
         /bin/bash -c "umask 0000; $toRun"
 }
 
-if command_exists docker; then
-    CONTAINER_TOOL="docker"
-elif command_exists podman; then
-    CONTAINER_TOOL="podman"
-else
-    echo "Neither Docker nor Podman is installed on the system."
-    exit 1
-fi
-
 action=${1:-test}
 
 if [ "$action" = "clear-cache" ]; then

playwright/docker-run.sh

@@ -4,6 +4,7 @@ import {beforeMount} from '@playwright/experimental-ct-react/hooks';
 import {MobileProvider, ThemeProvider, Toaster, ToasterProvider} from '@gravity-ui/uikit';
 
 import '@gravity-ui/uikit/styles/styles.scss';
+import '@gravity-ui/unipika/styles/unipika.scss';
 
 const toaster = new Toaster();