Merge pull request #2269 from blockscout/bump-pw-1-47

Bump Playwright to v1.47.2

.github/workflows/checks.yml

@@ -30,7 +30,7 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v4
         with:
-          node-version: 20.11.0
+          node-version: 20.17.0
           cache: 'yarn'
 
       - name: Cache node_modules
@@ -43,7 +43,7 @@ jobs:
 
       - name: Install dependencies
         if: steps.cache-node-modules.outputs.cache-hit != 'true'
-        run: yarn --frozen-lockfile --ignore-optional
+        run: yarn --frozen-lockfile
 
       - name: Run ESLint
         run: yarn lint:eslint
@@ -62,7 +62,7 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v4
         with:
-          node-version: 20.11.0
+          node-version: 20.17.0
           cache: 'yarn'
 
       - name: Cache node_modules
@@ -75,10 +75,10 @@ jobs:
 
       - name: Install dependencies
         if: steps.cache-node-modules.outputs.cache-hit != 'true'
-        run: yarn --frozen-lockfile --ignore-optional
+        run: yarn --frozen-lockfile
 
       - name: Install script dependencies
-        run: cd ./deploy/tools/envs-validator && yarn --frozen-lockfile --ignore-optional
+        run: cd ./deploy/tools/envs-validator && yarn --frozen-lockfile
 
       - name: Run validation tests
         run: |
@@ -101,7 +101,7 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v4
         with:
-          node-version: 20.11.0
+          node-version: 20.17.0
           cache: 'yarn'
 
       - name: Cache node_modules
@@ -114,7 +114,7 @@ jobs:
 
       - name: Install dependencies
         if: steps.cache-node-modules.outputs.cache-hit != 'true'
-        run: yarn --frozen-lockfile --ignore-optional
+        run: yarn --frozen-lockfile
 
       - name: Run Jest
         run: yarn test:jest ${{ github.event_name == 'pull_request' && '--changedSince=origin/main' || '' }} --passWithNoTests
@@ -133,7 +133,7 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v4
         with:
-          node-version: 20.11.0
+          node-version: 20.17.0
           cache: 'yarn'
 
       - name: Cache node_modules
@@ -146,7 +146,7 @@ jobs:
 
       - name: Install dependencies
         if: steps.cache-node-modules.outputs.cache-hit != 'true'
-        run: yarn --frozen-lockfile --ignore-optional
+        run: yarn --frozen-lockfile
 
       - name: Install script dependencies 
         run: cd ./deploy/tools/affected-tests && yarn --frozen-lockfile
@@ -171,7 +171,7 @@ jobs:
       (needs.pw_affected_tests.result == 'success' || needs.pw_affected_tests.result == 'skipped') 
     runs-on: ubuntu-latest
     container:
-      image: mcr.microsoft.com/playwright:v1.41.1-focal
+      image: mcr.microsoft.com/playwright:v1.47.2-focal
 
     strategy:
       fail-fast: false
@@ -190,7 +190,7 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v4
         with:
-          node-version: 20.11.0
+          node-version: 20.17.0
           cache: 'yarn'
 
       - name: Cache node_modules
@@ -203,7 +203,7 @@ jobs:
 
       - name: Install dependencies
         if: steps.cache-node-modules.outputs.cache-hit != 'true'
-        run: yarn --frozen-lockfile --ignore-optional
+        run: yarn --frozen-lockfile
 
       - name: Download affected tests list
         if: ${{ needs.pw_affected_tests.result == 'success' }}

.github/workflows/upload-source-maps.yml

@@ -21,7 +21,7 @@ jobs:
             - name: Setup node
               uses: actions/setup-node@v4
               with:
-                node-version: 20.11.0
+                node-version: 20.17.0
                 cache: 'yarn'
 
             - name: Cache node_modules
@@ -34,7 +34,7 @@ jobs:
 
             - name: Install dependencies
               if: steps.cache-node-modules.outputs.cache-hit != 'true'
-              run: yarn --frozen-lockfile --ignore-optional
+              run: yarn --frozen-lockfile
 
             - name: Make production build with source maps
               run: yarn build

.nvmrc

@@ -1 +1 @@
-20.11.0
+20.17.0

Dockerfile

@@ -1,7 +1,7 @@
 # *****************************
 # *** STAGE 1: Dependencies ***
 # *****************************
