Merge pull request #920 from blockscout/devops/cache-node-modules

devops: cache of node_modules in "Checks" workflow

.github/workflows/checks.yml

@@ -42,10 +42,17 @@ jobs:
           node-version: 18
           cache: 'yarn'
 
-      - name: Install dependencies
-        uses: bahmutov/npm-install@v1
+      - name: Cache node_modules
+        uses: actions/cache@v3
+        id: cache-node-modules
         with:
-          useRollingCache: true
+          path: |
+            node_modules
+          key: node_modules-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
+  
+      - name: Install dependencies
+        if: steps.cache-node-modules.outputs.cache-hit != 'true'
+        run: yarn --frozen-lockfile
 
       - name: Run ESLint
         run: yarn lint:eslint
@@ -54,7 +61,7 @@ jobs:
         run: yarn lint:tsc
 
   jest_tests:
-    name: Run unit tests with Jest
+    name: Jest tests
     needs: [ code_quality ]
     runs-on: ubuntu-latest
     steps:
@@ -67,21 +74,33 @@ jobs:
           node-version: 18
           cache: 'yarn'
 
-      - name: Install dependencies
-        uses: bahmutov/npm-install@v1
+      - name: Cache node_modules
+        uses: actions/cache@v3
+        id: cache-node-modules
         with:
-          useRollingCache: true
+          path: |
+            node_modules
+          key: node_modules-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
+    
+      - name: Install dependencies
+        if: steps.cache-node-modules.outputs.cache-hit != 'true'
+        run: yarn --frozen-lockfile
 
       - name: Run Jest
         run: yarn test:jest
 
   pw_tests:
-    name: Run components visual tests with PlayWright
+    name: 'Playwright tests - project: ${{ matrix.project }}'
     needs: [ code_quality ]
     runs-on: ubuntu-latest
     container:
       image: mcr.microsoft.com/playwright:v1.32.0-focal
 
+    strategy:
+      fail-fast: false
+      matrix:
+        project: [ default, mobile, dark-color-mode ]
+
     steps:
       - name: Install git-lfs
         run: apt-get update && apt-get install git-lfs
@@ -97,18 +116,28 @@ jobs:
           node-version: 18
           cache: 'yarn'
 
-      - name: Install dependencies
-        uses: bahmutov/npm-install@v1
+      - name: Cache node_modules
+        uses: actions/cache@v3
+        id: cache-node-modules
         with:
-          useRollingCache: true
+          path: |
+            node_modules
+          key: node_modules-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
+    
+      - name: Install dependencies
+        if: steps.cache-node-modules.outputs.cache-hit != 'true'
+        run: yarn --frozen-lockfile
 
       - name: Run PlayWright
-        run: HOME=/root yarn test:pw
+        run: yarn test:pw:ci
+        env:
+          HOME: /root
+          PW_PROJECT: ${{ matrix.project }}
 
       - name: Upload test results
         if: always()
         uses: actions/upload-artifact@v2
         with:
-          name: playwright-report
+          name: playwright-report-${{ matrix.project }}
           path: playwright-report
           retention-days: 10
\ No newline at end of file

.github/workflows/publish-docker-image-and-deploy.yml

@@ -5,6 +5,10 @@ on:
     branches:
       - main
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
 jobs:
   push_to_registry:
     name: Push Docker image to registry

package.json

@@ -28,6 +28,7 @@
     "test:pw": "./playwright/make-envs-script.sh && NODE_OPTIONS=\"--max-old-space-size=4096\" playwright test -c playwright-ct.config.ts",
     "test:pw:local": "export NODE_PATH=$(pwd)/node_modules && rm -rf ./playwright/.cache && yarn test:pw",
     "test:pw:docker": "docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.32.0-focal ./playwright/run-tests.sh",
+    "test:pw:ci": "yarn test:pw --project=$PW_PROJECT",
     "test:jest": "jest",
     "test:jest:watch": "jest --watch"
   },

playwright-ct.config.ts

@@ -63,7 +63,9 @@ const config: PlaywrightTestConfig = defineConfig({
     },
   },
 
