Playwright tests refactoring, pt.4 (#1892)

* remove feature config from the pw tests

* update screenshots

mocks/l2withdrawals/withdrawals.ts

-export const data = {
+import type { OptimisticL2WithdrawalsResponse } from 'types/api/optimisticL2';
+
+export const data: OptimisticL2WithdrawalsResponse = {
   items: [
     {
       challenge_period_end: null,
@@ -11,12 +13,12 @@ export const data = {
         private_tags: [],
         public_tags: [],
         watchlist_names: [],
+        ens_domain_name: null,
       },
       l1_tx_hash: '0x1a235bee32ac10cb7efdad98415737484ca66386e491cde9e17d42b136dca684',
       l2_timestamp: '2022-02-15T12:50:02.000000Z',
       l2_tx_hash: '0x918cd8c5c24c17e06cd02b0379510c4ad56324bf153578fb9caaaa2fe4e7dc35',
       msg_nonce: 396,
-      msg_nonce_raw: '1766847064778384329583297500742918515827483896875618958121606201292620172',
       msg_nonce_version: 1,
       status: 'Ready to prove',
     },
@@ -27,7 +29,6 @@ export const data = {
       l2_timestamp: null,
       l2_tx_hash: '0x2f117bee32ac10cb7efdad98415737484ca66386e491cde9e17d42b136def593',
       msg_nonce: 391,
-      msg_nonce_raw: '1766847064778384329583297500742918515827483896875618958121606201292620167',
       msg_nonce_version: 1,
       status: 'Ready to prove',
     },
@@ -38,7 +39,6 @@ export const data = {
       l2_timestamp: null,
       l2_tx_hash: '0xe14b1f46838176702244a5343629bcecf728ca2d9881d47b4ce46e00c387d7e3',
       msg_nonce: 390,
-      msg_nonce_raw: '1766847064778384329583297500742918515827483896875618958121606201292620166',
       msg_nonce_version: 1,
       status: 'Ready for relay',
     },

mocks/withdrawals/withdrawals.ts

-export const data = {
+import type { AddressParam } from 'types/api/addressParams';
+import type { WithdrawalsResponse } from 'types/api/withdrawals';
+
+export const data: WithdrawalsResponse = {
   items: [
     {
       amount: '192175000000000',
@@ -10,7 +13,7 @@ export const data = {
         is_contract: false,
         is_verified: null,
         name: null,
-      },
+      } as AddressParam,
       timestamp: '2022-06-07T18:12:24.000000Z',
       validator_index: 49622,
     },
@@ -24,7 +27,7 @@ export const data = {
         is_contract: false,
         is_verified: null,
         name: null,
-      },
+      } as AddressParam,
       timestamp: '2022-05-07T18:12:24.000000Z',
       validator_index: 49621,
     },
@@ -38,7 +41,7 @@ export const data = {
         is_contract: false,
         is_verified: null,
         name: null,
-      },
+      } as AddressParam,
       timestamp: '2022-04-07T18:12:24.000000Z',
       validator_index: 49620,
     },

playwright/fixtures/mockEnvs.ts

@@ -16,6 +16,11 @@ const fixture: TestFixture<MockEnvsFixture, { page: Page }> = async({ page }, us
 export default fixture;
 
 export const ENVS_MAP: Record<string, Array<[string, string]>> = {
+  optimisticRollup: [
+    [ 'NEXT_PUBLIC_ROLLUP_TYPE', 'optimistic' ],
+    [ 'NEXT_PUBLIC_ROLLUP_L1_BASE_URL', 'https://localhost:3101' ],
+    [ 'NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL', 'https://localhost:3102' ],
+  ],
   shibariumRollup: [
     [ 'NEXT_PUBLIC_ROLLUP_TYPE', 'shibarium' ],
     [ 'NEXT_PUBLIC_ROLLUP_L1_BASE_URL', 'https://localhost:3101' ],
@@ -24,6 +29,10 @@ export const ENVS_MAP: Record<string, Array<[string, string]>> = {
     [ 'NEXT_PUBLIC_ROLLUP_TYPE', 'zkEvm' ],
     [ 'NEXT_PUBLIC_ROLLUP_L1_BASE_URL', 'https://localhost:3101' ],
   ],
+  zkSyncRollup: [
+    [ 'NEXT_PUBLIC_ROLLUP_TYPE', 'zkSync' ],
+    [ 'NEXT_PUBLIC_ROLLUP_L1_BASE_URL', 'https://localhost:3101' ],
+  ],
   bridgedTokens: [
     [ 'NEXT_PUBLIC_BRIDGED_TOKENS_CHAINS', '[{"id":"1","title":"Ethereum","short_title":"ETH","base_url":"https://eth.blockscout.com/token/"},{"id":"56","title":"Binance Smart Chain","short_title":"BSC","base_url":"https://bscscan.com/token/"},{"id":"99","title":"POA","short_title":"POA","base_url":"https://blockscout.com/poa/core/token/"}]' ],
     [ 'NEXT_PUBLIC_BRIDGED_TOKENS_BRIDGES', '[{"type":"omni","title":"OmniBridge","short_title":"OMNI"},{"type":"amb","title":"Arbitrary Message Bridge","short_title":"AMB"}]' ],
@@ -37,6 +46,16 @@ export const ENVS_MAP: Record<string, Array<[string, string]>> = {
   blockHiddenFields: [
     [ 'NEXT_PUBLIC_VIEWS_BLOCK_HIDDEN_FIELDS', '["burnt_fees", "total_reward", "nonce"]' ],
   ],
+  stabilityEnvs: [
+    [ 'NEXT_PUBLIC_VIEWS_ADDRESS_HIDDEN_VIEWS', '["top_accounts"]' ],
+    [ 'NEXT_PUBLIC_VIEWS_TX_HIDDEN_FIELDS', '["value","fee_currency","gas_price","gas_fees","burnt_fees"]' ],
+    [ 'NEXT_PUBLIC_VIEWS_TX_ADDITIONAL_FIELDS', '["fee_per_gas"]' ],
+  ],
+  beaconChain: [
+    [ 'NEXT_PUBLIC_HAS_BEACON_CHAIN', 'true' ],
+  ],
+  txInterpretation: [
+    [ 'NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER', 'blockscout' ],
   noWalletClient: [
     [ 'NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID', '' ],
   ],

playwright/utils/configs.ts

@@ -10,45 +10,3 @@ export const viewport = {
 export const maskColor = '#4299E1'; // blue.400
 
 export const adsBannerSelector = '.adsbyslise';
-
-export const featureEnvs = {
-  beaconChain: [
-    { name: 'NEXT_PUBLIC_HAS_BEACON_CHAIN', value: 'true' },
-  ],
-  optimisticRollup: [
-    { name: 'NEXT_PUBLIC_ROLLUP_TYPE', value: 'optimistic' },
-    { name: 'NEXT_PUBLIC_ROLLUP_L1_BASE_URL', value: 'https://localhost:3101' },
-    { name: 'NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL', value: 'https://localhost:3102' },
-  ],
-  txInterpretation: [
-    { name: 'NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER', value: 'blockscout' },
-  ],
-  zkEvmRollup: [
-    { name: 'NEXT_PUBLIC_ROLLUP_TYPE', value: 'zkEvm' },
-    { name: 'NEXT_PUBLIC_ROLLUP_L1_BASE_URL', value: 'https://localhost:3101' },
-  ],
-  zkSyncRollup: [
-    { name: 'NEXT_PUBLIC_ROLLUP_TYPE', value: 'zkSync' },
-    { name: 'NEXT_PUBLIC_ROLLUP_L1_BASE_URL', value: 'https://localhost:3101' },
-  ],
-  userOps: [
-    { name: 'NEXT_PUBLIC_HAS_USER_OPS', value: 'true' },
-  ],
-  validators: [
-    { name: 'NEXT_PUBLIC_VALIDATORS_CHAIN_TYPE', value: 'stability' },
-  ],
-};
-
-export const viewsEnvs = {
-  block: {
-    hiddenFields: [
-      { name: 'NEXT_PUBLIC_VIEWS_BLOCK_HIDDEN_FIELDS', value: '["burnt_fees", "total_reward", "nonce"]' },
-    ],
-  },
-};
-
-export const stabilityEnvs = [
-  { name: 'NEXT_PUBLIC_VIEWS_ADDRESS_HIDDEN_VIEWS', value: '["top_accounts"]' },
-  { name: 'NEXT_PUBLIC_VIEWS_TX_HIDDEN_FIELDS', value: '["value","fee_currency","gas_price","gas_fees","burnt_fees"]' },
-  { name: 'NEXT_PUBLIC_VIEWS_TX_ADDITIONAL_FIELDS', value: '["fee_per_gas"]' },
-];

ui/block/BlockDetails.pw.tsx

 import React from 'react';
 
 import * as blockMock from 'mocks/blocks/block';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
 import { test, expect } from 'playwright/lib';
-import TestApp from 'playwright/TestApp';
-import * as configs from 'playwright/utils/configs';
 
 import BlockDetails from './BlockDetails';
 import type { BlockQuery } from './useBlockQuery';
@@ -15,43 +13,33 @@ const hooksConfig = {
   },
 };
 
-test('regular block +@mobile +@dark-mode', async({ mount, page }) => {
+test('regular block +@mobile +@dark-mode', async({ render, page }) => {
   const query = {
     data: blockMock.base,
     isPending: false,
   } as BlockQuery;
 
-  const component = await mount(
-    <TestApp>
-      <BlockDetails query={ query }/>
-    </TestApp>,
-    { hooksConfig },
-  );
+  const component = await render(<BlockDetails query={ query }/>, { hooksConfig });
 
   await page.getByText('View details').click();
 
   await expect(component).toHaveScreenshot();
 });
 
-test('genesis block', async({ mount, page }) => {
+test('genesis block', async({ render, page }) => {
   const query = {
     data: blockMock.genesis,
     isPending: false,
   } as BlockQuery;
 
-  const component = await mount(
-    <TestApp>
-      <BlockDetails query={ query }/>
-    </TestApp>,
-    { hooksConfig },
-  );
+  const component = await render(<BlockDetails query={ query }/>, { hooksConfig });
 
   await page.getByText('View details').click();
 
   await expect(component).toHaveScreenshot();
 });
 
-test('with blob txs', async({ mount, page, mockEnvs }) => {
+test('with blob txs', async({ render, page, mockEnvs }) => {
   await mockEnvs([
     [ 'NEXT_PUBLIC_DATA_AVAILABILITY_ENABLED', 'true' ],
   ]);
@@ -60,35 +48,21 @@ test('with blob txs', async({ mount, page, mockEnvs }) => {
     isPending: false,
   } as BlockQuery;
 
-  const component = await mount(
-    <TestApp>
-      <BlockDetails query={ query }/>
-    </TestApp>,
-    { hooksConfig },
-  );
+  const component = await render(<BlockDetails query={ query }/>, { hooksConfig });
 
   await page.getByText('View details').click();
 
   await expect(component).toHaveScreenshot();
 });
 
-const customFieldsTest = test.extend({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  context: contextWithEnvs(configs.viewsEnvs.block.hiddenFields) as any,
-});
-
-customFieldsTest('rootstock custom fields', async({ mount, page }) => {
+test('rootstock custom fields', async({ render, page, mockEnvs }) => {
+  await mockEnvs(ENVS_MAP.blockHiddenFields);
   const query = {
     data: blockMock.rootstock,
     isPending: false,
   } as BlockQuery;
 
-  const component = await mount(
-    <TestApp>
-      <BlockDetails query={ query }/>
-    </TestApp>,
-    { hooksConfig },
-  );
+  const component = await render(<BlockDetails query={ query }/>, { hooksConfig });
 
   await page.getByText('View details').click();
 

ui/home/LatestBlocks.pw.tsx

-import { test as base, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as blockMock from 'mocks/blocks/block';
 import * as statsMock from 'mocks/stats/index';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
 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 { test, expect } from 'playwright/lib';
 
 import LatestBlocks from './LatestBlocks';
 
-const STATS_API_URL = buildApiUrl('stats');
-const BLOCKS_API_URL = buildApiUrl('homepage_blocks');
-
-export const test = base.extend<socketServer.SocketServerFixture>({
-  createSocket: socketServer.createSocket,
-});
-
-test('default view +@mobile +@dark-mode', async({ mount, page }) => {
-  await page.route(STATS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(statsMock.base),
-  }));
-  await page.route(BLOCKS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify([
-      blockMock.base,
-      blockMock.base2,
-    ]),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <LatestBlocks/>
-    </TestApp>,
-  );
-
+test('default view +@mobile +@dark-mode', async({ render, mockApiResponse }) => {
+  await mockApiResponse('stats', statsMock.base);
+  await mockApiResponse('homepage_blocks', [ blockMock.base, blockMock.base2 ]);
+  const component = await render(<LatestBlocks/>);
   await expect(component).toHaveScreenshot();
 });
 
-const testL2 = test.extend({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  context: contextWithEnvs(configs.featureEnvs.optimisticRollup) as any,
-});
-
-testL2('L2 view', async({ mount, page }) => {
-  await page.route(STATS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(statsMock.base),
-  }));
-  await page.route(BLOCKS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify([
-      blockMock.base,
-      blockMock.base2,
-    ]),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <LatestBlocks/>
-    </TestApp>,
-  );
-
+test('L2 view', async({ render, mockEnvs, mockApiResponse }) => {
+  await mockEnvs(ENVS_MAP.optimisticRollup);
+  await mockApiResponse('stats', statsMock.base);
+  await mockApiResponse('homepage_blocks', [ blockMock.base, blockMock.base2 ]);
+  const component = await render(<LatestBlocks/>);
   await expect(component).toHaveScreenshot();
 });
 
-const testNoReward = test.extend({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  context: contextWithEnvs(configs.viewsEnvs.block.hiddenFields) as any,
-});
-
-testNoReward('no reward view', async({ mount, page }) => {
-  await page.route(STATS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(statsMock.base),
-  }));
-  await page.route(BLOCKS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify([
-      blockMock.base,
-      blockMock.base2,
-    ]),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <LatestBlocks/>
-    </TestApp>,
-  );
-
+test('no reward view', async({ render, mockEnvs, mockApiResponse }) => {
+  await mockEnvs(ENVS_MAP.blockHiddenFields);
+  await mockApiResponse('stats', statsMock.base);
+  await mockApiResponse('homepage_blocks', [ blockMock.base, blockMock.base2 ]);
+  const component = await render(<LatestBlocks/>);
   await expect(component).toHaveScreenshot();
 });
 
-test('with long block height', async({ mount, page }) => {
-  await page.route(STATS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(statsMock.base),
-  }));
-  await page.route(BLOCKS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify([
-      {
-        ...blockMock.base,
-        height: 123456789012345,
-      },
-    ]),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <LatestBlocks/>
-    </TestApp>,
-  );
-
+test('with long block height', async({ render, mockApiResponse }) => {
+  await mockApiResponse('stats', statsMock.base);
+  await mockApiResponse('homepage_blocks', [ { ...blockMock.base, height: 123456789012345 } ]);
+  const component = await render(<LatestBlocks/>);
   await expect(component).toHaveScreenshot();
 });
 
 test.describe('socket', () => {
   test.describe.configure({ mode: 'serial' });
-
-  test('new item', async({ mount, page, createSocket }) => {
-    await page.route(STATS_API_URL, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(statsMock.base),
-    }));
-    await page.route(BLOCKS_API_URL, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify([
-        blockMock.base,
-        blockMock.base2,
-      ]),
-    }));
-
-    const component = await mount(
-      <TestApp withSocket>
-        <LatestBlocks/>
-      </TestApp>,
-    );
-
+  test('new item', async({ render, mockApiResponse, createSocket }) => {
+    await mockApiResponse('stats', statsMock.base);
+    await mockApiResponse('homepage_blocks', [ blockMock.base, blockMock.base2 ]);
+    const component = await render(<LatestBlocks/>, undefined, { withSocket: true });
     const socket = await createSocket();
     const channel = await socketServer.joinChannel(socket, 'blocks:new_block');
     socketServer.sendMessage(socket, channel, 'new_block', {
@@ -150,7 +54,6 @@ test.describe('socket', () => {
         timestamp: '2022-11-11T11:59:58Z',
       },
     });
-
     await expect(component).toHaveScreenshot();
   });
 });

ui/home/LatestDeposits.pw.tsx

-import { test as base, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as depositMock from 'mocks/l2deposits/deposits';
-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 { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
 
 import LatestDeposits from './LatestDeposits';
 
-const test = base.extend({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  context: contextWithEnvs(configs.featureEnvs.optimisticRollup) as any,
-});
-
-test('default view +@mobile +@dark-mode', async({ mount, page }) => {
-  await page.route(buildApiUrl('homepage_deposits'), (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(depositMock.data.items),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <LatestDeposits/>
-    </TestApp>,
-  );
-
+test('default view +@mobile +@dark-mode', async({ render, mockApiResponse, mockEnvs }) => {
+  await mockEnvs(ENVS_MAP.optimisticRollup);
+  mockApiResponse('homepage_deposits', depositMock.data.items);
+  const component = await render(<LatestDeposits/>);
   await expect(component).toHaveScreenshot();
 });

ui/home/LatestZkEvmL2Batches.pw.tsx

-import { test as base, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import { txnBatchesData } from 'mocks/zkEvm/txnBatches';
-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 { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
 
 import LatestZkEvmL2Batches from './LatestZkEvmL2Batches';
 
-const BATCHES_API_URL = buildApiUrl('homepage_zkevm_l2_batches');
-
-const test = base.extend({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  context: contextWithEnvs(configs.featureEnvs.zkEvmRollup) as any,
-});
-
-test('default view +@mobile +@dark-mode', async({ mount, page }) => {
-  await page.route(BATCHES_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(txnBatchesData),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <LatestZkEvmL2Batches/>
-    </TestApp>,
-  );
+test('default view +@mobile +@dark-mode', async({ render, mockEnvs, mockApiResponse }) => {
+  await mockEnvs(ENVS_MAP.zkEvmRollup);
+  await mockApiResponse('homepage_zkevm_l2_batches', txnBatchesData);
 
+  const component = await render(<LatestZkEvmL2Batches/>);
   await expect(component).toHaveScreenshot();
 });

ui/pages/BeaconChainWithdrawals.pw.tsx

-import { test as base, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import { data as withdrawalsData } from 'mocks/withdrawals/withdrawals';
-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 { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
 
 import BeaconChainWithdrawals from './BeaconChainWithdrawals';
 
-const test = base.extend({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  context: contextWithEnvs(configs.featureEnvs.beaconChain) as any,
-});
-
-const WITHDRAWALS_API_URL = buildApiUrl('withdrawals');
-const WITHDRAWALS_COUNTERS_API_URL = buildApiUrl('withdrawals_counters');
-
-test('base view +@mobile', async({ mount, page }) => {
-  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-    status: 200,
-    body: '',
-  }));
-
-  await page.route(WITHDRAWALS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(withdrawalsData),
-  }));
-
-  await page.route(WITHDRAWALS_COUNTERS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify({ withdrawal_count: '111111', withdrawal_sum: '1010101010110101001101010' }),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <BeaconChainWithdrawals/>
-    </TestApp>,
-  );
-
+test('base view +@mobile', async({ render, mockEnvs, mockTextAd, mockApiResponse }) => {
+  await mockEnvs(ENVS_MAP.beaconChain);
+  await mockTextAd();
+  await mockApiResponse('withdrawals', withdrawalsData);
+  await mockApiResponse('withdrawals_counters', { withdrawal_count: '111111', withdrawal_sum: '1010101010110101001101010' });
+  const component = await render(<BeaconChainWithdrawals/>);
   await expect(component).toHaveScreenshot();
 });

ui/pages/Blocks.pw.tsx

-import type { BrowserContext } from '@playwright/test';
 import React from 'react';
 
 import * as blockMock from 'mocks/blocks/block';
 import * as statsMock from 'mocks/stats/index';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
 import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
 import * as socketServer from 'playwright/fixtures/socketServer';
 import { test, expect, devices } from 'playwright/lib';
-import * as configs from 'playwright/utils/configs';
 
 import Blocks from './Blocks';
 
@@ -57,11 +54,8 @@ test.describe('mobile', () => {
     await expect(component).toHaveScreenshot();
   });
 
-  const hiddenFieldsTest = test.extend<{ context: BrowserContext }>({
-    context: contextWithEnvs(configs.viewsEnvs.block.hiddenFields),
-  });
-
-  hiddenFieldsTest('hidden fields', async({ render, mockApiResponse }) => {
+  test('hidden fields', async({ render, mockApiResponse, mockEnvs }) => {
+    await mockEnvs(ENVS_MAP.blockHiddenFields);
     await mockApiResponse('blocks', blockMock.baseListResponse, { queryParams: { type: 'block' } });
     await mockApiResponse('stats', statsMock.base);
 

ui/pages/OptimisticL2Deposits.pw.tsx

-import { test as base, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import { data as depositsData } from 'mocks/l2deposits/deposits';
-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 { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
 
 import OptimisticL2Deposits from './OptimisticL2Deposits';
 
-const DEPOSITS_API_URL = buildApiUrl('optimistic_l2_deposits');
-const DEPOSITS_COUNT_API_URL = buildApiUrl('optimistic_l2_deposits_count');
-
-const test = base.extend({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  context: contextWithEnvs(configs.featureEnvs.optimisticRollup) as any,
-});
-
-test('base view +@mobile', async({ mount, page }) => {
+test('base view +@mobile', async({ render, mockEnvs, mockTextAd, mockApiResponse }) => {
   // test on mobile is flaky
   // my assumption is there is not enough time to calculate hashes truncation so component is unstable
   // so I raised the test timeout to check if it helps
   test.slow();
+  await mockEnvs(ENVS_MAP.optimisticRollup);
+  await mockTextAd();
+  await mockApiResponse('optimistic_l2_deposits', depositsData);
+  await mockApiResponse('optimistic_l2_deposits_count', 3971111);
 
-  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-    status: 200,
-    body: '',
-  }));
-
-  await page.route(DEPOSITS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(depositsData),
-  }));
-
-  await page.route(DEPOSITS_COUNT_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: '3971111',
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <OptimisticL2Deposits/>
-    </TestApp>,
-  );
+  const component = await render(<OptimisticL2Deposits/>);
 
   await expect(component).toHaveScreenshot({ timeout: 10_000 });
 });

ui/pages/OptimisticL2OutputRoots.pw.tsx

-import { test as base, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import { outputRootsData } from 'mocks/l2outputRoots/outputRoots';
-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 { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
 
 import OptimisticL2OutputRoots from './OptimisticL2OutputRoots';
 
-const test = base.extend({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  context: contextWithEnvs(configs.featureEnvs.optimisticRollup) as any,
-});
-
-const OUTPUT_ROOTS_API_URL = buildApiUrl('optimistic_l2_output_roots');
-const OUTPUT_ROOTS_COUNT_API_URL = buildApiUrl('optimistic_l2_output_roots_count');
-
-test('base view +@mobile', async({ mount, page }) => {
+test('base view +@mobile', async({ render, mockEnvs, mockTextAd, mockApiResponse }) => {
   // test on mobile is flaky
   // my assumption is there is not enough time to calculate hashes truncation so component is unstable
   // so I raised the test timeout to check if it helps
   test.slow();
-
-  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-    status: 200,
-    body: '',
-  }));
-
-  await page.route(OUTPUT_ROOTS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(outputRootsData),
-  }));
-
-  await page.route(OUTPUT_ROOTS_COUNT_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: '9927',
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <OptimisticL2OutputRoots/>
-    </TestApp>,
-  );
-
+  await mockEnvs(ENVS_MAP.optimisticRollup);
+  await mockTextAd();
+  await mockApiResponse('optimistic_l2_output_roots', outputRootsData);
+  await mockApiResponse('optimistic_l2_output_roots_count', 9927);
+  const component = await render(<OptimisticL2OutputRoots/>);
   await expect(component).toHaveScreenshot({ timeout: 10_000 });
 });

ui/pages/OptimisticL2TxnBatches.pw.tsx

-import { test as base, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import { txnBatchesData } from 'mocks/l2txnBatches/txnBatches';
-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 { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
 
 import OptimisticL2TxnBatches from './OptimisticL2TxnBatches';
 
-const test = base.extend({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  context: contextWithEnvs(configs.featureEnvs.optimisticRollup) as any,
-});
-
-const TXN_BATCHES_API_URL = buildApiUrl('optimistic_l2_txn_batches');
-const TXN_BATCHES_COUNT_API_URL = buildApiUrl('optimistic_l2_txn_batches_count');
-
-test('base view +@mobile', async({ mount, page }) => {
+test('base view +@mobile', async({ render, mockTextAd, mockEnvs, mockApiResponse }) => {
   // test on mobile is flaky
   // my assumption is there is not enough time to calculate hashes truncation so component is unstable
   // so I raised the test timeout to check if it helps
   test.slow();
-
-  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-    status: 200,
-    body: '',
-  }));
-
-  await page.route(TXN_BATCHES_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(txnBatchesData),
-  }));
-
-  await page.route(TXN_BATCHES_COUNT_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: '1235016',
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <OptimisticL2TxnBatches/>
-    </TestApp>,
-  );
-
+  await mockTextAd();
+  await mockEnvs(ENVS_MAP.optimisticRollup);
+  await mockApiResponse('optimistic_l2_txn_batches', txnBatchesData);
+  await mockApiResponse('optimistic_l2_txn_batches_count', 1235016);
+  const component = await render(<OptimisticL2TxnBatches/>);
   await expect(component).toHaveScreenshot({ timeout: 10_000 });
 });

ui/pages/OptimisticL2Withdrawals.pw.tsx

-import { test as base, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import { data as withdrawalsData } from 'mocks/l2withdrawals/withdrawals';
-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 { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
 
 import OptimisticL2Withdrawals from './OptimisticL2Withdrawals';
 
-const test = base.extend({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  context: contextWithEnvs(configs.featureEnvs.optimisticRollup) as any,
-});
-
-const WITHDRAWALS_API_URL = buildApiUrl('optimistic_l2_withdrawals');
-const WITHDRAWALS_COUNT_API_URL = buildApiUrl('optimistic_l2_withdrawals_count');
-
-test('base view +@mobile', async({ mount, page }) => {
+test('base view +@mobile', async({ render, mockTextAd, mockEnvs, mockApiResponse }) => {
   // test on mobile is flaky
   // my assumption is there is not enough time to calculate hashes truncation so component is unstable
   // so I raised the test timeout to check if it helps
   test.slow();
-
-  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-    status: 200,
-    body: '',
-  }));
-
-  await page.route(WITHDRAWALS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(withdrawalsData),
-  }));
-
-  await page.route(WITHDRAWALS_COUNT_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: '397',
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <OptimisticL2Withdrawals/>
-    </TestApp>,
-  );
-
+  await mockTextAd();
+  await mockEnvs(ENVS_MAP.optimisticRollup);
+  await mockApiResponse('optimistic_l2_withdrawals', withdrawalsData);
+  await mockApiResponse('optimistic_l2_withdrawals_count', 397);
+  const component = await render(<OptimisticL2Withdrawals/>);
   await expect(component).toHaveScreenshot({ timeout: 10_000 });
 });

ui/pages/UserOp.pw.tsx

-import { test as base, expect, devices } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import { userOpData } from 'mocks/userOps/userOp';
-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 { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect, devices } from 'playwright/lib';
 
 import UserOp from './UserOp';
 
-const test = base.extend({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  context: contextWithEnvs(configs.featureEnvs.userOps) as any,
-});
-
-const USER_OP_API_URL = buildApiUrl('user_op', { hash: userOpData.hash });
-
-test('base view', async({ mount, page }) => {
-  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-    status: 200,
-    body: '',
-  }));
-
-  await page.route(USER_OP_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(userOpData),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <UserOp/>
-    </TestApp>,
-    { hooksConfig: {
+const hooksConfig = {
   router: {
     query: { hash: userOpData.hash },
     isReady: true,
   },
-    } },
-  );
+};
+
+test.beforeEach(async({ mockEnvs }) => {
+  await mockEnvs(ENVS_MAP.userOps);
+});
 
+test('base view', async({ render, mockTextAd, mockApiResponse }) => {
+  await mockTextAd();
+  await mockApiResponse('user_op', userOpData, { pathParams: { hash: userOpData.hash } });
+  const component = await render(<UserOp/>, { hooksConfig });
   await expect(component).toHaveScreenshot();
 });
 
 test.describe('mobile', () => {
   test.use({ viewport: devices['iPhone 13 Pro'].viewport });
 
-  test('base view', async({ mount, page }) => {
-    await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-      status: 200,
-      body: '',
-    }));
-
-    await page.route(USER_OP_API_URL, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(userOpData),
-    }));
-
-    const component = await mount(
-      <TestApp>
-        <UserOp/>
-      </TestApp>,
-      { hooksConfig: {
-        router: {
-          query: { hash: userOpData.hash },
-          isReady: true,
-        },
-      } },
-    );
-
+  test('base view', async({ render, mockTextAd, mockApiResponse }) => {
+    await mockTextAd();
+    await mockApiResponse('user_op', userOpData, { pathParams: { hash: userOpData.hash } });
+    const component = await render(<UserOp/>, { hooksConfig });
     await expect(component).toHaveScreenshot();
   });
 });

ui/pages/UserOps.pw.tsx

 import { Box } from '@chakra-ui/react';
-import { test as base, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import { userOpsData } from 'mocks/userOps/userOps';
-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 { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
 
 import UserOps from './UserOps';
 
-const test = base.extend({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  context: contextWithEnvs(configs.featureEnvs.userOps) as any,
-});
-
-const USER_OPS_API_URL = buildApiUrl('user_ops');
-
-test('base view +@mobile', async({ mount, page }) => {
-  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-    status: 200,
-    body: '',
-  }));
-
-  await page.route(USER_OPS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(userOpsData),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <Box pt={{ base: '106px', lg: 0 }}>
-        <UserOps/>
-      </Box>
-    </TestApp>,
-  );
-
+test('base view +@mobile', async({ render, mockEnvs, mockTextAd, mockApiResponse }) => {
+  await mockEnvs(ENVS_MAP.userOps);
+  await mockTextAd();
+  await mockApiResponse('user_ops', userOpsData);
+  const component = await render(<Box pt={{ base: '106px', lg: 0 }}> <UserOps/> </Box>);
   await expect(component).toHaveScreenshot();
 });

ui/pages/ZkEvmL2TxnBatch.pw.tsx

-import { test as base, expect, devices } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import { txnBatchData } from 'mocks/zkEvm/txnBatches';
-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 { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect, devices } from 'playwright/lib';
 
 import ZkEvmL2TxnBatch from './ZkEvmL2TxnBatch';
 
-const test = base.extend({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  context: contextWithEnvs(configs.featureEnvs.zkEvmRollup) as any,
-});
-
+const batchNumber = '5';
 const hooksConfig = {
   router: {
-    query: { number: '5' },
+    query: { number: batchNumber },
   },
 };
 
-const BATCH_API_URL = buildApiUrl('zkevm_l2_txn_batch', { number: '5' });
+test.beforeEach(async({ mockTextAd, mockApiResponse, mockEnvs }) => {
+  await mockEnvs(ENVS_MAP.zkEvmRollup);
+  await mockTextAd();
+  await mockApiResponse('zkevm_l2_txn_batch', txnBatchData, { pathParams: { number: batchNumber } });
+});
 
-test('base view', async({ mount, page }) => {
+test('base view', async({ render }) => {
   test.slow();
-  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-    status: 200,
-    body: '',
-  }));
-
-  await page.route(BATCH_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(txnBatchData),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <ZkEvmL2TxnBatch/>
-    </TestApp>,
-    { hooksConfig },
-  );
-
+  const component = await render(<ZkEvmL2TxnBatch/>, { hooksConfig });
   await expect(component).toHaveScreenshot();
 });
 
 test.describe('mobile', () => {
   test.use({ viewport: devices['iPhone 13 Pro'].viewport });
-  test('base view', async({ mount, page }) => {
+  test('base view', async({ render }) => {
     test.slow();
-    await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-      status: 200,
-      body: '',
-    }));
-
-    await page.route(BATCH_API_URL, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(txnBatchData),
-    }));
-
-    const component = await mount(
-      <TestApp>
-        <ZkEvmL2TxnBatch/>
-      </TestApp>,
-      { hooksConfig },
-    );
-
+    const component = await render(<ZkEvmL2TxnBatch/>, { hooksConfig });
     await expect(component).toHaveScreenshot();
   });
 });

ui/pages/ZkEvmL2TxnBatches.pw.tsx

-import { test as base, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import { txnBatchesData } from 'mocks/zkEvm/txnBatches';
-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 { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
 
 import ZkEvmL2TxnBatches from './ZkEvmL2TxnBatches';
 
-const test = base.extend({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  context: contextWithEnvs(configs.featureEnvs.zkEvmRollup) as any,
-});
-
-const BATCHES_API_URL = buildApiUrl('zkevm_l2_txn_batches');
-const BATCHES_COUNTERS_API_URL = buildApiUrl('zkevm_l2_txn_batches_count');
-
-test('base view +@mobile', async({ mount, page }) => {
-  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-    status: 200,
-    body: '',
-  }));
-
-  await page.route(BATCHES_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(txnBatchesData),
-  }));
-
-  await page.route(BATCHES_COUNTERS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: '9927',
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <ZkEvmL2TxnBatches/>
-    </TestApp>,
-  );
-
+test('base view +@mobile', async({ render, mockTextAd, mockEnvs, mockApiResponse }) => {
+  await mockEnvs(ENVS_MAP.zkEvmRollup);
+  await mockTextAd();
+  await mockApiResponse('zkevm_l2_txn_batches', txnBatchesData);
+  await mockApiResponse('zkevm_l2_txn_batches_count', 9927);
+  const component = await render(<ZkEvmL2TxnBatches/>);
   await expect(component).toHaveScreenshot();
 });

ui/pages/ZkSyncL2TxnBatch.pw.tsx

-import { test as base, expect, devices } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as zkSyncTxnBatchMock from 'mocks/zkSync/zkSyncTxnBatch';
-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 { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect, devices } from 'playwright/lib';
 
 import ZkSyncL2TxnBatch from './ZkSyncL2TxnBatch';
 
-const test = base.extend({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  context: contextWithEnvs(configs.featureEnvs.zkSyncRollup) as any,
-});
-
+const batchNumber = String(zkSyncTxnBatchMock.base.number);
 const hooksConfig = {
   router: {
-    query: { number: String(zkSyncTxnBatchMock.base.number) },
+    query: { number: batchNumber },
   },
 };
 
-test.beforeEach(async({ page }) => {
-  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-    status: 200,
-    body: '',
-  }));
-
-  await page.route(BATCH_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(zkSyncTxnBatchMock.base),
-  }));
+test.beforeEach(async({ mockTextAd, mockApiResponse, mockEnvs }) => {
+  await mockEnvs(ENVS_MAP.zkSyncRollup);
+  await mockTextAd();
+  await mockApiResponse('zksync_l2_txn_batch', zkSyncTxnBatchMock.base, { pathParams: { number: batchNumber } });
 });
 
-const BATCH_API_URL = buildApiUrl('zksync_l2_txn_batch', { number: String(zkSyncTxnBatchMock.base.number) });
-
-test('base view', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <ZkSyncL2TxnBatch/>
-    </TestApp>,
-    { hooksConfig },
-  );
-
+test('base view', async({ render }) => {
+  const component = await render(<ZkSyncL2TxnBatch/>, { hooksConfig });
   await expect(component).toHaveScreenshot();
 });
 
 test.describe('mobile', () => {
   test.use({ viewport: devices['iPhone 13 Pro'].viewport });
-  test('base view', async({ mount }) => {
-    const component = await mount(
-      <TestApp>
-        <ZkSyncL2TxnBatch/>
-      </TestApp>,
-      { hooksConfig },
-    );
-
+  test('base view', async({ render }) => {
+    const component = await render(<ZkSyncL2TxnBatch/>, { hooksConfig });
     await expect(component).toHaveScreenshot();
   });
 });

ui/pages/ZkSyncL2TxnBatches.pw.tsx

-import { test as base, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as zkSyncTxnBatchesMock from 'mocks/zkSync/zkSyncTxnBatches';
-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 { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
 
 import ZkSyncL2TxnBatches from './ZkSyncL2TxnBatches';
 
-const test = base.extend({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  context: contextWithEnvs(configs.featureEnvs.zkSyncRollup) as any,
-});
-
-const BATCHES_API_URL = buildApiUrl('zksync_l2_txn_batches');
-const BATCHES_COUNTERS_API_URL = buildApiUrl('zksync_l2_txn_batches_count');
-
-test('base view +@mobile', async({ mount, page }) => {
+test('base view +@mobile', async({ render, mockEnvs, mockTextAd, mockApiResponse }) => {
   test.slow();
-  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-    status: 200,
-    body: '',
-  }));
-
-  await page.route(BATCHES_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(zkSyncTxnBatchesMock.baseResponse),
-  }));
-
-  await page.route(BATCHES_COUNTERS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: '9927',
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <ZkSyncL2TxnBatches/>
-    </TestApp>,
-  );
+  await mockEnvs(ENVS_MAP.zkSyncRollup);
+  await mockTextAd();
+  await mockApiResponse('zksync_l2_txn_batches', zkSyncTxnBatchesMock.baseResponse);
+  await mockApiResponse('zksync_l2_txn_batches_count', 9927);
 
+  const component = await render(<ZkSyncL2TxnBatches/>);
   await expect(component).toHaveScreenshot();
 });

ui/tx/TxSubHeading.pw.tsx

-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as txMock from 'mocks/txs/tx';
 import { txInterpretation } from 'mocks/txs/txInterpretation';
-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 { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
 
 import TxSubHeading from './TxSubHeading';
 import type { TxQuery } from './useTxQuery';
 
 const hash = '0x62d597ebcf3e8d60096dd0363bc2f0f5e2df27ba1dacd696c51aa7c9409f3193';
 
-const TX_INTERPRETATION_API_URL = buildApiUrl('tx_interpretation', { hash });
-
 const txQuery = {
   data: txMock.base,
   isPlaceholderData: false,
   isError: false,
 } as TxQuery;
 
-test('no interpretation +@mobile', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <TxSubHeading hash={ hash } hasTag={ false } txQuery={ txQuery }/>
-    </TestApp>,
-  );
-
+test('no interpretation +@mobile', async({ render }) => {
+  const component = await render(<TxSubHeading hash={ hash } hasTag={ false } txQuery={ txQuery }/>);
   await expect(component).toHaveScreenshot();
 });
 
-const bsInterpretationTest = test.extend({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  context: contextWithEnvs(configs.featureEnvs.txInterpretation) as any,
-});
-
-bsInterpretationTest('with interpretation +@mobile +@dark-mode', async({ mount, page }) => {
-  await page.route(TX_INTERPRETATION_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(txInterpretation),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <TxSubHeading hash={ hash } hasTag={ false } txQuery={ txQuery }/>
-    </TestApp>,
-  );
+test.describe('blockscout provider', () => {
+  test.beforeEach(async({ mockEnvs }) => {
+    await mockEnvs(ENVS_MAP.txInterpretation);
+  });
 
+  test('with interpretation +@mobile +@dark-mode', async({ render, mockApiResponse }) => {
+    await mockApiResponse('tx_interpretation', txInterpretation, { pathParams: { hash } });
+    const component = await render(<TxSubHeading hash={ hash } hasTag={ false } txQuery={ txQuery }/>);
     await expect(component).toHaveScreenshot();
-});
-
-bsInterpretationTest('with interpretation and view all link +@mobile', async({ mount, page }) => {
-  await page.route(TX_INTERPRETATION_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify({ data: { summaries: [ ...txInterpretation.data.summaries, ...txInterpretation.data.summaries ] } }),
-  }));
+  });
 
-  const component = await mount(
-    <TestApp>
-      <TxSubHeading hash={ hash } hasTag={ false } txQuery={ txQuery }/>
-    </TestApp>,
+  test('with interpretation and view all link +@mobile', async({ render, mockApiResponse }) => {
+    await mockApiResponse(
+      'tx_interpretation',
+      { data: { summaries: [ ...txInterpretation.data.summaries, ...txInterpretation.data.summaries ] } },
+      { pathParams: { hash } },
     );
-
+    const component = await render(<TxSubHeading hash={ hash } hasTag={ false } txQuery={ txQuery }/>);
     await expect(component).toHaveScreenshot();
-});
-
-bsInterpretationTest('no interpretation, has method called', async({ mount, page }) => {
-  await page.route(TX_INTERPRETATION_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify({ data: { summaries: [] } }),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <TxSubHeading hash={ hash } hasTag={ false } txQuery={ txQuery }/>
-    </TestApp>,
-  );
+  });
 
+  test('no interpretation, has method called', async({ render, mockApiResponse }) => {
+    await mockApiResponse('tx_interpretation', { data: { summaries: [] } }, { pathParams: { hash } });
+    const component = await render(<TxSubHeading hash={ hash } hasTag={ false } txQuery={ txQuery }/>);
     await expect(component).toHaveScreenshot();
-});
+  });
 
-bsInterpretationTest('no interpretation', async({ mount, page }) => {
+  test('no interpretation', async({ render, mockApiResponse }) => {
     const txPendingQuery = {
       data: txMock.pending,
       isPlaceholderData: false,
       isError: false,
     } as TxQuery;
-  await page.route(TX_INTERPRETATION_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify({ data: { summaries: [] } }),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <TxSubHeading hash={ hash } hasTag={ false } txQuery={ txPendingQuery }/>
-    </TestApp>,
-  );
-
+    await mockApiResponse('tx_interpretation', { data: { summaries: [] } }, { pathParams: { hash } });
+    const component = await render(<TxSubHeading hash={ hash } hasTag={ false } txQuery={ txPendingQuery }/>);
     await expect(component).toHaveScreenshot();
+  });
 });

ui/tx/details/TxDetailsWithdrawalStatus.pw.tsx

 import { Box } from '@chakra-ui/react';
-import { test as base, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import type { OptimisticL2WithdrawalStatus } from 'types/api/optimisticL2';
 
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
-import TestApp from 'playwright/TestApp';
-import * as configs from 'playwright/utils/configs';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
 
 import TxDetailsWithdrawalStatus from './TxDetailsWithdrawalStatus';
 
@@ -16,20 +14,13 @@ const statuses: Array<OptimisticL2WithdrawalStatus> = [
   'Relayed',
 ];
 
-const test = base.extend({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  context: contextWithEnvs(configs.featureEnvs.optimisticRollup) as any,
-});
-
 statuses.forEach((status) => {
-  test(`status="${ status }"`, async({ mount }) => {
-
-    const component = await mount(
-      <TestApp>
+  test(`status="${ status }"`, async({ render, mockEnvs }) => {
+    await mockEnvs(ENVS_MAP.optimisticRollup);
+    const component = await render(
       <Box p={ 2 }>
         <TxDetailsWithdrawalStatus status={ status } l1TxHash="0x7d93a59a228e97d084a635181c3053e324237d07566ec12287eae6da2bcf9456"/>
-        </Box>
-      </TestApp>,
+      </Box>,
     );
 
     await expect(component).toHaveScreenshot();

ui/tx/details/TxInfo.pw.tsx

-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as txMock from 'mocks/txs/tx';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
-import TestApp from 'playwright/TestApp';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
 import * as configs from 'playwright/utils/configs';
 
 import TxInfo from './TxInfo';
 
-const hooksConfig = {
-  router: {
-    query: { hash: 1 },
-  },
-};
-
-test('between addresses +@mobile +@dark-mode', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <TxInfo data={ txMock.base } isLoading={ false }/>
-    </TestApp>,
-    { hooksConfig },
-  );
+test('between addresses +@mobile +@dark-mode', async({ render, page }) => {
+  const component = await render(<TxInfo data={ txMock.base } isLoading={ false }/>);
 
   await page.getByText('View details').click();
 
@@ -30,13 +18,8 @@ test('between addresses +@mobile +@dark-mode', async({ mount, page }) => {
   });
 });
 
-test('creating contact', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <TxInfo data={ txMock.withContractCreation } isLoading={ false }/>
-    </TestApp>,
-    { hooksConfig },
-  );
+test('creating contact', async({ render, page }) => {
+  const component = await render(<TxInfo data={ txMock.withContractCreation } isLoading={ false }/>);
 
   await expect(component).toHaveScreenshot({
     mask: [ page.locator(configs.adsBannerSelector) ],
@@ -44,13 +27,8 @@ test('creating contact', async({ mount, page }) => {
   });
 });
 
-test('with token transfer +@mobile', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <TxInfo data={ txMock.withTokenTransfer } isLoading={ false }/>
-    </TestApp>,
-    { hooksConfig },
-  );
+test('with token transfer +@mobile', async({ render, page }) => {
+  const component = await render(<TxInfo data={ txMock.withTokenTransfer } isLoading={ false }/>);
 
   await expect(component).toHaveScreenshot({
     mask: [ page.locator(configs.adsBannerSelector) ],
@@ -58,13 +36,8 @@ test('with token transfer +@mobile', async({ mount, page }) => {
   });
 });
 
-test('with decoded revert reason', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <TxInfo data={ txMock.withDecodedRevertReason } isLoading={ false }/>
-    </TestApp>,
-    { hooksConfig },
-  );
+test('with decoded revert reason', async({ render, page }) => {
+  const component = await render(<TxInfo data={ txMock.withDecodedRevertReason } isLoading={ false }/>);
 
   await expect(component).toHaveScreenshot({
     mask: [ page.locator(configs.adsBannerSelector) ],
@@ -72,13 +45,8 @@ test('with decoded revert reason', async({ mount, page }) => {
   });
 });
 
-test('with decoded raw reason', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <TxInfo data={ txMock.withRawRevertReason } isLoading={ false }/>
-    </TestApp>,
-    { hooksConfig },
-  );
+test('with decoded raw reason', async({ render, page }) => {
+  const component = await render(<TxInfo data={ txMock.withRawRevertReason } isLoading={ false }/>);
 
   await expect(component).toHaveScreenshot({
     mask: [ page.locator(configs.adsBannerSelector) ],
@@ -86,13 +54,8 @@ test('with decoded raw reason', async({ mount, page }) => {
   });
 });
 
-test('pending', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <TxInfo data={ txMock.pending } isLoading={ false }/>
-    </TestApp>,
-    { hooksConfig },
-  );
+test('pending', async({ render, page }) => {
+  const component = await render(<TxInfo data={ txMock.pending } isLoading={ false }/>);
 
   await page.getByText('View details').click();
 
@@ -102,13 +65,8 @@ test('pending', async({ mount, page }) => {
   });
 });
 
-test('with actions uniswap +@mobile +@dark-mode', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <TxInfo data={ txMock.withActionsUniswap } isLoading={ false }/>
-    </TestApp>,
-    { hooksConfig },
-  );
+test('with actions uniswap +@mobile +@dark-mode', async({ render, page }) => {
+  const component = await render(<TxInfo data={ txMock.withActionsUniswap } isLoading={ false }/>);
 
   await expect(component).toHaveScreenshot({
     mask: [ page.locator(configs.adsBannerSelector) ],
@@ -116,13 +74,8 @@ test('with actions uniswap +@mobile +@dark-mode', async({ mount, page }) => {
   });
 });
 
-test('with blob', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <TxInfo data={ txMock.withBlob } isLoading={ false }/>
-    </TestApp>,
-    { hooksConfig },
-  );
+test('with blob', async({ render, page }) => {
+  const component = await render(<TxInfo data={ txMock.withBlob } isLoading={ false }/>);
 
   await page.getByText('View details').click();
 
@@ -132,39 +85,20 @@ test('with blob', async({ mount, page }) => {
   });
 });
 
-const l2Test = test.extend({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  context: contextWithEnvs(configs.featureEnvs.optimisticRollup) as any,
-});
-
-l2Test('l2', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <TxInfo data={ txMock.l2tx } isLoading={ false }/>
-    </TestApp>,
-    { hooksConfig },
-  );
-
+test('l2', async({ render, page, mockEnvs }) => {
+  await mockEnvs(ENVS_MAP.optimisticRollup);
+  const component = await render(<TxInfo data={ txMock.l2tx } isLoading={ false }/>);
   await expect(component).toHaveScreenshot({
     mask: [ page.locator(configs.adsBannerSelector) ],
     maskColor: configs.maskColor,
   });
 });
 
-const mainnetTest = test.extend({
-  context: contextWithEnvs([
-    { name: 'NEXT_PUBLIC_IS_TESTNET', value: 'false' },
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  ]) as any,
-});
-
-mainnetTest('without testnet warning', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <TxInfo data={ txMock.l2tx } isLoading={ false }/>
-    </TestApp>,
-    { hooksConfig },
-  );
+test('without testnet warning', async({ render, page, mockEnvs }) => {
+  await mockEnvs([
+    [ 'NEXT_PUBLIC_IS_TESTNET', 'false' ],
+  ]);
+  const component = await render(<TxInfo data={ txMock.l2tx } isLoading={ false }/>);
 
   await expect(component).toHaveScreenshot({
     mask: [ page.locator(configs.adsBannerSelector) ],
@@ -172,18 +106,9 @@ mainnetTest('without testnet warning', async({ mount, page }) => {
   });
 });
 
-const stabilityTest = test.extend({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  context: contextWithEnvs(configs.stabilityEnvs) as any,
-});
-
-stabilityTest('stability customization', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <TxInfo data={ txMock.stabilityTx } isLoading={ false }/>
-    </TestApp>,
-    { hooksConfig },
-  );
+test('stability customization', async({ render, page, mockEnvs }) => {
+  await mockEnvs(ENVS_MAP.stabilityEnvs);
+  const component = await render(<TxInfo data={ txMock.stabilityTx } isLoading={ false }/>);
 
   await expect(component).toHaveScreenshot({
     mask: [ page.locator(configs.adsBannerSelector) ],