-FROM node:20.11.0-alpine AS deps
+FROM node:20.17.0-alpine AS deps
 # Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
 RUN apk add --no-cache libc6-compat python3 make g++
 RUN ln -sf /usr/bin/python3 /usr/bin/python
@@ -31,7 +31,7 @@ RUN yarn --frozen-lockfile
 # *****************************
 # ****** STAGE 2: Build *******
 # *****************************
-FROM node:20.11.0-alpine AS builder
+FROM node:20.17.0-alpine AS builder
 RUN apk add --no-cache --upgrade libc6-compat bash
 
 # pass build args to env variables
@@ -81,7 +81,7 @@ RUN cd ./deploy/tools/envs-validator && yarn build
 # ******* STAGE 3: Run ********
 # *****************************
 # Production image, copy all the files and run next
-FROM node:20.11.0-alpine AS runner
+FROM node:20.17.0-alpine AS runner
 RUN apk add --no-cache --upgrade bash curl jq unzip
 
 ### APP

package.json

@@ -4,8 +4,8 @@
   "private": false,
   "homepage": "https://github.com/blockscout/frontend#readme",
   "engines": {
-    "node": "20.11.0",
-    "npm": "10.2.4"
+    "node": "20.17.0",
+    "npm": "10.8.2"
   },
   "scripts": {
     "dev": "./tools/scripts/dev.sh",
@@ -26,8 +26,8 @@
     "svg:build-sprite": "icons build -i ./icons -o ./public/icons --optimize",
     "test:pw": "./tools/scripts/pw.sh",
     "test:pw:local": "export NODE_PATH=$(pwd)/node_modules && yarn test:pw",
-    "test:pw:docker": "docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.41.1-focal ./tools/scripts/pw.docker.sh",
-    "test:pw:docker:deps": "docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.41.1-focal ./tools/scripts/pw.docker.deps.sh",
+    "test:pw:docker": "docker run --rm --ipc=host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.47.2-focal ./tools/scripts/pw.docker.sh",
+    "test:pw:docker:deps": "docker run --rm --ipc=host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.47.2-focal ./tools/scripts/pw.docker.deps.sh",
     "test:pw:ci": "yarn test:pw --project=$PW_PROJECT",
     "test:pw:detect-affected": "node ./deploy/tools/affected-tests/index.js",
     "test:jest": "jest",
@@ -115,8 +115,8 @@
     "xss": "^1.0.14"
   },
   "devDependencies": {
-    "@playwright/experimental-ct-react": "1.41.1",
-    "@playwright/test": "1.41.1",
+    "@playwright/experimental-ct-react": "1.47.2",
+    "@playwright/test": "1.47.2",
     "@svgr/webpack": "^6.5.1",
     "@tanstack/eslint-plugin-query": "^5.0.5",
     "@testing-library/react": "^14.0.0",
@@ -128,7 +128,7 @@
     "@types/jest": "^29.2.0",
     "@types/js-cookie": "^3.0.2",
     "@types/mixpanel-browser": "^2.38.1",
-    "@types/node": "20.11.0",
+    "@types/node": "20.16.7",
     "@types/phoenix": "^1.5.4",
     "@types/qrcode": "^1.5.0",
     "@types/react": "18.0.9",
@@ -161,7 +161,7 @@
     "ts-node": "^10.9.1",
     "typescript": "5.4.2",
     "vite-plugin-svgr": "^2.2.2",
-    "vite-tsconfig-paths": "^3.5.2",
+    "vite-tsconfig-paths": "4.3.2",
     "ws": "^8.17.1"
   },
   "lint-staged": {

playwright-ct.config.ts

@@ -50,7 +50,7 @@ const config: PlaywrightTestConfig = defineConfig({
 
     ctViteConfig: {
       plugins: [
-        tsconfigPaths(),
+        tsconfigPaths({ loose: true, ignoreConfigErrors: true }),
         react(),
         svgr({
           exportAsDefault: true,
@@ -82,6 +82,9 @@ const config: PlaywrightTestConfig = defineConfig({
           // We don't call this function in TestApp and since we use useWeb3Modal() and useWeb3ModalState() hooks in the code, we have to mock the module
           // Otherwise it will complain that createWeb3Modal() is no called before the hooks are used
           { find: /^@web3modal\/wagmi\/react$/, replacement: './playwright/mocks/modules/@web3modal/wagmi/react.js' },
+
+          { find: '/playwright/index.ts', replacement: './playwright/index.ts' },
+          { find: '/playwright/envs.js', replacement: './playwright/envs.js' },
         ],
       },
       define: {

playwright/fixtures/render.tsx

@@ -4,8 +4,6 @@ import type { Locator, TestFixture } from '@playwright/test';
 import type router from 'next/router';
 import React from 'react';
 
-import type { JsonObject } from '@playwright/experimental-ct-core/types/component';
-
 import type { Props as TestAppProps } from 'playwright/TestApp';
 import TestApp from 'playwright/TestApp';
 
@@ -14,15 +12,13 @@ interface MountResult extends Locator {
   update(component: JSX.Element): Promise<void>;
 }
 
-type Mount = <HooksConfig extends JsonObject>(component: JSX.Element, options?: MountOptions<HooksConfig>) => Promise<MountResult>;
-
-interface Options extends JsonObject {
-  hooksConfig?: {
-    router: Partial<Pick<typeof router, 'query' | 'isReady' | 'asPath' | 'pathname'>>;
-  };
+interface AppHooksConfig {
+  router: Partial<Pick<typeof router, 'query' | 'isReady' | 'asPath' | 'pathname'>>;
 }
 
-export type RenderFixture = (component: JSX.Element, options?: Options, props?: Omit<TestAppProps, 'children'>) => Promise<MountResult>
+type Mount = <HooksConfig extends AppHooksConfig>(component: JSX.Element, options?: MountOptions<HooksConfig>) => Promise<MountResult>
+
+export type RenderFixture = (component: JSX.Element, options?: MountOptions<AppHooksConfig>, props?: Omit<TestAppProps, 'children'>) => Promise<MountResult>
 
 const fixture: TestFixture<RenderFixture, { mount: Mount }> = async({ mount }, use) => {
   await use((component, options, props) => {

playwright/lib.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable no-console */
 import { test as base } from '@playwright/experimental-ct-react';
+import type { Page } from '@playwright/test';
 
 import * as injectMetaMaskProvider from './fixtures/injectMetaMaskProvider';
 import * as mockApiResponse from './fixtures/mockApiResponse';
@@ -13,7 +14,7 @@ import * as mockTextAd from './fixtures/mockTextAd';
 import * as render from './fixtures/render';
 import * as socketServer from './fixtures/socketServer';
 
-interface Fixtures {
+export interface Fixtures {
   render: render.RenderFixture;
   mockApiResponse: mockApiResponse.MockApiResponseFixture;
   mockAssetResponse: mockAssetResponse.MockAssetResponseFixture;
@@ -27,6 +28,8 @@ interface Fixtures {
   mockTextAd: mockTextAd.MockTextAdFixture;
 }
 
+export type TestFnArgs = Fixtures & { page: Page };
+
 const test = base.extend<Fixtures>({
   render: render.default,
   mockApiResponse: mockApiResponse.default,

ui/address/tokenSelect/TokenSelect.pw.tsx

@@ -61,7 +61,6 @@ test.describe('mobile', () => {
     );
 
     await page.getByRole('button', { name: /select/i }).click();
-    await page.getByText('USD Coin').hover();
 
     await expect(page).toHaveScreenshot();
   });

ui/marketplace/MarketplaceAppModal.pw.tsx

@@ -4,6 +4,7 @@ import type { MarketplaceAppWithSecurityReport } from 'types/client/marketplace'
 
 import { apps as appsMock } from 'mocks/apps/apps';
 import { securityReports as securityReportsMock } from 'mocks/apps/securityReports';
+import type { TestFnArgs } from 'playwright/lib';
 import { test, expect, devices } from 'playwright/lib';
 
 import MarketplaceAppModal from './MarketplaceAppModal';
@@ -28,7 +29,7 @@ const props = {
   canRate: undefined,
 };
 
-const testFn: Parameters<typeof test>[1] = async({ render, page, mockAssetResponse, mockEnvs }) => {
+const testFn = async({ render, page, mockAssetResponse, mockEnvs }: TestFnArgs) => {
   await mockEnvs([
     [ 'NEXT_PUBLIC_MARKETPLACE_RATING_AIRTABLE_API_KEY', 'test' ],
     [ 'NEXT_PUBLIC_MARKETPLACE_RATING_AIRTABLE_BASE_ID', 'test' ],

ui/pages/MarketplaceApp.pw.tsx

@@ -6,6 +6,7 @@ import config from 'configs/app';
 import { apps as appsMock } from 'mocks/apps/apps';
 import { ratings as ratingsMock } from 'mocks/apps/ratings';
 import { securityReports as securityReportsMock } from 'mocks/apps/securityReports';
+import type { TestFnArgs } from 'playwright/lib';
 import { test, expect, devices } from 'playwright/lib';
 
 import MarketplaceApp from './MarketplaceApp';
@@ -20,7 +21,7 @@ const hooksConfig = {
 const MARKETPLACE_CONFIG_URL = 'http://localhost:4000/marketplace-config.json';
 const MARKETPLACE_SECURITY_REPORTS_URL = 'http://localhost:4000/marketplace-security-reports.json';
 
-const testFn: Parameters<typeof test>[1] = async({ render, mockConfigResponse, mockAssetResponse, mockEnvs, mockRpcResponse, page }) => {
+const testFn = async({ render, mockConfigResponse, mockAssetResponse, mockEnvs, mockRpcResponse, page }: TestFnArgs) => {
   await mockEnvs([
     [ 'NEXT_PUBLIC_MARKETPLACE_ENABLED', 'true' ],
     [ 'NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', MARKETPLACE_CONFIG_URL ],

ui/tokenInstance/TokenInstanceDetails.pw.tsx

@@ -8,7 +8,7 @@ import { protocolTagWithMeta } from 'mocks/metadata/address';
 import { tokenInfoERC721a } from 'mocks/tokens/tokenInfo';
 import * as tokenInstanceMock from 'mocks/tokens/tokenInstance';
 import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
-import { test, expect } from 'playwright/lib';
+import { test, expect, devices } from 'playwright/lib';
 import * as pwConfig from 'playwright/utils/config';
 import { MetadataUpdateProvider } from 'ui/tokenInstance/contexts/metadataUpdate';
 
@@ -42,7 +42,7 @@ test.beforeEach(async({ mockApiResponse, mockAssetResponse }) => {
   await mockAssetResponse(tokenInstanceMock.unique.image_url as string, './playwright/mocks/image_md.jpg');
 });
 
-test('base view +@dark-mode +@mobile', async({ render, page }) => {
+test('base view +@dark-mode', async({ render, page }) => {
   const component = await render(
     <MetadataUpdateProvider>
       <TokenInstanceDetails data={{ ...tokenInstanceMock.unique, image_url: null }} token={ tokenInfoERC721a }/>
@@ -61,7 +61,7 @@ test.describe('action button', () => {
     await mockAssetResponse(protocolTagWithMeta?.meta?.appLogoURL as string, './playwright/mocks/image_s.jpg');
   });
 
-  test('base view +@dark-mode +@mobile', async({ render, page }) => {
+  test('base view +@dark-mode', async({ render, page }) => {
     const component = await render(
       <MetadataUpdateProvider>
         <TokenInstanceDetails data={ tokenInstanceMock.unique } token={ tokenInfoERC721a }/>
@@ -73,7 +73,7 @@ test.describe('action button', () => {
     });
   });
 
-  test('without marketplaces +@dark-mode +@mobile', async({ render, page, mockEnvs }) => {
+  test('without marketplaces +@dark-mode', async({ render, page, mockEnvs }) => {
     mockEnvs(ENVS_MAP.noNftMarketplaces);
     const component = await render(
       <MetadataUpdateProvider>
@@ -86,3 +86,19 @@ test.describe('action button', () => {
     });
   });
 });
+
+test.describe('mobile', () => {
+  test.use({ viewport: devices['iPhone 13 Pro'].viewport });
+
+  test('base view', async({ render, page }) => {
+    const component = await render(
+      <MetadataUpdateProvider>
+        <TokenInstanceDetails data={{ ...tokenInstanceMock.unique, image_url: null }} token={ tokenInfoERC721a }/>
+      </MetadataUpdateProvider>,
+    );
+    await expect(component).toHaveScreenshot({
+      mask: [ page.locator(pwConfig.adsBannerSelector) ],
+      maskColor: pwConfig.maskColor,
+    });
+  });
+});