-  /* Configure projects for major browsers */
+  // configured projects
+  // these projects are also used for sharding tests in CI
+  // when adding or deleting a project, make sure to update github workflow accordingly
   projects: [
     {
       name: 'default',
@@ -81,15 +83,7 @@ const config: PlaywrightTestConfig = defineConfig({
       },
     },
     {
-      name: 'desktop xl',
-      grep: /\+@desktop-xl/,
-      use: {
-        ...devices['Desktop Chrome'],
-        viewport: { width: 1600, height: 1000 },
-      },
-    },
-    {
-      name: 'dark color mode',
+      name: 'dark-color-mode',
       grep: /\+@dark-mode/,
       use: {
         ...devices['Desktop Chrome'],
@@ -97,23 +91,6 @@ const config: PlaywrightTestConfig = defineConfig({
         colorScheme: 'dark',
       },
     },
-    {
-      name: 'dark color mode mobile',
-      grep: /\+@dark-mode-mobile/,
-      use: {
-        ...devices['iPhone 13 Pro'],
-        colorScheme: 'dark',
-      },
-    },
-    {
-      name: 'dark color mode desktop xl',
-      grep: /\+@dark-mode-xl/,
-      use: {
-        ...devices['Desktop Chrome'],
-        viewport: { width: 1600, height: 1000 },
-        colorScheme: 'dark',
-      },
-    },
   ],
 });
 

playwright/utils/configs.ts

+import { devices } from '@playwright/test';
+
+export const viewport = {
+  mobile: devices['iPhone 13 Pro'].viewport,
+  xl: { width: 1600, height: 1000 },
+};

ui/address/AddressTxs.pw.tsx

 import { Box } from '@chakra-ui/react';
 import { test as base, expect } from '@playwright/experimental-ct-react';
+import type { Locator } from '@playwright/test';
 import React from 'react';
 
 import * as txMock from 'mocks/txs/tx';
 import * as socketServer from 'playwright/fixtures/socketServer';
 import TestApp from 'playwright/TestApp';
 import buildApiUrl from 'playwright/utils/buildApiUrl';
+import * as configs from 'playwright/utils/configs';
 
 import AddressTxs from './AddressTxs';
 
@@ -19,32 +21,45 @@ const hooksConfig = {
   },
 };
 
-const test = base.extend<socketServer.SocketServerFixture>({
-  createSocket: socketServer.createSocket,
-});
+base.describe('base view', () => {
+  let component: Locator;
+
+  base.beforeEach(async({ page, mount }) => {
+    await page.route(API_URL, (route) => route.fulfill({
+      status: 200,
+      body: JSON.stringify({ items: [ txMock.base, txMock.base ], next_page_params: { block: 1 } }),
+    }));
+
+    component = await mount(
+      <TestApp>
+        <Box h={{ base: '134px', lg: 6 }}/>
+        <AddressTxs/>
+      </TestApp>,
+      { hooksConfig },
+    );
+  });
+
+  base('+@mobile', async() => {
+    await expect(component).toHaveScreenshot();
+  });
 
-// FIXME
-// test cases which use socket cannot run in parallel since the socket server always run on the same port
-test.describe.configure({ mode: 'serial' });
-
-test('address txs +@mobile +@desktop-xl', async({ mount, page }) => {
-  await page.route(API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify({ items: [ txMock.base, txMock.base ], next_page_params: { block: 1 } }),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <Box h={{ base: '134px', lg: 6 }}/>
-      <AddressTxs/>
-    </TestApp>,
-    { hooksConfig },
-  );
-
-  await expect(component).toHaveScreenshot();
+  base.describe('screen xl', () => {
+    base.use({ viewport: configs.viewport.xl });
+
+    base('', async() => {
+      await expect(component).toHaveScreenshot();
+    });
+  });
 });
 
-test.describe('socket', () => {
+base.describe('socket', () => {
+  const test = base.extend<socketServer.SocketServerFixture>({
+    createSocket: socketServer.createSocket,
+  });
+  // FIXME
+  // test cases which use socket cannot run in parallel since the socket server always run on the same port
+  test.describe.configure({ mode: 'serial' });
+
   test('without overload', async({ mount, page, createSocket }) => {
     await page.route(API_URL, (route) => route.fulfill({
       status: 200,

ui/home/Stats.pw.tsx

 import { test, expect } from '@playwright/experimental-ct-react';
+import type { Locator } from '@playwright/test';
 import React from 'react';
 
 import * as statsMock from 'mocks/stats/index';
 import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
 import TestApp from 'playwright/TestApp';
 import buildApiUrl from 'playwright/utils/buildApiUrl';
+import * as configs from 'playwright/utils/configs';
 
 import Stats from './Stats';
 
 const API_URL = buildApiUrl('homepage_stats');
 
-test('all items +@mobile +@dark-mode +@desktop-xl', async({ mount, page }) => {
-  await page.route(API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(statsMock.base),
-  }));
+test.describe('all items', () => {
+  let component: Locator;
 
-  const component = await mount(
-    <TestApp>
-      <Stats/>
-    </TestApp>,
-  );
+  test.beforeEach(async({ page, mount }) => {
+    await page.route(API_URL, (route) => route.fulfill({
+      status: 200,
+      body: JSON.stringify(statsMock.base),
+    }));
 
-  await expect(component).toHaveScreenshot();
+    component = await mount(
+      <TestApp>
+        <Stats/>
+      </TestApp>,
+    );
+  });
+
+  test('+@mobile +@dark-mode', async() => {
+    await expect(component).toHaveScreenshot();
+  });
+
+  test.describe('screen xl', () => {
+    test.use({ viewport: configs.viewport.xl });
+
+    test('', async() => {
+      await expect(component).toHaveScreenshot();
+    });
+  });
 });
 
 test.describe('4 items', () => {

ui/home/indicators/ChainIndicators.pw.tsx

 import { test, expect } from '@playwright/experimental-ct-react';
+import type { Locator } from '@playwright/test';
 import React from 'react';
 
 import * as dailyTxsMock from 'mocks/stats/daily_txs';
@@ -11,22 +12,36 @@ import ChainIndicators from './ChainIndicators';
 const STATS_API_URL = buildApiUrl('homepage_stats');
 const TX_CHART_API_URL = buildApiUrl('homepage_chart_txs');
 
-test('daily txs chart +@mobile +@dark-mode +@dark-mode-mobile', async({ mount, page }) => {
-  await page.route(STATS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(statsMock.base),
-  }));
-  await page.route(TX_CHART_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(dailyTxsMock.base),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <ChainIndicators/>
-    </TestApp>,
-  );
-  await page.hover('.ChartOverlay', { position: { x: 100, y: 100 } });
-
-  await expect(component).toHaveScreenshot();
+test.describe('daily txs chart', () => {
+  let component: Locator;
+
+  test.beforeEach(async({ page, mount }) => {
+    await page.route(STATS_API_URL, (route) => route.fulfill({
+      status: 200,
+      body: JSON.stringify(statsMock.base),
+    }));
+    await page.route(TX_CHART_API_URL, (route) => route.fulfill({
+      status: 200,
+      body: JSON.stringify(dailyTxsMock.base),
+    }));
+
+    component = await mount(
+      <TestApp>
+        <ChainIndicators/>
+      </TestApp>,
+    );
+    await page.hover('.ChartOverlay', { position: { x: 100, y: 100 } });
+  });
+
+  test('+@mobile', async() => {
+    await expect(component).toHaveScreenshot();
+  });
+
+  test.describe('dark mode', () => {
+    test.use({ colorScheme: 'dark' });
+
+    test('+@mobile', async() => {
+      await expect(component).toHaveScreenshot();
+    });
+  });
 });

ui/pages/Home.pw.tsx

 import { test, expect, devices } from '@playwright/experimental-ct-react';
+import type { Locator } from '@playwright/test';
 import React from 'react';
 
 import * as blockMock from 'mocks/blocks/block';
@@ -8,44 +9,59 @@ import * as txMock from 'mocks/txs/tx';
 import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
 import TestApp from 'playwright/TestApp';
 import buildApiUrl from 'playwright/utils/buildApiUrl';
+import * as configs from 'playwright/utils/configs';
 import insertAdPlaceholder from 'playwright/utils/insertAdPlaceholder';
 
 import Home from './Home';
 
-test('default view -@default +@desktop-xl +@dark-mode', async({ mount, page }) => {
-  await page.route(buildApiUrl('homepage_stats'), (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(statsMock.base),
-  }));
-  await page.route(buildApiUrl('homepage_blocks'), (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify([
-      blockMock.base,
-      blockMock.base2,
-    ]),
-  }));
-  await page.route(buildApiUrl('homepage_txs'), (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify([
-      txMock.base,
-      txMock.withContractCreation,
-      txMock.withTokenTransfer,
-    ]),
-  }));
-  await page.route(buildApiUrl('homepage_chart_txs'), (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(dailyTxsMock.base),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <Home/>
-    </TestApp>,
-  );
-
-  await insertAdPlaceholder(page);
-
-  await expect(component.locator('main')).toHaveScreenshot();
+test.describe('default view', () => {
+  let component: Locator;
+
+  test.beforeEach(async({ page, mount }) => {
+    await page.route(buildApiUrl('homepage_stats'), (route) => route.fulfill({
+      status: 200,
+      body: JSON.stringify(statsMock.base),
+    }));
+    await page.route(buildApiUrl('homepage_blocks'), (route) => route.fulfill({
+      status: 200,
+      body: JSON.stringify([
+        blockMock.base,
+        blockMock.base2,
+      ]),
+    }));
+    await page.route(buildApiUrl('homepage_txs'), (route) => route.fulfill({
+      status: 200,
+      body: JSON.stringify([
+        txMock.base,
+        txMock.withContractCreation,
+        txMock.withTokenTransfer,
+      ]),
+    }));
+    await page.route(buildApiUrl('homepage_chart_txs'), (route) => route.fulfill({
+      status: 200,
+      body: JSON.stringify(dailyTxsMock.base),
+    }));
+
+    component = await mount(
+      <TestApp>
+        <Home/>
+      </TestApp>,
+    );
+
+    await insertAdPlaceholder(page);
+  });
+
+  test('-@default +@dark-mode', async() => {
+    await expect(component.locator('main')).toHaveScreenshot();
+  });
+
+  test.describe('screen xl', () => {
+    test.use({ viewport: configs.viewport.xl });
+
+    test('', async() => {
+      await expect(component.locator('main')).toHaveScreenshot();
+    });
+  });
 });
 
 test.describe('custom hero plate background', () => {

ui/snippets/footer/Footer.pw.tsx

@@ -5,6 +5,7 @@ import type { WindowProvider } from 'wagmi';
 import { FOOTER_LINKS } from 'mocks/config/footerLinks';
 import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
 import TestApp from 'playwright/TestApp';
+import * as configs from 'playwright/utils/configs';
 
 import Footer from './Footer';
 
@@ -18,7 +19,7 @@ base.describe('with custom links, 4 cols', () => {
     ]) as any,
   });
 
-  test('base view +@dark-mode +@mobile +@desktop-xl', async({ mount, page }) => {
+  test.beforeEach(async({ page, mount }) => {
     await page.route(FOOTER_LINKS_URL, (route) => {
       return route.fulfill({
         body: JSON.stringify(FOOTER_LINKS),
@@ -30,9 +31,19 @@ base.describe('with custom links, 4 cols', () => {
         <Footer/>
       </TestApp>,
     );
+  });
 
+  test('+@mobile +@dark-mode', async({ page }) => {
     await expect(page).toHaveScreenshot();
   });
+
+  test.describe('screen xl', () => {
+    test.use({ viewport: configs.viewport.xl });
+
+    test('', async({ page }) => {
+      await expect(page).toHaveScreenshot();
+    });
+  });
 });
 
 base.describe('with custom links, 2 cols', () => {

ui/snippets/header/Header.pw.tsx

@@ -5,7 +5,7 @@ import TestApp from 'playwright/TestApp';
 
 import Header from './Header';
 
-test('no auth +@mobile +@dark-mode +@dark-mode-mobile', async({ mount, page }) => {
+test('no auth +@mobile', async({ mount, page }) => {
   await mount(
     <TestApp>
       <Header/>
@@ -14,3 +14,17 @@ test('no auth +@mobile +@dark-mode +@dark-mode-mobile', async({ mount, page }) =
 
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1500, height: 150 } });
 });
+
+test.describe('dark mode', () => {
+  test.use({ colorScheme: 'dark' });
+
+  test('+@mobile', async({ mount, page }) => {
+    await mount(
+      <TestApp>
+        <Header/>
+      </TestApp>,
+    );
+
+    await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1500, height: 150 } });
+  });
+});

ui/snippets/navigation/NavigationDesktop.pw.tsx

 import { Box, Flex } from '@chakra-ui/react';
 import { test as base, expect } from '@playwright/experimental-ct-react';
+import type { Locator } from '@playwright/test';
 import React from 'react';
 
 import * as cookies from 'lib/cookies';
 import authFixture from 'playwright/fixtures/auth';
 import contextWithEnvs, { createContextWithEnvs } from 'playwright/fixtures/contextWithEnvs';
 import TestApp from 'playwright/TestApp';
+import * as configs from 'playwright/utils/configs';
 
 import NavigationDesktop from './NavigationDesktop';
 
@@ -26,18 +28,32 @@ const test = base.extend({
   ]) as any,
 });
 
-test('no auth +@desktop-xl +@dark-mode-xl', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <Flex w="100%" minH="100vh" alignItems="stretch">
-        <NavigationDesktop/>
-        <Box bgColor="lightpink" w="100%"/>
-      </Flex>
-    </TestApp>,
-    { hooksConfig },
-  );
-
-  await expect(component).toHaveScreenshot();
+test.describe('no auth', () => {
+  let component: Locator;
+
+  test.beforeEach(async({ mount }) => {
+    component = await mount(
+      <TestApp>
+        <Flex w="100%" minH="100vh" alignItems="stretch">
+          <NavigationDesktop/>
+          <Box bgColor="lightpink" w="100%"/>
+        </Flex>
+      </TestApp>,
+      { hooksConfig },
+    );
+  });
+
+  test('+@dark-mode', async() => {
+    await expect(component).toHaveScreenshot();
+  });
+
+  test.describe('xl screen', () => {
+    test.use({ viewport: configs.viewport.xl });
+
+    test('+@dark-mode', async() => {
+      await expect(component).toHaveScreenshot();
+    });
+  });
 });
 
 base.describe('auth', () => {
@@ -51,8 +67,10 @@ base.describe('auth', () => {
     },
   });
 
-  test('+@desktop-xl +@dark-mode-xl', async({ mount }) => {
-    const component = await mount(
+  let component: Locator;
+
+  test.beforeEach(async({ mount }) => {
+    component = await mount(
       <TestApp>
         <Flex w="100%" minH="100vh" alignItems="stretch">
           <NavigationDesktop/>
@@ -61,41 +79,69 @@ base.describe('auth', () => {
       </TestApp>,
       { hooksConfig },
     );
+  });
 
+  test('+@dark-mode', async() => {
     await expect(component).toHaveScreenshot();
   });
+
+  test.describe('xl screen', () => {
+    test.use({ viewport: configs.viewport.xl });
+
+    test('+@dark-mode', async() => {
+      await expect(component).toHaveScreenshot();
+    });
+  });
 });
 
-test('with tooltips +@desktop-xl -@default', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <Flex w="100%" minH="100vh" alignItems="stretch">
-        <NavigationDesktop/>
-        <Box bgColor="lightpink" w="100%"/>
-      </Flex>
-    </TestApp>,
-    { hooksConfig },
-  );
-
-  await page.locator('svg[aria-label="Expand/Collapse menu"]').click();
-  await page.locator('a[aria-label="Tokens link"]').hover();
-
-  await expect(component).toHaveScreenshot();
+test.describe('with tooltips', () => {
+  test.use({ viewport: configs.viewport.xl });
+
+  test('', async({ mount, page }) => {
+    const component = await mount(
+      <TestApp>
+        <Flex w="100%" minH="100vh" alignItems="stretch">
+          <NavigationDesktop/>
+          <Box bgColor="lightpink" w="100%"/>
+        </Flex>
+      </TestApp>,
+      { hooksConfig },
+    );
+
+    await page.locator('svg[aria-label="Expand/Collapse menu"]').click();
+    await page.locator('a[aria-label="Tokens link"]').hover();
+
+    await expect(component).toHaveScreenshot();
+  });
 });
 
-test('with submenu +@desktop-xl +@dark-mode', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <Flex w="100%" minH="100vh" alignItems="stretch">
-        <NavigationDesktop/>
-        <Box bgColor="lightpink" w="100%"/>
-      </Flex>
-    </TestApp>,
-    { hooksConfig },
-  );
-  await page.locator('a[aria-label="Blockchain link group"]').hover();
-
-  await expect(component).toHaveScreenshot();
+test.describe('with submenu', () => {
+  let component: Locator;
+
+  test.beforeEach(async({ mount, page }) => {
+    component = await mount(
+      <TestApp>
+        <Flex w="100%" minH="100vh" alignItems="stretch">
+          <NavigationDesktop/>
+          <Box bgColor="lightpink" w="100%"/>
+        </Flex>
+      </TestApp>,
+      { hooksConfig },
+    );
+    await page.locator('a[aria-label="Blockchain link group"]').hover();
+  });
+
+  test('', async() => {
+    await expect(component).toHaveScreenshot();
+  });
+
+  test.describe('xl screen', () => {
+    test.use({ viewport: configs.viewport.xl });
+
+    test('', async() => {
+      await expect(component).toHaveScreenshot();
+    });
+  });
 });
 
 base.describe('cookie set to false', () => {
@@ -109,8 +155,10 @@ base.describe('cookie set to false', () => {
     },
   });
 
-  test('navbar is opened +@desktop-xl', async({ mount }) => {
-    const component = await mount(
+  let component: Locator;
+
+  test.beforeEach(async({ mount }) => {
+    component = await mount(
       <TestApp>
         <Flex w="100%" minH="100vh" alignItems="stretch">
           <NavigationDesktop/>
@@ -119,9 +167,20 @@ base.describe('cookie set to false', () => {
       </TestApp>,
       { hooksConfig },
     );
+  });
 
+  test('', async() => {
     const networkMenu = component.locator('button[aria-label="Network menu"]');
-    expect(await networkMenu.isVisible()).toBe(true);
+    await expect(networkMenu).toBeVisible();
+  });
+
+  test.describe('xl screen', () => {
+    test.use({ viewport: configs.viewport.xl });
+
+    test('', async() => {
+      const networkMenu = component.locator('button[aria-label="Network menu"]');
+      await expect(networkMenu).toBeVisible();
+    });
   });
 });
 

ui/snippets/networkMenu/NetworkLogo.pw.tsx

-import { test, expect } from '@playwright/experimental-ct-react';
+import { test as base, expect } from '@playwright/experimental-ct-react';
+import type { Locator } from '@playwright/test';
 import React from 'react';
 
 import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
 import TestApp from 'playwright/TestApp';
+import * as configs from 'playwright/utils/configs';
 
 import NetworkLogo from './NetworkLogo';
 
-test.describe('placeholder logo', () => {
-  const extendedTest = test.extend({
+base.describe('placeholder logo', () => {
+  const test = base.extend({
     context: contextWithEnvs([
       { name: 'NEXT_PUBLIC_NETWORK_LOGO', value: '' },
       { name: 'NEXT_PUBLIC_NETWORK_ICON', value: '' },
@@ -15,7 +17,7 @@ test.describe('placeholder logo', () => {
     ]) as any,
   });
 
-  extendedTest('+@desktop-xl +@dark-mode +@dark-mode-xl', async({ mount }) => {
+  test('+@dark-mode', async({ mount }) => {
     const component = await mount(
       <TestApp>
         <NetworkLogo/>
@@ -24,12 +26,26 @@ test.describe('placeholder logo', () => {
 
     await expect(component.locator('a')).toHaveScreenshot();
   });
+
+  test.describe('screen xl', () => {
+    test.use({ viewport: configs.viewport.xl });
+
+    test('+@dark-mode', async({ mount }) => {
+      const component = await mount(
+        <TestApp>
+          <NetworkLogo/>
+        </TestApp>,
+      );
+
+      await expect(component.locator('a')).toHaveScreenshot();
+    });
+  });
 });
 
-test.describe('custom logo', () => {
+base.describe('custom logo', () => {
   const LOGO_URL = 'https://localhost:3000/my-logo.png';
   const ICON_URL = 'https://localhost:3000/my-icon.png';
-  const extendedTest = test.extend({
+  const test = base.extend({
     context: contextWithEnvs([
       { name: 'NEXT_PUBLIC_NETWORK_LOGO', value: LOGO_URL },
       { name: 'NEXT_PUBLIC_NETWORK_ICON', value: ICON_URL },
@@ -37,7 +53,9 @@ test.describe('custom logo', () => {
     ]) as any,
   });
 
-  extendedTest('+@desktop-xl +@dark-mode +@dark-mode-xl', async({ mount, page }) => {
+  let component: Locator;
+
+  test.beforeEach(async({ page, mount }) => {
     await page.route(LOGO_URL, (route) => {
       return route.fulfill({
         status: 200,
@@ -51,20 +69,30 @@ test.describe('custom logo', () => {
       });
     });
 
-    const component = await mount(
+    component = await mount(
       <TestApp>
         <NetworkLogo/>
       </TestApp>,
     );
+  });
 
+  test('+@dark-mode', async() => {
     await expect(component.locator('a')).toHaveScreenshot();
   });
+
+  test.describe('screen xl', () => {
+    test.use({ viewport: configs.viewport.xl });
+
+    test('+@dark-mode', async() => {
+      await expect(component.locator('a')).toHaveScreenshot();
+    });
+  });
 });
 
-test.describe('custom logo with dark option', () => {
+base.describe('custom logo with dark option -@default +@dark-mode', () => {
   const LOGO_URL = 'https://localhost:3000/my-logo.png';
   const ICON_URL = 'https://localhost:3000/my-icon.png';
-  const extendedTest = test.extend({
+  const test = base.extend({
     context: contextWithEnvs([
       { name: 'NEXT_PUBLIC_NETWORK_LOGO', value: LOGO_URL },
       { name: 'NEXT_PUBLIC_NETWORK_LOGO_DARK', value: LOGO_URL },
@@ -74,7 +102,9 @@ test.describe('custom logo with dark option', () => {
     ]) as any,
   });
 
-  extendedTest('-@default +@dark-mode +@dark-mode-xl', async({ mount, page }) => {
+  let component: Locator;
+
+  test.beforeEach(async({ page, mount }) => {
     await page.route(LOGO_URL, (route) => {
       return route.fulfill({
         status: 200,
@@ -88,12 +118,22 @@ test.describe('custom logo with dark option', () => {
       });
     });
 
-    const component = await mount(
+    component = await mount(
       <TestApp>
         <NetworkLogo/>
       </TestApp>,
     );
+  });
 
+  test('', async() => {
     await expect(component.locator('a')).toHaveScreenshot();
   });
+
+  test.describe('screen xl', () => {
+    test.use({ viewport: configs.viewport.xl });
+
+    test('', async() => {
+      await expect(component.locator('a')).toHaveScreenshot();
+    });
+  });
 });

ui/txs/TxsTable.pw.tsx

@@ -3,16 +3,35 @@ import React from 'react';
 
 import * as txMock from 'mocks/txs/tx';
 import TestApp from 'playwright/TestApp';
+import * as configs from 'playwright/utils/configs';
 
 import TxsTable from './TxsTable';
 
-test('base view +@dark-mode +@desktop-xl', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      { /* eslint-disable-next-line react/jsx-no-bind */ }
-      <TxsTable txs={ [ txMock.base, txMock.base ] } sort={ () => () => {} } top={ 0 } showBlockInfo showSocketInfo={ false }/>
-    </TestApp>,
-  );
+test.describe('base view', () => {
 
-  await expect(component).toHaveScreenshot();
+  test('+@dark-mode', async({ mount }) => {
+    const component = await mount(
+      <TestApp>
+        { /* eslint-disable-next-line react/jsx-no-bind */ }
+        <TxsTable txs={ [ txMock.base, txMock.base ] } sort={ () => () => {} } top={ 0 } showBlockInfo showSocketInfo={ false }/>
+      </TestApp>,
+    );
+
+    await expect(component).toHaveScreenshot();
+  });
+
+  test.describe('screen xl', () => {
+    test.use({ viewport: configs.viewport.xl });
+
+    test('', async({ mount }) => {
+      const component = await mount(
+        <TestApp>
+          { /* eslint-disable-next-line react/jsx-no-bind */ }
+          <TxsTable txs={ [ txMock.base, txMock.base ] } sort={ () => () => {} } top={ 0 } showBlockInfo showSocketInfo={ false }/>
+        </TestApp>,
+      );
+
+      await expect(component).toHaveScreenshot();
+    });
+  });
 });