Playwright tests refactoring, pt.5 (#1952)

* next part of test refactoring

* more refactoring

* more refactoring

* fixes and clean-up

* fixes

* build fixes

* more fixes

.eslintrc.js

@@ -4,6 +4,7 @@ const RESTRICTED_MODULES = {
     { name: '@chakra-ui/icons', message: 'Using @chakra-ui/icons is prohibited. Please use regular svg-icon instead (see examples in "icons/" folder)' },
     { name: '@metamask/providers', message: 'Please lazy-load @metamask/providers or use useProvider hook instead' },
     { name: '@metamask/post-message-stream', message: 'Please lazy-load @metamask/post-message-stream or use useProvider hook instead' },
+    { name: 'playwright/TestApp', message: 'Please use render() fixture from test() function of playwright/lib module' },
   ],
   patterns: [
     'icons/*',

mocks/address/tokens.ts

@@ -1,4 +1,4 @@
-import type { AddressCollectionsResponse, AddressNFTsResponse, AddressTokenBalance } from 'types/api/address';
+import type { AddressCollectionsResponse, AddressNFTsResponse, AddressTokenBalance, AddressTokensResponse } from 'types/api/address';
 
 import * as tokens from 'mocks/tokens/tokenInfo';
 import * as tokenInstance from 'mocks/tokens/tokenInstance';
@@ -119,35 +119,39 @@ export const erc404b: AddressTokenBalance = {
   token_id: null,
 };
 
-export const erc20List = {
+export const erc20List: AddressTokensResponse = {
   items: [
     erc20a,
     erc20b,
     erc20c,
   ],
+  next_page_params: null,
 };
 
-export const erc721List = {
+export const erc721List: AddressTokensResponse = {
   items: [
     erc721a,
     erc721b,
     erc721c,
   ],
+  next_page_params: null,
 };
 
-export const erc1155List = {
+export const erc1155List: AddressTokensResponse = {
   items: [
     erc1155withoutName,
     erc1155a,
     erc1155b,
   ],
+  next_page_params: null,
 };
 
-export const erc404List = {
+export const erc404List: AddressTokensResponse = {
   items: [
     erc404a,
     erc404b,
   ],
+  next_page_params: null,
 };
 
 export const nfts: AddressNFTsResponse = {

mocks/contract/solidityscanReport.ts

@@ -1,5 +1,8 @@
-export const solidityscanReportAverage = {
+import type { SolidityscanReport } from 'types/api/contract';
+
+export const solidityscanReportAverage: SolidityscanReport = {
   scan_report: {
+    contractname: 'foo',
     scan_status: 'scan_done',
     scan_summary: {
       issue_severity_distribution: {
@@ -20,8 +23,9 @@ export const solidityscanReportAverage = {
   },
 };
 
-export const solidityscanReportGreat = {
+export const solidityscanReportGreat: SolidityscanReport = {
   scan_report: {
+    contractname: 'foo',
     scan_status: 'scan_done',
     scan_summary: {
       issue_severity_distribution: {
@@ -42,8 +46,9 @@ export const solidityscanReportGreat = {
   },
 };
 
-export const solidityscanReportLow = {
+export const solidityscanReportLow: SolidityscanReport = {
   scan_report: {
+    contractname: 'foo',
     scan_status: 'scan_done',
     scan_summary: {
       issue_severity_distribution: {

mocks/stats/index.ts

@@ -1,6 +1,8 @@
 import _mapValues from 'lodash/mapValues';
 
-export const base = {
+import type { HomeStats } from 'types/api/stats';
+
+export const base: HomeStats = {
   average_block_time: 6212.0,
   coin_price: '0.00199678',
   coin_price_change_percentage: -7.42,
@@ -42,35 +44,42 @@ export const base = {
   tvl: '1767425.102766552',
 };
 
-export const withBtcLocked = {
+export const withBtcLocked: HomeStats = {
   ...base,
   rootstock_locked_btc: '3337493406696977561374',
 };
 
-export const withoutFiatPrices = {
+export const withoutFiatPrices: HomeStats = {
   ...base,
   gas_prices: _mapValues(base.gas_prices, (price) => price ? ({ ...price, fiat_price: null }) : null),
 };
 
-export const withoutGweiPrices = {
+export const withoutGweiPrices: HomeStats = {
   ...base,
   gas_prices: _mapValues(base.gas_prices, (price) => price ? ({ ...price, price: null }) : null),
 };
 
-export const withoutBothPrices = {
+export const withoutBothPrices: HomeStats = {
   ...base,
   gas_prices: _mapValues(base.gas_prices, (price) => price ? ({ ...price, price: null, fiat_price: null }) : null),
 };
 
-export const withSecondaryCoin = {
+export const withSecondaryCoin: HomeStats = {
   ...base,
   secondary_coin_price: '3.398',
 };
 
-export const noChartData = {
+export const noChartData: HomeStats = {
   ...base,
   transactions_today: null,
   coin_price: null,
   market_cap: null,
   tvl: null,
 };
+
+export const indexingStatus = {
+  finished_indexing_blocks: false,
+  indexed_blocks_ratio: '0.1',
+  finished_indexing: true,
+  indexed_internal_transactions_ratio: '1',
+};

mocks/tokens/tokenInfo.ts

@@ -8,7 +8,7 @@ export const tokenInfo: TokenInfo = {
   holders: '46554',
   name: 'ARIANEE',
   symbol: 'ARIA',
-  type: 'ERC-20',
+  type: 'ERC-20' as const,
   total_supply: '1235',
   icon_url: 'http://localhost:3000/token-icon.png',
 };
@@ -27,7 +27,7 @@ export const tokenInfoERC20a: TokenInfo<'ERC-20'> = {
   name: 'hyfi.token',
   symbol: 'HyFi',
   total_supply: '369000000000000000000000000',
-  type: 'ERC-20',
+  type: 'ERC-20' as const,
   icon_url: 'http://localhost:3000/token-icon.png',
 };
 
@@ -40,7 +40,7 @@ export const tokenInfoERC20b: TokenInfo<'ERC-20'> = {
   name: 'USD Coin',
   symbol: 'USDC',
   total_supply: '900000000000000000000000000',
-  type: 'ERC-20',
+  type: 'ERC-20' as const,
   icon_url: null,
 };
 
@@ -53,7 +53,7 @@ export const tokenInfoERC20c: TokenInfo<'ERC-20'> = {
   name: 'Ethereum',
   symbol: 'ETH',
   total_supply: '1000000000000000000000000',
-  type: 'ERC-20',
+  type: 'ERC-20' as const,
   icon_url: null,
 };
 
@@ -66,7 +66,7 @@ export const tokenInfoERC20d: TokenInfo<'ERC-20'> = {
   name: 'Zeta',
   symbol: 'ZETA',
   total_supply: '2100000000000000000000000000',
-  type: 'ERC-20',
+  type: 'ERC-20' as const,
   icon_url: null,
 };
 
@@ -79,7 +79,7 @@ export const tokenInfoERC20LongSymbol: TokenInfo<'ERC-20'> = {
   name: 'Zeta',
   symbol: 'ipfs://QmUpFUfVKDCWeZQk5pvDFUxnpQP9N6eLSHhNUy49T1JVtY',
   total_supply: '2100000000000000000000000000',
-  type: 'ERC-20',
+  type: 'ERC-20' as const,
   icon_url: null,
 };
 
@@ -92,7 +92,7 @@ export const tokenInfoERC721a: TokenInfo<'ERC-721'> = {
   name: 'HyFi Athena',
   symbol: 'HYFI_ATHENA',
   total_supply: '105',
-  type: 'ERC-721',
+  type: 'ERC-721' as const,
   icon_url: null,
 };
 
@@ -105,7 +105,7 @@ export const tokenInfoERC721b: TokenInfo<'ERC-721'> = {
   name: 'World Of Women Galaxy',
   symbol: 'WOWG',
   total_supply: null,
-  type: 'ERC-721',
+  type: 'ERC-721' as const,
   icon_url: null,
 };
 
@@ -118,7 +118,7 @@ export const tokenInfoERC721c: TokenInfo<'ERC-721'> = {
   name: 'Puma',
   symbol: 'PUMA',
   total_supply: null,
-  type: 'ERC-721',
+  type: 'ERC-721' as const,
   icon_url: null,
 };
 
@@ -131,7 +131,7 @@ export const tokenInfoERC721LongSymbol: TokenInfo<'ERC-721'> = {
   name: 'Puma',
   symbol: 'ipfs://QmUpFUfVKDCWeZQk5pvDFUxnpQP9N6eLSHhNUy49T1JVtY',
   total_supply: null,
-  type: 'ERC-721',
+  type: 'ERC-721' as const,
   icon_url: null,
 };
 
@@ -144,7 +144,7 @@ export const tokenInfoERC1155a: TokenInfo<'ERC-1155'> = {
   name: 'HyFi Membership',
   symbol: 'HYFI_MEMBERSHIP',
   total_supply: '482',
-  type: 'ERC-1155',
+  type: 'ERC-1155' as const,
   icon_url: null,
 };
 
@@ -157,7 +157,7 @@ export const tokenInfoERC1155b: TokenInfo<'ERC-1155'> = {
   name: 'WinkyVerse Collections',
   symbol: 'WVC',
   total_supply: '4943',
-  type: 'ERC-1155',
+  type: 'ERC-1155' as const,
   icon_url: null,
 };
 
@@ -170,7 +170,7 @@ export const tokenInfoERC1155WithoutName: TokenInfo<'ERC-1155'> = {
   name: null,
   symbol: null,
   total_supply: '482',
-  type: 'ERC-1155',
+  type: 'ERC-1155' as const,
   icon_url: null,
 };
 
@@ -184,7 +184,7 @@ export const tokenInfoERC404: TokenInfo<'ERC-404'> = {
   name: 'OMNI404',
   symbol: 'O404',
   total_supply: '6482275000000000000',
-  type: 'ERC-404',
+  type: 'ERC-404' as const,
 };
 
 export const bridgedTokenA: TokenInfo<'ERC-20'> = {

mocks/txs/state.ts

@@ -1,4 +1,4 @@
-import type { TxStateChange } from 'types/api/txStateChanges';
+import type { TxStateChange, TxStateChanges } from 'types/api/txStateChanges';
 
 export const mintToken: TxStateChange = {
   address: {
@@ -35,7 +35,7 @@ export const mintToken: TxStateChange = {
     type: 'ERC-721',
     icon_url: null,
   },
-  type: 'token',
+  type: 'token' as const,
 };
 
 export const receiveMintedToken: TxStateChange = {
@@ -73,7 +73,7 @@ export const receiveMintedToken: TxStateChange = {
     type: 'ERC-721',
     icon_url: null,
   },
-  type: 'token',
+  type: 'token' as const,
 };
 
 export const transfer1155Token: TxStateChange = {
@@ -105,7 +105,7 @@ export const transfer1155Token: TxStateChange = {
     type: 'ERC-1155',
   },
   token_id: '1',
-  type: 'token',
+  type: 'token' as const,
 };
 
 export const receiveCoin: TxStateChange = {
@@ -125,7 +125,7 @@ export const receiveCoin: TxStateChange = {
   change: '29726406604060',
   is_miner: true,
   token: null,
-  type: 'coin',
+  type: 'coin' as const,
 };
 
 export const sendCoin: TxStateChange = {
@@ -145,12 +145,13 @@ export const sendCoin: TxStateChange = {
   change: '-3844844822720562',
   is_miner: false,
   token: null,
-  type: 'coin',
+  type: 'coin' as const,
 };
 
 export const sendERC20Token = {
   address: {
     hash: '0x7f6479df95Aa3036a3BE02DB6300ea201ABd9981',
+    ens_domain_name: null,
     implementation_name: null,
     is_contract: false,
     is_verified: false,
@@ -173,13 +174,13 @@ export const sendERC20Token = {
     name: 'Tether USD',
     symbol: 'USDT',
     total_supply: '39030615894320966',
-    type: 'ERC-20',
+    type: 'ERC-20' as const,
     token_id: null,
   },
-  type: 'token',
+  type: 'token' as const,
 };
 
-export const baseResponse = {
+export const baseResponse: TxStateChanges = {
   items: [
     mintToken,
     receiveMintedToken,

playwright/TestApp.tsx

@@ -12,9 +12,10 @@ import type { Props as PageProps } from 'nextjs/getServerSideProps';
 import config from 'configs/app';
 import { AppContextProvider } from 'lib/contexts/app';
 import { SocketProvider } from 'lib/socket/context';
-import * as app from 'playwright/utils/app';
 import theme from 'theme';
 
+import { port as socketPort } from './utils/socket';
+
 export type Props = {
   children: React.ReactNode;
   withSocket?: boolean;
@@ -74,7 +75,7 @@ const TestApp = ({ children, withSocket, withWalletClient = true, appContext = d
   return (
     <ChakraProvider theme={ theme }>
       <QueryClientProvider client={ queryClient }>
-        <SocketProvider url={ withSocket ? `ws://${ config.app.host }:${ app.socketPort }` : undefined }>
+        <SocketProvider url={ withSocket ? `ws://${ config.app.host }:${ socketPort }` : undefined }>
           <AppContextProvider { ...appContext }>
             <GrowthBookProvider>
               <WalletClientProvider withWalletClient={ withWalletClient }>

playwright/fixtures/contextWithEnvs.ts

@@ -1,24 +0,0 @@
-import type { test } from '@playwright/experimental-ct-react';
-
-import createContextWithStorage from './createContextWithStorage';
-
-interface Env {
-  name: string;
-  value: string;
-}
-
-/**
- * @deprecated please use mockEnvs fixture
- *
- * @export
- * @param {Array<Env>} envs
- * @return {*}  {Parameters<typeof test.extend>[0]['context']}
- */
-export default function contextWithEnvsFixture(envs: Array<Env>): Parameters<typeof test.extend>[0]['context'] {
-  return async({ browser }, use) => {
-    const context = await createContextWithStorage(browser, envs);
-
-    await use(context);
-    await context.close();
-  };
-}

playwright/fixtures/contextWithFeatures.ts

@@ -1,25 +0,0 @@
-import type { test } from '@playwright/experimental-ct-react';
-
-import createContextWithStorage from './createContextWithStorage';
-
-interface Feature {
-  id: string;
-  value: unknown;
-}
-
-/**
- * @deprecated please use mockFeatures fixture
- *
- * @export
- * @param {Array<Feature>} envs
- * @return {*}  {Parameters<typeof test.extend>[0]['context']}
- */
-export default function contextWithFeaturesFixture(envs: Array<Feature>): Parameters<typeof test.extend>[0]['context'] {
-  return async({ browser }, use) => {
-    const storageItems = envs.map(({ id, value }) => ({ name: `pw_feature:${ id }`, value: JSON.stringify(value) }));
-    const context = await createContextWithStorage(browser, storageItems);
-
-    await use(context);
-    await context.close();
-  };
-}

playwright/fixtures/createContextWithStorage.ts

@@ -1,22 +0,0 @@
-import type { Browser } from '@playwright/test';
-
-import config from 'configs/app';
-
-/**
- * @deprecated please use mockEnvs or mockFeatures fixture
- *
- * @export
- * @param {Browser} browser
- * @param {Array<{ name: string; value: string }>} localStorage
- * @return {*}
- */
-export default async function createContextWithEnvs(browser: Browser, localStorage: Array<{ name: string; value: string }>) {
-  return browser.newContext({
-    storageState: {
-      origins: [
-        { origin: config.app.baseUrl, localStorage },
-      ],
-      cookies: [],
-    },
-  });
-}

playwright/fixtures/mockApiResponse.ts

@@ -6,6 +6,7 @@ import type { ResourceName, ResourcePayload } from 'lib/api/resources';
 interface Options<R extends ResourceName> {
   pathParams?: Parameters<typeof buildUrl<R>>[1];
   queryParams?: Parameters<typeof buildUrl<R>>[2];
+  times?: number;
 }
 
 export type MockApiResponseFixture = <R extends ResourceName>(resourceName: R, responseMock: ResourcePayload<R>, options?: Options<R>) => Promise<string>;
@@ -17,7 +18,7 @@ const fixture: TestFixture<MockApiResponseFixture, { page: Page }> = async({ pag
     await page.route(apiUrl, (route) => route.fulfill({
       status: 200,
       body: JSON.stringify(responseMock),
-    }));
+    }), { times: options?.times });
 
     return apiUrl;
   });

playwright/fixtures/render.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable no-restricted-imports */
 import type { MountOptions } from '@playwright/experimental-ct-react';
 import type { Locator, TestFixture } from '@playwright/test';
 import type router from 'next/router';

playwright/fixtures/socketServer.ts

@@ -8,7 +8,7 @@ import type { SmartContractVerificationResponse } from 'types/api/contract';
 import type { TokenTransfer } from 'types/api/tokenTransfer';
 import type { Transaction } from 'types/api/transaction';
 
-import * as app from 'playwright/utils/app';
+import { port as socketPort } from '../utils/socket';
 
 export type CreateSocketFixture = () => Promise<WebSocket>;
 
@@ -20,7 +20,7 @@ export interface SocketServerFixture {
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const createSocket: TestFixture<CreateSocketFixture, { page: Page}> = async({ page }, use) => {
-  const socketServer = new WebSocketServer({ port: app.socketPort });
+  const socketServer = new WebSocketServer({ port: socketPort });
 
   const connectionPromise = new Promise<WebSocket>((resolve) => {
     socketServer.on('connection', (socket: WebSocket) => {

playwright/utils/app.ts

@@ -1 +0,0 @@
-export const socketPort = 3200;

playwright/utils/buildApiUrl.ts

@@ -1,20 +0,0 @@
-import { compile } from 'path-to-regexp';
-
-import config from 'configs/app';
-import type { ResourceName, ResourcePathParams } from 'lib/api/resources';
-import { RESOURCES } from 'lib/api/resources';
-
-/**
- * @deprecated please use fixture mockApiResponse from playwright/lib.tsx for rendering test suite
- *
- * @export
- * @template R
- * @param {R} resourceName
- * @param {ResourcePathParams<R>} [pathParams]
- * @return {*} string
- */
-export default function buildApiUrl<R extends ResourceName>(resourceName: R, pathParams?: ResourcePathParams<R>) {
-  const resource = RESOURCES[resourceName];
-  const origin = 'endpoint' in resource && resource.endpoint ? resource.endpoint + (resource.basePath ?? '') : config.api.endpoint;
-  return origin + compile(resource.path)(pathParams);
-}

playwright/utils/config.ts

@@ -1,4 +1,3 @@
-/* eslint-disable max-len */
 import { devices } from '@playwright/test';
 
 export const viewport = {

playwright/utils/socket.ts

@@ -0,0 +1 @@
+export const port = 3200;

theme/components/Alert/Alert.pw.tsx

@@ -1,9 +1,8 @@
 import type { AlertProps } from '@chakra-ui/react';
 import { Alert, AlertIcon, AlertTitle } from '@chakra-ui/react';
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 test.use({ viewport: { width: 400, height: 720 } });
 
@@ -29,16 +28,14 @@ const TEST_CASES: Array<AlertProps> = [
 TEST_CASES.forEach((props) => {
   const testName = Object.entries(props).map(([ key, value ]) => `${ key }=${ value }`).join(', ');
 
-  test(`${ testName } +@dark-mode`, async({ mount }) => {
-    const component = await mount(
-      <TestApp>
-        <Alert { ...props }>
-          <AlertIcon/>
-          <AlertTitle>
+  test(`${ testName } +@dark-mode`, async({ render }) => {
+    const component = await render(
+      <Alert { ...props }>
+        <AlertIcon/>
+        <AlertTitle>
             This is alert text
-          </AlertTitle>
-        </Alert>
-      </TestApp>,
+        </AlertTitle>
+      </Alert>,
     );
 
     await expect(component).toHaveScreenshot();

theme/components/Button/Button.pw.tsx

@@ -1,8 +1,7 @@
 import { Button } from '@chakra-ui/react';
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 [
   { variant: 'solid' },
@@ -16,40 +15,24 @@ import TestApp from 'playwright/TestApp';
   { variant: 'subtle', colorScheme: 'gray', withDarkMode: true },
 ].forEach(({ variant, colorScheme, withDarkMode }) => {
   test.describe(`variant ${ variant }${ colorScheme ? ` with ${ colorScheme } color scheme` : '' }${ withDarkMode ? ' +@dark-mode' : '' }`, () => {
-    test('base', async({ mount }) => {
-      const component = await mount(
-        <TestApp>
-          <Button variant={ variant } colorScheme={ colorScheme }>Click me</Button>
-        </TestApp>,
-      );
+    test('base', async({ render }) => {
+      const component = await render(<Button variant={ variant } colorScheme={ colorScheme }>Click me</Button>);
       await expect(component.locator('button')).toHaveScreenshot();
     });
 
-    test('disabled', async({ mount }) => {
-      const component = await mount(
-        <TestApp>
-          <Button variant={ variant } colorScheme={ colorScheme } isDisabled>Click me</Button>
-        </TestApp>,
-      );
+    test('disabled', async({ render }) => {
+      const component = await render(<Button variant={ variant } colorScheme={ colorScheme } isDisabled>Click me</Button>);
       await expect(component.locator('button')).toHaveScreenshot();
     });
 
-    test('hovered', async({ mount }) => {
-      const component = await mount(
-        <TestApp>
-          <Button variant={ variant } colorScheme={ colorScheme }>Click me</Button>
-        </TestApp>,
-      );
+    test('hovered', async({ render }) => {
+      const component = await render(<Button variant={ variant } colorScheme={ colorScheme }>Click me</Button>);
       await component.getByText(/click/i).hover();
       await expect(component.locator('button')).toHaveScreenshot();
     });
 
-    test('active', async({ mount }) => {
-      const component = await mount(
-        <TestApp>
-          <Button variant={ variant } colorScheme={ colorScheme } isActive>Click me</Button>
-        </TestApp>,
-      );
+    test('active', async({ render }) => {
+      const component = await render(<Button variant={ variant } colorScheme={ colorScheme } isActive>Click me</Button>);
       await expect(component.locator('button')).toHaveScreenshot();
     });
   });

theme/components/Form/FormControl.pw.tsx

@@ -1,20 +1,17 @@
 import { FormControl, Input, FormLabel } from '@chakra-ui/react';
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 test.use({ viewport: { width: 500, height: 300 } });
 
 test.describe('floating label size md +@dark-mode', () => {
-  test('empty', async({ mount }) => {
-    const component = await mount(
-      <TestApp>
-        <FormControl variant="floating" id="name" isRequired size="md">
-          <Input required value=""/>
-          <FormLabel>Smart contract / Address (0x...)</FormLabel>
-        </FormControl>
-      </TestApp>,
+  test('empty', async({ render }) => {
+    const component = await render(
+      <FormControl variant="floating" id="name" isRequired size="md">
+        <Input required value=""/>
+        <FormLabel>Smart contract / Address (0x...)</FormLabel>
+      </FormControl>,
     );
 
     await expect(component).toHaveScreenshot();
@@ -23,14 +20,12 @@ test.describe('floating label size md +@dark-mode', () => {
     await expect(component).toHaveScreenshot();
   });
 
-  test('empty error', async({ mount }) => {
-    const component = await mount(
-      <TestApp>
-        <FormControl variant="floating" id="name" isRequired size="md">
-          <Input required value="" isInvalid/>
-          <FormLabel>Smart contract / Address (0x...)</FormLabel>
-        </FormControl>
-      </TestApp>,
+  test('empty error', async({ render }) => {
+    const component = await render(
+      <FormControl variant="floating" id="name" isRequired size="md">
+        <Input required value="" isInvalid/>
+        <FormLabel>Smart contract / Address (0x...)</FormLabel>
+      </FormControl>,
     );
 
     await expect(component).toHaveScreenshot();
@@ -39,53 +34,45 @@ test.describe('floating label size md +@dark-mode', () => {
     await expect(component).toHaveScreenshot();
   });
 
-  test('filled', async({ mount }) => {
-    const component = await mount(
-      <TestApp>
-        <FormControl variant="floating" id="name" isRequired size="md">
-          <Input required value="foo"/>
-          <FormLabel>Smart contract / Address (0x...)</FormLabel>
-        </FormControl>
-      </TestApp>,
+  test('filled', async({ render }) => {
+    const component = await render(
+      <FormControl variant="floating" id="name" isRequired size="md">
+        <Input required value="foo"/>
+        <FormLabel>Smart contract / Address (0x...)</FormLabel>
+      </FormControl>,
     );
 
     await expect(component).toHaveScreenshot();
   });
 
-  test('filled disabled', async({ mount }) => {
-    const component = await mount(
-      <TestApp>
-        <FormControl variant="floating" id="name" isRequired size="md">
-          <Input required value="foo" isDisabled/>
-          <FormLabel>Smart contract / Address (0x...)</FormLabel>
-        </FormControl>
-      </TestApp>,
+  test('filled disabled', async({ render }) => {
+    const component = await render(
+      <FormControl variant="floating" id="name" isRequired size="md">
+        <Input required value="foo" isDisabled/>
+        <FormLabel>Smart contract / Address (0x...)</FormLabel>
+      </FormControl>,
     );
 
     await expect(component).toHaveScreenshot();
   });
 
-  test('filled read-only', async({ mount }) => {
-    const component = await mount(
-      <TestApp>
-        <FormControl variant="floating" id="name" isRequired size="md">
-          <Input required value="foo" isReadOnly/>
-          <FormLabel>Smart contract / Address (0x...)</FormLabel>
-        </FormControl>
-      </TestApp>,
+  test('filled read-only', async({ render }) => {
+    const component = await render(
+      <FormControl variant="floating" id="name" isRequired size="md">
+        <Input required value="foo" isReadOnly/>
+        <FormLabel>Smart contract / Address (0x...)</FormLabel>
+      </FormControl>,
     );
 
     await expect(component).toHaveScreenshot();
   });
 
-  test('filled error', async({ mount }) => {
-    const component = await mount(
-      <TestApp>
-        <FormControl variant="floating" id="name" isRequired size="md">
-          <Input required value="foo" isInvalid/>
-          <FormLabel>Smart contract / Address (0x...)</FormLabel>
-        </FormControl>
-      </TestApp>,
+  test('filled error', async({ render }) => {
+    const component = await render(
+      <FormControl variant="floating" id="name" isRequired size="md">
+        <Input required value="foo" isInvalid/>
+        <FormLabel>Smart contract / Address (0x...)</FormLabel>
+      </FormControl>,
     );
 
     await expect(component).toHaveScreenshot();
@@ -93,14 +80,12 @@ test.describe('floating label size md +@dark-mode', () => {
 });
 
 test.describe('floating label size lg +@dark-mode', () => {
-  test('empty', async({ mount }) => {
-    const component = await mount(
-      <TestApp>
-        <FormControl variant="floating" id="name" isRequired size="lg">
-          <Input required value=""/>
-          <FormLabel>Smart contract / Address (0x...)</FormLabel>
-        </FormControl>
-      </TestApp>,
+  test('empty', async({ render }) => {
+    const component = await render(
+      <FormControl variant="floating" id="name" isRequired size="lg">
+        <Input required value=""/>
+        <FormLabel>Smart contract / Address (0x...)</FormLabel>
+      </FormControl>,
     );
 
     await expect(component).toHaveScreenshot();
@@ -109,14 +94,12 @@ test.describe('floating label size lg +@dark-mode', () => {
     await expect(component).toHaveScreenshot();
   });
 
-  test('filled', async({ mount }) => {
-    const component = await mount(
-      <TestApp>
-        <FormControl variant="floating" id="name" isRequired size="lg">
-          <Input required value="foo"/>
-          <FormLabel>Smart contract / Address (0x...)</FormLabel>
-        </FormControl>
-      </TestApp>,
+  test('filled', async({ render }) => {
+    const component = await render(
+      <FormControl variant="floating" id="name" isRequired size="lg">
+        <Input required value="foo"/>
+        <FormLabel>Smart contract / Address (0x...)</FormLabel>
+      </FormControl>,
     );
 
     await expect(component).toHaveScreenshot();

theme/components/Tag/Tag.pw.tsx

@@ -1,29 +1,20 @@
 import { Box, Tag } from '@chakra-ui/react';
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 [ 'blue', 'gray', 'gray-blue', 'orange', 'green', 'purple', 'cyan', 'teal' ].forEach((colorScheme) => {
-  test(`${ colorScheme } color scheme +@dark-mode`, async({ mount }) => {
-    const component = await mount(
-      <TestApp>
-        <Tag colorScheme={ colorScheme }>content</Tag>
-      </TestApp>,
-    );
-
+  test(`${ colorScheme } color scheme +@dark-mode`, async({ render }) => {
+    const component = await render(<Tag colorScheme={ colorScheme }>content</Tag>);
     await expect(component.getByText(/content/i)).toHaveScreenshot();
   });
 });
 
-test('with long text', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <Box w="100px">
-        <Tag>this is very looooooooooong text</Tag>
-      </Box>
-    </TestApp>,
+test('with long text', async({ render }) => {
+  const component = await render(
+    <Box w="100px">
+      <Tag>this is very looooooooooong text</Tag>
+    </Box>,
   );
-
   await expect(component.getByText(/this/i)).toHaveScreenshot();
 });

theme/components/Tooltip/Tooltip.pw.tsx

@@ -1,18 +1,15 @@
 import { Box, Tooltip, Icon } from '@chakra-ui/react';
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
-test('base view +@dark-mode', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <Box m={ 10 }>
-        <Tooltip label="Tooltip content">
+test('base view +@dark-mode', async({ render, page }) => {
+  const component = await render(
+    <Box m={ 10 }>
+      <Tooltip label="Tooltip content">
           trigger
-        </Tooltip>
-      </Box>
-    </TestApp>,
+      </Tooltip>
+    </Box>,
   );
 
   await component.getByText(/trigger/i).hover();
@@ -22,17 +19,15 @@ test('base view +@dark-mode', async({ mount, page }) => {
 
 // was not able to reproduce in tests issue when Icon is used as trigger for tooltip
 // https://github.com/chakra-ui/chakra-ui/issues/7107
-test.skip('with icon', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <Box m={ 10 }>
-        <Tooltip label="Tooltip content">
-          <Icon viewBox="0 0 20 20" boxSize={ 5 } aria-label="Trigger">
-            <circle cx="10" cy="10" r="10"/>
-          </Icon>
-        </Tooltip>
-      </Box>
-    </TestApp>,
+test.fixme('with icon', async({ render, page }) => {
+  const component = await render(
+    <Box m={ 10 }>
+      <Tooltip label="Tooltip content">
+        <Icon viewBox="0 0 20 20" boxSize={ 5 } aria-label="Trigger">
+          <circle cx="10" cy="10" r="10"/>
+        </Icon>
+      </Tooltip>
+    </Box>,
   );
 
   const tooltip = page.getByText(/tooltip content/i);

types/api/stats.ts

@@ -7,13 +7,13 @@ export type HomeStats = {
   coin_price: string | null;
   coin_price_change_percentage: number | null; // e.g -6.22
   total_gas_used: string;
-  transactions_today: string;
+  transactions_today: string | null;
   gas_used_today: string;
   gas_prices: GasPrices | null;
   gas_price_updated_at: string | null;
   gas_prices_update_in: number;
   static_gas_price: string | null;
-  market_cap: string;
+  market_cap: string | null;
   network_utilization_percentage: number;
   tvl: string | null;
   rootstock_locked_btc?: string | null;

ui/address/AddressCoinBalance.pw.tsx

@@ -1,41 +1,24 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as balanceHistoryMock from 'mocks/address/coinBalanceHistory';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
+import { test, expect } from 'playwright/lib';
 
 import AddressCoinBalance from './AddressCoinBalance';
 
-const addressHash = 'hash';
-const BALANCE_HISTORY_API_URL = buildApiUrl('address_coin_balance', { hash: addressHash });
-const BALANCE_HISTORY_CHART_API_URL = buildApiUrl('address_coin_balance_chart', { hash: addressHash });
+const addressHash = '0x1234';
 const hooksConfig = {
   router: {
     query: { hash: addressHash },
   },
 };
 
-test('base view +@dark-mode +@mobile', async({ mount, page }) => {
-  await page.route(BALANCE_HISTORY_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(balanceHistoryMock.baseResponse),
-  }));
-  await page.route(BALANCE_HISTORY_CHART_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(balanceHistoryMock.chartResponse),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <AddressCoinBalance/>
-    </TestApp>,
-    { hooksConfig },
-  );
+test('base view +@dark-mode +@mobile', async({ render, page, mockApiResponse }) => {
+  await mockApiResponse('address_coin_balance', balanceHistoryMock.baseResponse, { pathParams: { hash: addressHash } });
+  await mockApiResponse('address_coin_balance_chart', balanceHistoryMock.chartResponse, { pathParams: { hash: addressHash } });
+  const component = await render(<AddressCoinBalance/>, { hooksConfig });
   await page.waitForFunction(() => {
     return document.querySelector('path[data-name="chart-Balances-small"]')?.getAttribute('opacity') === '1';
   });
   await page.mouse.move(240, 100);
-
   await expect(component).toHaveScreenshot();
 });

ui/address/AddressDetails.pw.tsx

@@ -1,26 +1,16 @@
-import { test, expect, devices } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import type { WalletProvider } from 'types/web3';
-
 import * as addressMock from 'mocks/address/address';
 import * as countersMock from 'mocks/address/counters';
 import * as tokensMock from 'mocks/address/tokens';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
-import * as configs from 'playwright/utils/configs';
+import { test, expect, devices } from 'playwright/lib';
+import * as pwConfig from 'playwright/utils/config';
 
 import AddressDetails from './AddressDetails';
 import MockAddressPage from './testUtils/MockAddressPage';
 import type { AddressQuery } from './utils/useAddressQuery';
 
 const ADDRESS_HASH = addressMock.hash;
-const API_URL_ADDRESS = buildApiUrl('address', { hash: ADDRESS_HASH });
-const API_URL_COUNTERS = buildApiUrl('address_counters', { hash: ADDRESS_HASH });
-const API_URL_TOKENS_ERC20 = buildApiUrl('address_tokens', { hash: ADDRESS_HASH }) + '?type=ERC-20';
-const API_URL_TOKENS_ERC721 = buildApiUrl('address_tokens', { hash: ADDRESS_HASH }) + '?type=ERC-721';
-const API_URL_TOKENS_ER1155 = buildApiUrl('address_tokens', { hash: ADDRESS_HASH }) + '?type=ERC-1155';
-const API_URL_TOKENS_ERC404 = buildApiUrl('address_tokens', { hash: ADDRESS_HASH }) + '?type=ERC-404';
 const hooksConfig = {
   router: {
     query: { hash: ADDRESS_HASH },
@@ -30,144 +20,75 @@ const hooksConfig = {
 test.describe('mobile', () => {
   test.use({ viewport: devices['iPhone 13 Pro'].viewport });
 
-  test('contract', async({ mount, page }) => {
-    await page.route(API_URL_ADDRESS, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(addressMock.contract),
-    }));
-    await page.route(API_URL_COUNTERS, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(countersMock.forContract),
-    }));
+  test('contract', async({ render, mockApiResponse, page }) => {
+    await mockApiResponse('address', addressMock.contract, { pathParams: { hash: ADDRESS_HASH } });
+    await mockApiResponse('address_counters', countersMock.forContract, { pathParams: { hash: ADDRESS_HASH } });
 
-    const component = await mount(
-      <TestApp>
-        <AddressDetails addressQuery={{ data: addressMock.contract } as AddressQuery}/>
-      </TestApp>,
-      { hooksConfig },
-    );
+    const component = await render(<AddressDetails addressQuery={{ data: addressMock.contract } as AddressQuery}/>, { hooksConfig });
 
     await expect(component).toHaveScreenshot({
-      mask: [ page.locator(configs.adsBannerSelector) ],
-      maskColor: configs.maskColor,
+      mask: [ page.locator(pwConfig.adsBannerSelector) ],
+      maskColor: pwConfig.maskColor,
     });
   });
 
-  test('validator', async({ mount, page }) => {
-    await page.route(API_URL_ADDRESS, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(addressMock.validator),
-    }));
-    await page.route(API_URL_COUNTERS, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(countersMock.forValidator),
-    }));
+  test('validator', async({ render, page, mockApiResponse }) => {
+    await mockApiResponse('address', addressMock.validator, { pathParams: { hash: ADDRESS_HASH } });
+    await mockApiResponse('address_counters', countersMock.forValidator, { pathParams: { hash: ADDRESS_HASH } });
 
-    const component = await mount(
-      <TestApp>
-        <AddressDetails addressQuery={{ data: addressMock.validator } as AddressQuery}/>
-      </TestApp>,
-      { hooksConfig },
-    );
+    const component = await render(<AddressDetails addressQuery={{ data: addressMock.validator } as AddressQuery}/>, { hooksConfig });
 
     await expect(component).toHaveScreenshot({
-      mask: [ page.locator(configs.adsBannerSelector) ],
-      maskColor: configs.maskColor,
+      mask: [ page.locator(pwConfig.adsBannerSelector) ],
+      maskColor: pwConfig.maskColor,
     });
   });
 
 });
 
-test('contract', async({ mount, page }) => {
-  await page.route(API_URL_ADDRESS, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(addressMock.contract),
-  }));
-  await page.route(API_URL_COUNTERS, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(countersMock.forContract),
-  }));
+test('contract', async({ render, page, mockApiResponse }) => {
+  await mockApiResponse('address', addressMock.contract, { pathParams: { hash: ADDRESS_HASH } });
+  await mockApiResponse('address_counters', countersMock.forContract, { pathParams: { hash: ADDRESS_HASH } });
 
-  const component = await mount(
-    <TestApp>
-      <AddressDetails addressQuery={{ data: addressMock.contract } as AddressQuery}/>
-    </TestApp>,
-    { hooksConfig },
-  );
+  const component = await render(<AddressDetails addressQuery={{ data: addressMock.contract } as AddressQuery}/>, { hooksConfig });
 
   await expect(component).toHaveScreenshot({
-    mask: [ page.locator(configs.adsBannerSelector) ],
-    maskColor: configs.maskColor,
+    mask: [ page.locator(pwConfig.adsBannerSelector) ],
+    maskColor: pwConfig.maskColor,
   });
 });
 
 // there's an unexpected timeout occurred in this test
-test.skip('token', async({ mount, page }) => {
-  await page.route(API_URL_ADDRESS, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(addressMock.token),
-  }));
-  await page.route(API_URL_COUNTERS, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(countersMock.forToken),
-  }));
-  await page.route(API_URL_TOKENS_ERC20, async(route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(tokensMock.erc20List),
-  }), { times: 1 });
-  await page.route(API_URL_TOKENS_ERC721, async(route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(tokensMock.erc721List),
-  }), { times: 1 });
-  await page.route(API_URL_TOKENS_ER1155, async(route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(tokensMock.erc1155List),
-  }), { times: 1 });
-  await page.route(API_URL_TOKENS_ERC404, async(route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(tokensMock.erc404List),
-  }), { times: 1 });
+test.fixme('token', async({ render, mockApiResponse, injectMetaMaskProvider, page }) => {
+  await mockApiResponse('address', addressMock.token, { pathParams: { hash: ADDRESS_HASH } });
+  await mockApiResponse('address_counters', countersMock.forToken, { pathParams: { hash: ADDRESS_HASH } });
+  await mockApiResponse('address_tokens', tokensMock.erc20List, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-20' }, times: 1 });
+  await mockApiResponse('address_tokens', tokensMock.erc721List, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-721' }, times: 1 });
+  await mockApiResponse('address_tokens', tokensMock.erc1155List, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-1155' }, times: 1 });
+  await mockApiResponse('address_tokens', tokensMock.erc404List, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-404' }, times: 1 });
+  await injectMetaMaskProvider();
 
-  await page.evaluate(() => {
-    window.ethereum = {
-      providers: [ { isMetaMask: true, _events: {} } ],
-    } as WalletProvider;
-  });
-
-  const component = await mount(
-    <TestApp>
-      <MockAddressPage>
-        <AddressDetails addressQuery={{ data: addressMock.token } as AddressQuery}/>
-      </MockAddressPage>
-    </TestApp>,
+  const component = await render(
+    <MockAddressPage>
+      <AddressDetails addressQuery={{ data: addressMock.token } as AddressQuery}/>
+    </MockAddressPage>,
     { hooksConfig },
   );
 
   await expect(component).toHaveScreenshot({
-    mask: [ page.locator(configs.adsBannerSelector) ],
-    maskColor: configs.maskColor,
+    mask: [ page.locator(pwConfig.adsBannerSelector) ],
+    maskColor: pwConfig.maskColor,
   });
 });
 
-test('validator', async({ mount, page }) => {
-  await page.route(API_URL_ADDRESS, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(addressMock.validator),
-  }));
-  await page.route(API_URL_COUNTERS, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(countersMock.forValidator),
-  }));
+test('validator', async({ render, mockApiResponse, page }) => {
+  await mockApiResponse('address', addressMock.validator, { pathParams: { hash: ADDRESS_HASH } });
+  await mockApiResponse('address_counters', countersMock.forValidator, { pathParams: { hash: ADDRESS_HASH } });
 
-  const component = await mount(
-    <TestApp>
-      <AddressDetails addressQuery={{ data: addressMock.validator } as AddressQuery}/>
-    </TestApp>,
-    { hooksConfig },
-  );
+  const component = await render(<AddressDetails addressQuery={{ data: addressMock.validator } as AddressQuery}/>, { hooksConfig });
 
   await expect(component).toHaveScreenshot({
-    mask: [ page.locator(configs.adsBannerSelector) ],
-    maskColor: configs.maskColor,
+    mask: [ page.locator(pwConfig.adsBannerSelector) ],
+    maskColor: pwConfig.maskColor,
   });
 });

ui/address/AddressInternalTxs.pw.tsx

@@ -1,34 +1,25 @@
 import { Box } from '@chakra-ui/react';
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as internalTxsMock from 'mocks/txs/internalTxs';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
+import { test, expect } from 'playwright/lib';
 
 import AddressInternalTxs from './AddressInternalTxs';
 
 const ADDRESS_HASH = internalTxsMock.base.from.hash;
-const API_URL_TX_INTERNALS = buildApiUrl('address_internal_txs', { hash: ADDRESS_HASH });
 const hooksConfig = {
   router: {
     query: { hash: ADDRESS_HASH },
   },
 };
 
-test('base view +@mobile', async({ mount, page }) => {
-  await page.route(API_URL_TX_INTERNALS, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(internalTxsMock.baseResponse),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <Box h={{ base: '134px', lg: 6 }}/>
+test('base view +@mobile', async({ render, mockApiResponse }) => {
+  await mockApiResponse('address_internal_txs', internalTxsMock.baseResponse, { pathParams: { hash: ADDRESS_HASH } });
+  const component = await render(
+    <Box pt={{ base: '134px', lg: 6 }}>
       <AddressInternalTxs/>
-    </TestApp>,
+    </Box>,
     { hooksConfig },
   );
-
   await expect(component).toHaveScreenshot();
 });

ui/address/AddressTokenTransfers.pw.tsx

@@ -1,126 +1,110 @@
 import { Box } from '@chakra-ui/react';
-import { test as base, expect, devices } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as tokenTransferMock from 'mocks/tokens/tokenTransfer';
 import * as socketServer from 'playwright/fixtures/socketServer';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
+import { test, expect, devices } from 'playwright/lib';
 
 import AddressTokenTransfers from './AddressTokenTransfers';
 
 const CURRENT_ADDRESS = '0xd789a607CEac2f0E14867de4EB15b15C9FFB5859';
-
-const API_URL = buildApiUrl('address_token_transfers', { hash: CURRENT_ADDRESS }) +
- '?token=0x1189a607CEac2f0E14867de4EB15b15C9FFB5859';
-
+const TOKEN_HASH = '0x1189a607CEac2f0E14867de4EB15b15C9FFB5859';
 const hooksConfig = {
   router: {
-    query: { hash: CURRENT_ADDRESS, token: '0x1189a607CEac2f0E14867de4EB15b15C9FFB5859' },
+    query: { hash: CURRENT_ADDRESS, token: TOKEN_HASH },
   },
 };
 
-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('with token filter and pagination', async({ mount, page }) => {
-  await page.route(API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify({ items: [ tokenTransferMock.erc1155A ], next_page_params: { block_number: 1 } }),
-  }));
+const tokenTransfersWithPagination = {
+  items: [ tokenTransferMock.erc1155A ],
+  next_page_params: { block_number: 1, index: 1, items_count: 1 },
+};
+const tokenTransfersWoPagination = {
+  items: [ tokenTransferMock.erc1155A ],
+  next_page_params: null,
+};
 
-  const component = await mount(
-    <TestApp>
-      <Box h={{ base: '134px', lg: 6 }}/>
+test('with token filter and pagination', async({ render, mockApiResponse }) => {
+  await mockApiResponse('address_token_transfers', tokenTransfersWithPagination, {
+    pathParams: { hash: CURRENT_ADDRESS },
+    queryParams: { token: TOKEN_HASH },
+  });
+  const component = await render(
+    <Box pt={{ base: '134px', lg: 6 }}>
       <AddressTokenTransfers/>
-    </TestApp>,
+    </Box>,
     { hooksConfig },
   );
-
   await expect(component).toHaveScreenshot();
 });
 
-test('with token filter and no pagination', async({ mount, page }) => {
-  await page.route(API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify({ items: [ tokenTransferMock.erc1155A ] }),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <Box h={{ base: '134px', lg: 6 }}/>
+test('with token filter and no pagination', async({ render, mockApiResponse }) => {
+  await mockApiResponse('address_token_transfers', tokenTransfersWoPagination, {
+    pathParams: { hash: CURRENT_ADDRESS },
+    queryParams: { token: TOKEN_HASH },
+  });
+  const component = await render(
+    <Box pt={{ base: '134px', lg: 6 }}>
       <AddressTokenTransfers/>
-    </TestApp>,
+    </Box>,
     { hooksConfig },
   );
-
   await expect(component).toHaveScreenshot();
 });
 
 test.describe('mobile', () => {
   test.use({ viewport: devices['iPhone 13 Pro'].viewport });
 
-  test('with token filter and pagination', async({ mount, page }) => {
-    await page.route(API_URL, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify({ items: [ tokenTransferMock.erc1155A ], next_page_params: { block_number: 1 } }),
-    }));
-
-    const component = await mount(
-      <TestApp>
-        <Box h={{ base: '134px', lg: 6 }}/>
+  test('with token filter and pagination', async({ render, mockApiResponse }) => {
+    await mockApiResponse('address_token_transfers', tokenTransfersWithPagination, {
+      pathParams: { hash: CURRENT_ADDRESS },
+      queryParams: { token: TOKEN_HASH },
+    });
+    const component = await render(
+      <Box pt={{ base: '134px', lg: 6 }}>
         <AddressTokenTransfers/>
-      </TestApp>,
+      </Box>,
       { hooksConfig },
     );
-
     await expect(component).toHaveScreenshot();
   });
 
-  test('with token filter and no pagination', async({ mount, page }) => {
-    await page.route(API_URL, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify({ items: [ tokenTransferMock.erc1155A ] }),
-    }));
-
-    const component = await mount(
-      <TestApp>
-        <Box h={{ base: '134px', lg: 6 }}/>
+  test('with token filter and no pagination', async({ render, mockApiResponse }) => {
+    await mockApiResponse('address_token_transfers', tokenTransfersWoPagination, {
+      pathParams: { hash: CURRENT_ADDRESS },
+      queryParams: { token: TOKEN_HASH },
+    });
+    const component = await render(
+      <Box pt={{ base: '134px', lg: 6 }}>
         <AddressTokenTransfers/>
-      </TestApp>,
+      </Box>,
       { hooksConfig },
     );
-
     await expect(component).toHaveScreenshot();
   });
 });
 
 test.describe('socket', () => {
-  test('without overload', async({ mount, page, createSocket }) => {
+  test('without overload', async({ render, mockApiResponse, createSocket, page }) => {
     const hooksConfigNoToken = {
       router: {
         query: { hash: CURRENT_ADDRESS },
       },
     };
-
-    const API_URL_NO_TOKEN = buildApiUrl('address_token_transfers', { hash: CURRENT_ADDRESS }) + '?type=';
-
-    await page.route(API_URL_NO_TOKEN, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify({ items: [ tokenTransferMock.erc1155A ], next_page_params: { block_number: 1 } }),
-    }));
-
-    await mount(
-      <TestApp withSocket>
-        <Box h={{ base: '134px', lg: 6 }}/>
+    await mockApiResponse('address_token_transfers', tokenTransfersWithPagination, {
+      pathParams: { hash: CURRENT_ADDRESS },
+      queryParams: { type: [] },
+    });
+    await render(
+      <Box pt={{ base: '134px', lg: 6 }}>
         <AddressTokenTransfers/>
-      </TestApp>,
+      </Box>,
       { hooksConfig: hooksConfigNoToken },
+      { withSocket: true },
     );
 
     const socket = await createSocket();
@@ -137,26 +121,22 @@ test.describe('socket', () => {
     expect(itemsCountNew).toBe(4);
   });
 
-  test('with overload', async({ mount, page, createSocket }) => {
+  test('with overload', async({ render, mockApiResponse, page, createSocket }) => {
     const hooksConfigNoToken = {
       router: {
         query: { hash: CURRENT_ADDRESS },
       },
     };
-
-    const API_URL_NO_TOKEN = buildApiUrl('address_token_transfers', { hash: CURRENT_ADDRESS }) + '?type=';
-
-    await page.route(API_URL_NO_TOKEN, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify({ items: [ tokenTransferMock.erc1155A ], next_page_params: { block_number: 1 } }),
-    }));
-
-    await mount(
-      <TestApp withSocket>
-        <Box h={{ base: '134px', lg: 6 }}/>
+    await mockApiResponse('address_token_transfers', tokenTransfersWithPagination, {
+      pathParams: { hash: CURRENT_ADDRESS },
+      queryParams: { type: [] },
+    });
+    await render(
+      <Box pt={{ base: '134px', lg: 6 }}>
         <AddressTokenTransfers overloadCount={ 2 }/>
-      </TestApp>,
+      </Box>,
       { hooksConfig: hooksConfigNoToken },
+      { withSocket: true },
     );
 
     const socket = await createSocket();
@@ -176,26 +156,23 @@ test.describe('socket', () => {
     expect(counter?.startsWith('1 ')).toBe(true);
   });
 
-  test('without overload, with filters', async({ mount, page, createSocket }) => {
+  test('without overload, with filters', async({ render, mockApiResponse, page, createSocket }) => {
     const hooksConfigWithFilter = {
       router: {
         query: { hash: CURRENT_ADDRESS, type: 'ERC-1155' },
       },
     };
+    await mockApiResponse('address_token_transfers', tokenTransfersWithPagination, {
+      pathParams: { hash: CURRENT_ADDRESS },
+      queryParams: { type: 'ERC-1155' },
+    });
 
-    const API_URL_WITH_FILTER = buildApiUrl('address_token_transfers', { hash: CURRENT_ADDRESS }) + '?type=ERC-1155';
-
-    await page.route(API_URL_WITH_FILTER, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify({ items: [ tokenTransferMock.erc1155A ], next_page_params: { block_number: 1 } }),
-    }));
-
-    await mount(
-      <TestApp withSocket>
-        <Box h={{ base: '134px', lg: 6 }}/>
+    await render(
+      <Box pt={{ base: '134px', lg: 6 }}>
         <AddressTokenTransfers/>
-      </TestApp>,
+      </Box>,
       { hooksConfig: hooksConfigWithFilter },
+      { withSocket: true },
     );
 
     const socket = await createSocket();
@@ -212,26 +189,23 @@ test.describe('socket', () => {
     expect(itemsCountNew).toBe(3);
   });
 
-  test('with overload, with filters', async({ mount, page, createSocket }) => {
+  test('with overload, with filters', async({ render, mockApiResponse, page, createSocket }) => {
     const hooksConfigWithFilter = {
       router: {
         query: { hash: CURRENT_ADDRESS, type: 'ERC-1155' },
       },
     };
+    await mockApiResponse('address_token_transfers', tokenTransfersWithPagination, {
+      pathParams: { hash: CURRENT_ADDRESS },
+      queryParams: { type: 'ERC-1155' },
+    });
 
-    const API_URL_WITH_FILTER = buildApiUrl('address_token_transfers', { hash: CURRENT_ADDRESS }) + '?type=ERC-1155';
-
-    await page.route(API_URL_WITH_FILTER, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify({ items: [ tokenTransferMock.erc1155A ], next_page_params: { block_number: 1 } }),
-    }));
-
-    await mount(
-      <TestApp withSocket>
-        <Box h={{ base: '134px', lg: 6 }}/>
+    await render(
+      <Box pt={{ base: '134px', lg: 6 }}>
         <AddressTokenTransfers overloadCount={ 2 }/>
-      </TestApp>,
+      </Box>,
       { hooksConfig: hooksConfigWithFilter },
+      { withSocket: true },
     );
 
     const socket = await createSocket();

ui/address/AddressTokens.pw.tsx

@@ -1,81 +1,53 @@
 import { Box } from '@chakra-ui/react';
-import { test as base, expect, devices } from '@playwright/experimental-ct-react';
 import React from 'react';
 
+import type { AddressTokensResponse } from 'types/api/address';
+
 import * as addressMock from 'mocks/address/address';
 import * as tokensMock from 'mocks/address/tokens';
 import * as socketServer from 'playwright/fixtures/socketServer';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
+import { test, expect, devices } from 'playwright/lib';
 
 import AddressTokens from './AddressTokens';
 
-const ADDRESS_HASH = addressMock.withName.hash;
-const API_URL_ADDRESS = buildApiUrl('address', { hash: ADDRESS_HASH });
-const API_URL_TOKENS = buildApiUrl('address_tokens', { hash: ADDRESS_HASH });
-const API_URL_NFT = buildApiUrl('address_nfts', { hash: ADDRESS_HASH }) + '?type=';
-const API_URL_COLLECTIONS = buildApiUrl('address_collections', { hash: ADDRESS_HASH }) + '?type=';
+const ADDRESS_HASH = addressMock.validator.hash;
 
 const nextPageParams = {
   items_count: 50,
   token_name: 'aaa',
-  token_type: '123',
+  token_type: 'ERC-20' as const,
   value: 1,
+  fiat_value: '1',
 };
 
-const test = base.extend({
-  page: async({ page }, use) => {
-    const response20 = {
-      items: [ tokensMock.erc20a, tokensMock.erc20b, tokensMock.erc20c, tokensMock.erc20d ],
-      next_page_params: nextPageParams,
-    };
-    const response721 = {
-      items: [ tokensMock.erc721a, tokensMock.erc721b, tokensMock.erc721c ],
-      next_page_params: nextPageParams,
-    };
-    const response1155 = {
-      items: [ tokensMock.erc1155a, tokensMock.erc1155b ],
-      next_page_params: nextPageParams,
-    };
-    const response404 = {
-      items: [ tokensMock.erc404a, tokensMock.erc404b ],
-      next_page_params: nextPageParams,
-    };
+test.beforeEach(async({ mockApiResponse }) => {
+  const response20: AddressTokensResponse = {
+    items: [ tokensMock.erc20a, tokensMock.erc20b, tokensMock.erc20c, tokensMock.erc20d ],
+    next_page_params: nextPageParams,
+  };
+  const response721: AddressTokensResponse = {
+    items: [ tokensMock.erc721a, tokensMock.erc721b, tokensMock.erc721c ],
+    next_page_params: nextPageParams,
+  };
+  const response1155: AddressTokensResponse = {
+    items: [ tokensMock.erc1155a, tokensMock.erc1155b ],
+    next_page_params: nextPageParams,
+  };
+  const response404: AddressTokensResponse = {
+    items: [ tokensMock.erc404a, tokensMock.erc404b ],
+    next_page_params: nextPageParams,
+  };
 
-    await page.route(API_URL_ADDRESS, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(addressMock.withName),
-    }));
-    await page.route(API_URL_TOKENS + '?type=ERC-20', (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(response20),
-    }));
-    await page.route(API_URL_TOKENS + '?type=ERC-721', (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(response721),
-    }));
-    await page.route(API_URL_TOKENS + '?type=ERC-1155', (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(response1155),
-    }));
-    await page.route(API_URL_TOKENS + '?type=ERC-404', (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(response404),
-    }));
-    await page.route(API_URL_NFT, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(tokensMock.nfts),
-    }));
-    await page.route(API_URL_COLLECTIONS, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(tokensMock.collections),
-    }));
-
-    use(page);
-  },
+  await mockApiResponse('address', addressMock.validator, { pathParams: { hash: ADDRESS_HASH } });
+  await mockApiResponse('address_tokens', response20, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-20' } });
+  await mockApiResponse('address_tokens', response721, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-721' } });
+  await mockApiResponse('address_tokens', response1155, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-1155' } });
+  await mockApiResponse('address_tokens', response404, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-404' } });
+  await mockApiResponse('address_nfts', tokensMock.nfts, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: [] } });
+  await mockApiResponse('address_collections', tokensMock.collections, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: [] } });
 });
 
-test('erc20 +@dark-mode', async({ mount }) => {
+test('erc20 +@dark-mode', async({ render }) => {
   const hooksConfig = {
     router: {
       query: { hash: ADDRESS_HASH, tab: 'tokens_erc20' },
@@ -83,18 +55,17 @@ test('erc20 +@dark-mode', async({ mount }) => {
     },
   };
 
-  const component = await mount(
-    <TestApp>
-      <Box h={{ base: '134px', lg: 6 }}/>
+  const component = await render(
+    <Box pt={{ base: '134px', lg: 6 }}>
       <AddressTokens/>
-    </TestApp>,
+    </Box>,
     { hooksConfig },
   );
 
   await expect(component).toHaveScreenshot();
 });
 
-test('collections +@dark-mode', async({ mount }) => {
+test('collections +@dark-mode', async({ render }) => {
   const hooksConfig = {
     router: {
       query: { hash: ADDRESS_HASH, tab: 'tokens_nfts' },
@@ -102,18 +73,17 @@ test('collections +@dark-mode', async({ mount }) => {
     },
   };
 
-  const component = await mount(
-    <TestApp>
-      <Box h={{ base: '134px', lg: 6 }}/>
+  const component = await render(
+    <Box pt={{ base: '134px', lg: 6 }}>
       <AddressTokens/>
-    </TestApp>,
+    </Box>,
     { hooksConfig },
   );
 
   await expect(component).toHaveScreenshot();
 });
 
-test('nfts +@dark-mode', async({ mount }) => {
+test('nfts +@dark-mode', async({ render }) => {
   const hooksConfig = {
     router: {
       query: { hash: ADDRESS_HASH, tab: 'tokens_nfts' },
@@ -121,11 +91,10 @@ test('nfts +@dark-mode', async({ mount }) => {
     },
   };
 
-  const component = await mount(
-    <TestApp>
-      <Box h={{ base: '134px', lg: 6 }}/>
+  const component = await render(
+    <Box pt={{ base: '134px', lg: 6 }}>
       <AddressTokens/>
-    </TestApp>,
+    </Box>,
     { hooksConfig },
   );
 
@@ -137,7 +106,7 @@ test('nfts +@dark-mode', async({ mount }) => {
 test.describe('mobile', () => {
   test.use({ viewport: devices['iPhone 13 Pro'].viewport });
 
-  test('erc20', async({ mount }) => {
+  test('erc20', async({ render }) => {
     const hooksConfig = {
       router: {
         query: { hash: ADDRESS_HASH, tab: 'tokens_erc20' },
@@ -145,18 +114,17 @@ test.describe('mobile', () => {
       },
     };
 
-    const component = await mount(
-      <TestApp>
-        <Box h={{ base: '134px', lg: 6 }}/>
+    const component = await render(
+      <Box pt={{ base: '134px', lg: 6 }}>
         <AddressTokens/>
-      </TestApp>,
+      </Box>,
       { hooksConfig },
     );
 
     await expect(component).toHaveScreenshot();
   });
 
-  test('nfts', async({ mount }) => {
+  test('nfts', async({ render }) => {
     const hooksConfig = {
       router: {
         query: { hash: ADDRESS_HASH, tab: 'tokens_nfts' },
@@ -164,11 +132,10 @@ test.describe('mobile', () => {
       },
     };
 
-    const component = await mount(
-      <TestApp>
-        <Box h={{ base: '134px', lg: 6 }}/>
+    const component = await render(
+      <Box pt={{ base: '134px', lg: 6 }}>
         <AddressTokens/>
-      </TestApp>,
+      </Box>,
       { hooksConfig },
     );
 
@@ -177,7 +144,7 @@ test.describe('mobile', () => {
     await expect(component).toHaveScreenshot();
   });
 
-  test('collections', async({ mount }) => {
+  test('collections', async({ render }) => {
     const hooksConfig = {
       router: {
         query: { hash: ADDRESS_HASH, tab: 'tokens_nfts' },
@@ -185,11 +152,10 @@ test.describe('mobile', () => {
       },
     };
 
-    const component = await mount(
-      <TestApp>
-        <Box h={{ base: '134px', lg: 6 }}/>
+    const component = await render(
+      <Box pt={{ base: '134px', lg: 6 }}>
         <AddressTokens/>
-      </TestApp>,
+      </Box>,
       { hooksConfig },
     );
 
@@ -197,13 +163,10 @@ test.describe('mobile', () => {
   });
 });
 
-base.describe('update balances via socket', () => {
-  const test = base.extend<socketServer.SocketServerFixture>({
-    createSocket: socketServer.createSocket,
-  });
+test.describe('update balances via socket', () => {
   test.describe.configure({ mode: 'serial' });
 
-  test('', async({ mount, page, createSocket }) => {
+  test('', async({ render, page, createSocket, mockApiResponse }) => {
     test.slow();
 
     const hooksConfig = {
@@ -230,41 +193,23 @@ base.describe('update balances via socket', () => {
       next_page_params: null,
     };
 
-    await page.route(API_URL_ADDRESS, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(addressMock.validator),
-    }));
-    await page.route(API_URL_TOKENS + '?type=ERC-20', (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(response20),
-    }));
-    await page.route(API_URL_TOKENS + '?type=ERC-721', (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(response721),
-    }));
-    await page.route(API_URL_TOKENS + '?type=ERC-1155', (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(response1155),
-    }));
-    await page.route(API_URL_TOKENS + '?type=ERC-404', (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(response404),
-    }));
+    const erc20ApiUrl = await mockApiResponse('address_tokens', response20, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-20' } });
+    const erc721ApiUrl = await mockApiResponse('address_tokens', response721, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-721' } });
+    const erc1155ApiUrl = await mockApiResponse('address_tokens', response1155, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-1155' } });
+    const erc404ApiUrl = await mockApiResponse('address_tokens', response404, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-404' } });
 
-    const component = await mount(
-      <TestApp withSocket>
-        <Box>
-          <Box h={{ base: '134px', lg: 6 }}/>
-          <AddressTokens/>
-        </Box>
-      </TestApp>,
+    const component = await render(
+      <Box pt={{ base: '134px', lg: 6 }}>
+        <AddressTokens/>
+      </Box>,
       { hooksConfig },
+      { withSocket: true },
     );
 
-    await page.waitForResponse(API_URL_TOKENS + '?type=ERC-20');
-    await page.waitForResponse(API_URL_TOKENS + '?type=ERC-721');
-    await page.waitForResponse(API_URL_TOKENS + '?type=ERC-1155');
-    await page.waitForResponse(API_URL_TOKENS + '?type=ERC-404');
+    await page.waitForResponse(erc20ApiUrl);
+    await page.waitForResponse(erc721ApiUrl);
+    await page.waitForResponse(erc1155ApiUrl);
+    await page.waitForResponse(erc404ApiUrl);
 
     await expect(component).toHaveScreenshot();
 

ui/address/AddressTxs.pw.tsx

@@ -1,84 +1,78 @@
 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 { test, expect } from 'playwright/lib';
+import * as pwConfig from 'playwright/utils/config';
 
 import AddressTxs from './AddressTxs';
 
 const CURRENT_ADDRESS = '0xd789a607CEac2f0E14867de4EB15b15C9FFB5859';
 
-const API_URL = buildApiUrl('address_txs', { hash: CURRENT_ADDRESS });
-
 const hooksConfig = {
   router: {
     query: { hash: CURRENT_ADDRESS },
   },
 };
+const DEFAULT_PAGINATION = { block_number: 1, index: 1, items_count: 1 };
 
-base.describe('base view', () => {
+test.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,
-          hash: '0x62d597ebcf3e8d60096dd0363bc2f0f5e2df27ba1dacd696c51aa7c9409f3194',
-        },
-      ], next_page_params: { block: 1 } }),
-    }));
-
-    component = await mount(
-      <TestApp>
-        <Box h={{ base: '134px', lg: 6 }}/>
+  test.beforeEach(async({ render, mockApiResponse }) => {
+    await mockApiResponse(
+      'address_txs',
+      {
+        items: [
+          txMock.base,
+          { ...txMock.base, hash: '0x62d597ebcf3e8d60096dd0363bc2f0f5e2df27ba1dacd696c51aa7c9409f3194' },
+        ],
+        next_page_params: DEFAULT_PAGINATION,
+      },
+      { pathParams: { hash: CURRENT_ADDRESS } },
+    );
+    component = await render(
+      <Box pt={{ base: '134px', lg: 6 }}>
         <AddressTxs/>
-      </TestApp>,
+      </Box>,
       { hooksConfig },
     );
   });
 
-  base('+@mobile', async() => {
+  test('+@mobile', async() => {
     await expect(component).toHaveScreenshot();
   });
 
-  base.describe('screen xl', () => {
-    base.use({ viewport: configs.viewport.xl });
+  test.describe('screen xl', () => {
+    test.use({ viewport: pwConfig.viewport.xl });
 
-    base('', async() => {
-      base.slow();
+    test('', async() => {
+      test.slow();
       await expect(component).toHaveScreenshot();
     });
   });
 });
 
-base.describe('socket', () => {
-  const test = base.extend<socketServer.SocketServerFixture>({
-    createSocket: socketServer.createSocket,
-  });
+test.describe('socket', () => {
   // 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,
-      body: JSON.stringify({ items: [ txMock.base ], next_page_params: { block: 1 } }),
-    }));
+  test('without overload', async({ render, mockApiResponse, page, createSocket }) => {
+    await mockApiResponse(
+      'address_txs',
+      { items: [ txMock.base ], next_page_params: DEFAULT_PAGINATION },
+      { pathParams: { hash: CURRENT_ADDRESS } },
+    );
 
-    await mount(
-      <TestApp withSocket>
-        <Box h={{ base: '134px', lg: 6 }}/>
+    await render(
+      <Box pt={{ base: '134px', lg: 6 }}>
         <AddressTxs/>
-      </TestApp>,
+      </Box>,
       { hooksConfig },
+      { withSocket: true },
     );
 
     const socket = await createSocket();
@@ -95,18 +89,19 @@ base.describe('socket', () => {
     expect(itemsCountNew).toBe(4);
   });
 
-  test('with update', async({ mount, page, createSocket }) => {
-    await page.route(API_URL, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify({ items: [ txMock.pending ], next_page_params: { block: 1 } }),
-    }));
+  test('with update', async({ render, mockApiResponse, page, createSocket }) => {
+    await mockApiResponse(
+      'address_txs',
+      { items: [ txMock.pending ], next_page_params: DEFAULT_PAGINATION },
+      { pathParams: { hash: CURRENT_ADDRESS } },
+    );
 
-    await mount(
-      <TestApp withSocket>
-        <Box h={{ base: '134px', lg: 6 }}/>
+    await render(
+      <Box pt={{ base: '134px', lg: 6 }}>
         <AddressTxs/>
-      </TestApp>,
+      </Box>,
       { hooksConfig },
+      { withSocket: true },
     );
 
     const socket = await createSocket();
@@ -123,18 +118,19 @@ base.describe('socket', () => {
     expect(itemsCountNew).toBe(3);
   });
 
-  test('with overload', async({ mount, page, createSocket }) => {
-    await page.route(API_URL, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify({ items: [ txMock.base ], next_page_params: { block: 1 } }),
-    }));
+  test('with overload', async({ render, mockApiResponse, page, createSocket }) => {
+    await mockApiResponse(
+      'address_txs',
+      { items: [ txMock.base ], next_page_params: DEFAULT_PAGINATION },
+      { pathParams: { hash: CURRENT_ADDRESS } },
+    );
 
-    await mount(
-      <TestApp withSocket>
-        <Box h={{ base: '134px', lg: 6 }}/>
+    await render(
+      <Box pt={{ base: '134px', lg: 6 }}>
         <AddressTxs overloadCount={ 2 }/>
-      </TestApp>,
+      </Box>,
       { hooksConfig },
+      { withSocket: true },
     );
 
     const socket = await createSocket();
@@ -154,26 +150,25 @@ base.describe('socket', () => {
     expect(counter?.startsWith('2 ')).toBe(true);
   });
 
-  test('without overload, with filters', async({ mount, page, createSocket }) => {
+  test('without overload, with filters', async({ render, mockApiResponse, page, createSocket }) => {
     const hooksConfigWithFilter = {
       router: {
         query: { hash: CURRENT_ADDRESS, filter: 'from' },
       },
     };
 
-    const API_URL_WITH_FILTER = buildApiUrl('address_txs', { hash: CURRENT_ADDRESS }) + '?filter=from';
+    await mockApiResponse(
+      'address_txs',
+      { items: [ txMock.base ], next_page_params: DEFAULT_PAGINATION },
+      { pathParams: { hash: CURRENT_ADDRESS }, queryParams: { filter: 'from' } },
+    );
 
-    await page.route(API_URL_WITH_FILTER, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify({ items: [ txMock.base ], next_page_params: { block: 1 } }),
-    }));
-
-    await mount(
-      <TestApp withSocket>
-        <Box h={{ base: '134px', lg: 6 }}/>
+    await render(
+      <Box pt={{ base: '134px', lg: 6 }}>
         <AddressTxs/>
-      </TestApp>,
+      </Box>,
       { hooksConfig: hooksConfigWithFilter },
+      { withSocket: true },
     );
 
     const socket = await createSocket();
@@ -190,26 +185,25 @@ base.describe('socket', () => {
     expect(itemsCountNew).toBe(3);
   });
 
-  test('with overload, with filters', async({ mount, page, createSocket }) => {
+  test('with overload, with filters', async({ render, mockApiResponse, page, createSocket }) => {
     const hooksConfigWithFilter = {
       router: {
         query: { hash: CURRENT_ADDRESS, filter: 'from' },
       },
     };
 
-    const API_URL_WITH_FILTER = buildApiUrl('address_txs', { hash: CURRENT_ADDRESS }) + '?filter=from';
+    await mockApiResponse(
+      'address_txs',
+      { items: [ txMock.base ], next_page_params: DEFAULT_PAGINATION },
+      { pathParams: { hash: CURRENT_ADDRESS }, queryParams: { filter: 'from' } },
+    );
 
-    await page.route(API_URL_WITH_FILTER, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify({ items: [ txMock.base ], next_page_params: { block: 1 } }),
-    }));
-
-    await mount(
-      <TestApp withSocket>
-        <Box h={{ base: '134px', lg: 6 }}/>
+    await render(
+      <Box pt={{ base: '134px', lg: 6 }}>
         <AddressTxs overloadCount={ 2 }/>
-      </TestApp>,
+      </Box>,
       { hooksConfig: hooksConfigWithFilter },
+      { withSocket: true },
     );
 
     const socket = await createSocket();

ui/address/SolidityscanReport.pw.tsx

@@ -1,25 +1,35 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as solidityscanReportMock from 'mocks/contract/solidityscanReport';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
+import { test, expect } from 'playwright/lib';
 
 import SolidityscanReport from './SolidityscanReport';
 
 const addressHash = 'hash';
-const REPORT_API_URL = buildApiUrl('contract_solidityscan_report', { hash: addressHash });
 
-test('average report +@dark-mode +@mobile', async({ mount, page }) => {
-  await page.route(REPORT_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(solidityscanReportMock.solidityscanReportAverage),
-  }));
+test('average report +@dark-mode +@mobile', async({ render, mockApiResponse, page }) => {
+  await mockApiResponse(
+    'contract_solidityscan_report',
+    solidityscanReportMock.solidityscanReportAverage,
+    { pathParams: { hash: addressHash } },
+  );
+  const component = await render(<SolidityscanReport hash={ addressHash }/>);
+  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 100, height: 50 } });
 
-  const component = await mount(
-    <TestApp>
-      <SolidityscanReport hash={ addressHash }/>
-    </TestApp>,
+  await component.getByLabel('SolidityScan score').click();
+
+  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 400, height: 500 } });
+});
+
+test('great report', async({ render, mockApiResponse, page }) => {
+  await mockApiResponse(
+    'contract_solidityscan_report',
+    solidityscanReportMock.solidityscanReportGreat,
+    { pathParams: { hash: addressHash } },
+  );
+
+  const component = await render(
+    <SolidityscanReport hash={ addressHash }/>,
   );
 
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 100, height: 50 } });
@@ -29,35 +39,15 @@ test('average report +@dark-mode +@mobile', async({ mount, page }) => {
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 400, height: 500 } });
 });
 
-test('great report', async({ mount, page }) => {
-  await page.route(REPORT_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(solidityscanReportMock.solidityscanReportGreat),
-  }));
+test('low report', async({ render, mockApiResponse, page }) => {
+  await mockApiResponse(
+    'contract_solidityscan_report',
+    solidityscanReportMock.solidityscanReportLow,
+    { pathParams: { hash: addressHash } },
+  );
 
-  const component = await mount(
-    <TestApp>
-      <SolidityscanReport hash={ addressHash }/>
-    </TestApp>,
-  );
-
-  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 100, height: 50 } });
-
-  await component.getByLabel('SolidityScan score').click();
-
-  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 400, height: 500 } });
-});
-
-test('low report', async({ mount, page }) => {
-  await page.route(REPORT_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(solidityscanReportMock.solidityscanReportLow),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <SolidityscanReport hash={ addressHash }/>
-    </TestApp>,
+  const component = await render(
+    <SolidityscanReport hash={ addressHash }/>,
   );
 
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 100, height: 50 } });

ui/address/contract/ABI/form/ContractMethodForm.pw.tsx

@@ -1,9 +1,8 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import type { ContractAbiItem } from '../types';
 
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import ContractMethodForm from './ContractMethodForm';
 
@@ -97,16 +96,14 @@ const data: ContractAbiItem = {
   constant: false,
 };
 
-test('base view +@mobile +@dark-mode', async({ mount }) => {
+test('base view +@mobile +@dark-mode', async({ render }) => {
 
-  const component = await mount(
-    <TestApp>
-      <ContractMethodForm
-        data={ data }
-        onSubmit={ onSubmit }
-        methodType="write"
-      />
-    </TestApp>,
+  const component = await render(
+    <ContractMethodForm
+      data={ data }
+      onSubmit={ onSubmit }
+      methodType="write"
+    />,
   );
 
   // fill top level fields

ui/address/contract/ContractRead.pw.tsx

@@ -1,37 +1,30 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
+import buildUrl from 'lib/api/buildUrl';
 import * as contractMethodsMock from 'mocks/contract/methods';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
+import { test, expect } from 'playwright/lib';
 
 import ContractRead from './ContractRead';
 
 const addressHash = 'hash';
-const CONTRACT_READ_METHODS_API_URL = buildApiUrl('contract_methods_read', { hash: addressHash }) + '?is_custom_abi=false';
-const CONTRACT_QUERY_METHOD_API_URL = buildApiUrl('contract_method_query', { hash: addressHash }) + '?is_custom_abi=false';
 const hooksConfig = {
   router: {
     query: { hash: addressHash },
   },
 };
 
-test('base view +@mobile +@dark-mode', async({ mount, page }) => {
-  await page.route(CONTRACT_READ_METHODS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(contractMethodsMock.read),
-  }));
+test('base view +@mobile +@dark-mode', async({ render, mockApiResponse, page }) => {
+  await mockApiResponse(
+    'contract_methods_read',
+    contractMethodsMock.read,
+    { pathParams: { hash: addressHash }, queryParams: { is_custom_abi: false } },
+  );
+  const CONTRACT_QUERY_METHOD_API_URL = buildUrl('contract_method_query', { hash: addressHash }, { is_custom_abi: false });
   await page.route(CONTRACT_QUERY_METHOD_API_URL, (route) => route.fulfill({
     status: 200,
     body: JSON.stringify(contractMethodsMock.readResultSuccess),
   }));
-
-  const component = await mount(
-    <TestApp>
-      <ContractRead/>
-    </TestApp>,
-    { hooksConfig },
-  );
+  const component = await render(<ContractRead/>, { hooksConfig });
 
   await component.getByText(/expand all/i).click();
 

ui/address/contract/ContractWrite.pw.tsx

@@ -1,34 +1,24 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as contractMethodsMock from 'mocks/contract/methods';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
+import { test, expect } from 'playwright/lib';
 
 import ContractWrite from './ContractWrite';
 
 const addressHash = 'hash';
-const CONTRACT_WRITE_METHODS_API_URL = buildApiUrl('contract_methods_write', { hash: addressHash }) + '?is_custom_abi=false';
 const hooksConfig = {
   router: {
     query: { hash: addressHash },
   },
 };
 
-test('base view +@mobile', async({ mount, page }) => {
-  await page.route(CONTRACT_WRITE_METHODS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(contractMethodsMock.write),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <ContractWrite/>
-    </TestApp>,
-    { hooksConfig },
+test('base view +@mobile', async({ render, mockApiResponse }) => {
+  await mockApiResponse(
+    'contract_methods_write',
+    contractMethodsMock.write,
+    { pathParams: { hash: addressHash }, queryParams: { is_custom_abi: false } },
   );
-
+  const component = await render(<ContractWrite/>, { hooksConfig });
   await component.getByText(/expand all/i).click();
-
   await expect(component).toHaveScreenshot();
 });

ui/address/contract/contractSubmitAuditForm/ContractSubmitAuditForm.pw.tsx

@@ -1,18 +1,11 @@
-import { test, expect } from '@playwright/experimental-ct-react';
+import noop from 'lodash/noop';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import ContractSubmitAuditForm from './ContractSubmitAuditForm';
 
-test('base view', async({ mount }) => {
-
-  const component = await mount(
-    <TestApp>
-      { /* eslint-disable-next-line react/jsx-no-bind */ }
-      <ContractSubmitAuditForm address="hash" onSuccess={ () => {} }/>
-    </TestApp>,
-  );
-
+test('base view', async({ render }) => {
+  const component = await render(<ContractSubmitAuditForm address="hash" onSuccess={ noop }/>);
   await expect(component).toHaveScreenshot();
 });

ui/address/details/AddressQrCode.pw.tsx

@@ -1,18 +1,12 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as addressMock from 'mocks/address/address';
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import AddressQrCode from './AddressQrCode';
 
-test('default view +@mobile +@dark-mode', async({ mount, page }) => {
-  await mount(
-    <TestApp>
-      <AddressQrCode address={ addressMock.withoutName }/>
-    </TestApp>,
-  );
+test('default view +@mobile +@dark-mode', async({ render, page }) => {
+  await render(<AddressQrCode address={ addressMock.withoutName }/>);
   await page.getByRole('button', { name: /qr code/i }).click();
-
   await expect(page).toHaveScreenshot();
 });

ui/address/ensDomains/AddressEnsDomains.pw.tsx

@@ -1,37 +1,37 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import config from 'configs/app';
 import * as ensDomainMock from 'mocks/ens/domain';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
+import { test, expect } from 'playwright/lib';
 
 import AddressEnsDomains from './AddressEnsDomains';
 
-const ADDRESS_HASH = ensDomainMock.ensDomainA.owner?.hash ?? '';
-const ADDRESSES_LOOKUP_API_URL = buildApiUrl('addresses_lookup', { chainId: config.chain.id }) +
-  `?address=${ ADDRESS_HASH }&resolved_to=true&owned_by=true&only_active=true&order=ASC`;
+const ADDRESS_HASH = ensDomainMock.ensDomainA.owner?.hash as string;
 
-test('base view', async({ mount, page }) => {
-  await page.route(ADDRESSES_LOOKUP_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify({
+test('base view', async({ render, mockApiResponse, page }) => {
+  await mockApiResponse(
+    'addresses_lookup',
+    {
       items: [
         ensDomainMock.ensDomainA,
         ensDomainMock.ensDomainB,
         ensDomainMock.ensDomainC,
         ensDomainMock.ensDomainD,
       ],
-    }),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <AddressEnsDomains addressHash={ ADDRESS_HASH } mainDomainName={ ensDomainMock.ensDomainA.name }/>
-    </TestApp>,
+      next_page_params: null,
+    },
+    {
+      pathParams: { chainId: config.chain.id },
+      queryParams: {
+        address: ADDRESS_HASH,
+        resolved_to: true,
+        owned_by: true,
+        only_active: true,
+        order: 'ASC',
+      },
+    },
   );
-
+  const component = await render(<AddressEnsDomains addressHash={ ADDRESS_HASH } mainDomainName={ ensDomainMock.ensDomainA.name }/>);
   await component.getByText('4').click();
-
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 550, height: 350 } });
 });

ui/address/tokenSelect/TokenSelect.pw.tsx

@@ -1,70 +1,39 @@
 import { Flex } from '@chakra-ui/react';
-import { test as base, expect, devices } from '@playwright/experimental-ct-react';
 import React from 'react';
 
+import * as addressMock from 'mocks/address/address';
 import * as tokensMock from 'mocks/address/tokens';
 import { tokenInfoERC20a } from 'mocks/tokens/tokenInfo';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
+import { test, expect, devices } from 'playwright/lib';
 import MockAddressPage from 'ui/address/testUtils/MockAddressPage';
 
 import TokenSelect from './TokenSelect';
 
 const ASSET_URL = tokenInfoERC20a.icon_url as string;
-const TOKENS_ERC20_API_URL = buildApiUrl('address_tokens', { hash: '1' }) + '?type=ERC-20';
-const TOKENS_ERC721_API_URL = buildApiUrl('address_tokens', { hash: '1' }) + '?type=ERC-721';
-const TOKENS_ER1155_API_URL = buildApiUrl('address_tokens', { hash: '1' }) + '?type=ERC-1155';
-const TOKENS_ER404_API_URL = buildApiUrl('address_tokens', { hash: '1' }) + '?type=ERC-404';
-const ADDRESS_API_URL = buildApiUrl('address', { hash: '1' });
+const ADDRESS_HASH = addressMock.hash;
 const hooksConfig = {
   router: {
-    query: { hash: '1' },
+    query: { hash: ADDRESS_HASH },
   },
 };
 const CLIPPING_AREA = { x: 0, y: 0, width: 360, height: 500 };
 
-const test = base.extend({
-  page: async({ page }, use) => {
-    await page.route(ASSET_URL, (route) => {
-      return route.fulfill({
-        status: 200,
-        path: './playwright/mocks/image_s.jpg',
-      });
-    });
-    await page.route(ADDRESS_API_URL, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify({ hash: '1' }),
-    }), { times: 1 });
-    await page.route(TOKENS_ERC20_API_URL, async(route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(tokensMock.erc20List),
-    }), { times: 1 });
-    await page.route(TOKENS_ERC721_API_URL, async(route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(tokensMock.erc721List),
-    }), { times: 1 });
-    await page.route(TOKENS_ER1155_API_URL, async(route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(tokensMock.erc1155List),
-    }), { times: 1 });
-    await page.route(TOKENS_ER404_API_URL, async(route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(tokensMock.erc404List),
-    }), { times: 1 });
-
-    use(page);
-  },
+test.beforeEach(async({ mockApiResponse, mockAssetResponse }) => {
+  await mockAssetResponse(ASSET_URL, './playwright/mocks/image_s.jpg');
+  await mockApiResponse('address', addressMock.validator, { pathParams: { hash: ADDRESS_HASH }, times: 1 });
+  await mockApiResponse('address_tokens', tokensMock.erc20List, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-20' }, times: 1 });
+  await mockApiResponse('address_tokens', tokensMock.erc721List, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-721' }, times: 1 });
+  await mockApiResponse('address_tokens', tokensMock.erc1155List, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-1155' }, times: 1 });
+  await mockApiResponse('address_tokens', tokensMock.erc404List, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-404' }, times: 1 });
 });
 
-test('base view +@dark-mode', async({ mount, page }) => {
-  await mount(
-    <TestApp>
-      <MockAddressPage>
-        <Flex>
-          <TokenSelect/>
-        </Flex>
-      </MockAddressPage>
-    </TestApp>,
+test('base view +@dark-mode', async({ render, page }) => {
+  await render(
+    <MockAddressPage>
+      <Flex>
+        <TokenSelect/>
+      </Flex>
+    </MockAddressPage>,
     { hooksConfig },
   );
 
@@ -81,15 +50,13 @@ test('base view +@dark-mode', async({ mount, page }) => {
 test.describe('mobile', () => {
   test.use({ viewport: devices['iPhone 13 Pro'].viewport });
 
-  test('base view', async({ mount, page }) => {
-    await mount(
-      <TestApp>
-        <MockAddressPage>
-          <Flex>
-            <TokenSelect/>
-          </Flex>
-        </MockAddressPage>
-      </TestApp>,
+  test('base view', async({ render, page }) => {
+    await render(
+      <MockAddressPage>
+        <Flex>
+          <TokenSelect/>
+        </Flex>
+      </MockAddressPage>,
       { hooksConfig },
     );
 
@@ -100,15 +67,13 @@ test.describe('mobile', () => {
   });
 });
 
-test('sort', async({ mount, page }) => {
-  await mount(
-    <TestApp>
-      <MockAddressPage>
-        <Flex>
-          <TokenSelect/>
-        </Flex>
-      </MockAddressPage>
-    </TestApp>,
+test('sort', async({ render, page }) => {
+  await render(
+    <MockAddressPage>
+      <Flex>
+        <TokenSelect/>
+      </Flex>
+    </MockAddressPage>,
     { hooksConfig },
   );
   await page.getByRole('button', { name: /select/i }).click();
@@ -123,15 +88,13 @@ test('sort', async({ mount, page }) => {
   await expect(page).toHaveScreenshot({ clip: CLIPPING_AREA });
 });
 
-test('filter', async({ mount, page }) => {
-  await mount(
-    <TestApp>
-      <MockAddressPage>
-        <Flex>
-          <TokenSelect/>
-        </Flex>
-      </MockAddressPage>
-    </TestApp>,
+test('filter', async({ render, page }) => {
+  await render(
+    <MockAddressPage>
+      <Flex>
+        <TokenSelect/>
+      </Flex>
+    </MockAddressPage>,
     { hooksConfig },
   );
   await page.getByRole('button', { name: /select/i }).click();
@@ -140,42 +103,24 @@ test('filter', async({ mount, page }) => {
   await expect(page).toHaveScreenshot({ clip: CLIPPING_AREA });
 });
 
-base('long values', async({ mount, page }) => {
-  await page.route(ASSET_URL, (route) => {
-    return route.fulfill({
-      status: 200,
-      path: './playwright/mocks/image_s.jpg',
-    });
-  });
-  await page.route(ADDRESS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify({ hash: '1' }),
-  }), { times: 1 });
-  await page.route(TOKENS_ERC20_API_URL, async(route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify({ items: [ tokensMock.erc20LongSymbol, tokensMock.erc20BigAmount ] }),
-  }), { times: 1 });
-  await page.route(TOKENS_ERC721_API_URL, async(route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify({ items: [ tokensMock.erc721LongSymbol ] }),
-  }), { times: 1 });
-  await page.route(TOKENS_ER1155_API_URL, async(route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify({ items: [ tokensMock.erc1155LongId ] }),
-  }), { times: 1 });
-  await page.route(TOKENS_ER404_API_URL, async(route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(tokensMock.erc404List),
-  }), { times: 1 });
+test('long values', async({ render, page, mockApiResponse }) => {
+  await mockApiResponse('address_tokens', {
+    items: [ tokensMock.erc20LongSymbol, tokensMock.erc20BigAmount ], next_page_params: null,
+  }, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-20' }, times: 1 });
+  await mockApiResponse('address_tokens', {
+    items: [ tokensMock.erc721LongSymbol ], next_page_params: null,
+  }, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-721' }, times: 1 });
+  await mockApiResponse('address_tokens', {
+    items: [ tokensMock.erc1155LongId ], next_page_params: null,
+  }, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-1155' }, times: 1 });
+  await mockApiResponse('address_tokens', tokensMock.erc404List, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-404' }, times: 1 });
 
-  await mount(
-    <TestApp>
-      <MockAddressPage>
-        <Flex>
-          <TokenSelect/>
-        </Flex>
-      </MockAddressPage>
-    </TestApp>,
+  await render(
+    <MockAddressPage>
+      <Flex>
+        <TokenSelect/>
+      </Flex>
+    </MockAddressPage>,
     { hooksConfig },
   );
   await page.getByRole('button', { name: /select/i }).click();

ui/addressVerification/steps/AddressVerificationStepAddress.pw.tsx

@@ -1,35 +1,28 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
+import buildUrl from 'lib/api/buildUrl';
 import * as mocks from 'mocks/account/verifiedAddresses';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
+import { test, expect } from 'playwright/lib';
 
 import AddressVerificationStepAddress from './AddressVerificationStepAddress';
 
-const CHECK_ADDRESS_URL = buildApiUrl('address_verification', { chainId: '1', type: ':prepare' });
+const CHECK_ADDRESS_URL = buildUrl('address_verification', { chainId: '1', type: ':prepare' });
 
-test('base view', async({ mount, page }) => {
+test('base view', async({ render, page }) => {
   await page.route(CHECK_ADDRESS_URL, (route) => route.fulfill({
     status: 200,
     body: JSON.stringify(mocks.ADDRESS_CHECK_RESPONSE.SUCCESS),
   }));
-
   const props = {
     onContinue: () => {},
     defaultAddress: mocks.VERIFIED_ADDRESS.NEW_ITEM.contractAddress,
   };
 
-  await mount(
-    <TestApp>
-      <AddressVerificationStepAddress { ...props }/>
-    </TestApp>,
-  );
-
+  await render(<AddressVerificationStepAddress { ...props }/>);
   await expect(page).toHaveScreenshot();
 });
 
-test('SOURCE_CODE_NOT_VERIFIED_ERROR view +@mobile', async({ mount, page }) => {
+test('SOURCE_CODE_NOT_VERIFIED_ERROR view +@mobile', async({ render, page }) => {
   await page.route(CHECK_ADDRESS_URL, (route) => route.fulfill({
     status: 200,
     body: JSON.stringify(mocks.ADDRESS_CHECK_RESPONSE.SOURCE_CODE_NOT_VERIFIED_ERROR),
@@ -39,11 +32,7 @@ test('SOURCE_CODE_NOT_VERIFIED_ERROR view +@mobile', async({ mount, page }) => {
     onContinue: () => {},
   };
 
-  await mount(
-    <TestApp>
-      <AddressVerificationStepAddress { ...props }/>
-    </TestApp>,
-  );
+  await render(<AddressVerificationStepAddress { ...props }/>);
 
   const addressInput = page.getByLabel(/smart contract address/i);
   await addressInput.focus();

ui/addressVerification/steps/AddressVerificationStepSignature.pw.tsx

@@ -1,15 +1,14 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
+import buildUrl from 'lib/api/buildUrl';
 import * as mocks from 'mocks/account/verifiedAddresses';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
+import { test, expect } from 'playwright/lib';
 
 import AddressVerificationStepSignature from './AddressVerificationStepSignature';
 
-const VERIFY_ADDRESS_URL = buildApiUrl('address_verification', { chainId: '1', type: ':verify' });
+const VERIFY_ADDRESS_URL = buildUrl('address_verification', { chainId: '1', type: ':verify' });
 
-test('base view', async({ mount, page }) => {
+test('base view', async({ render, page }) => {
   await page.route(VERIFY_ADDRESS_URL, (route) => route.fulfill({
     status: 200,
     body: JSON.stringify(mocks.ADDRESS_VERIFY_RESPONSE.SUCCESS),
@@ -22,16 +21,11 @@ test('base view', async({ mount, page }) => {
     signingMessage: mocks.ADDRESS_CHECK_RESPONSE.SUCCESS.result.signingMessage,
   };
 
-  await mount(
-    <TestApp>
-      <AddressVerificationStepSignature { ...props }/>
-    </TestApp>,
-  );
-
+  await render(<AddressVerificationStepSignature { ...props }/>);
   await expect(page).toHaveScreenshot();
 });
 
-test('INVALID_SIGNER_ERROR view +@mobile', async({ mount, page }) => {
+test('INVALID_SIGNER_ERROR view +@mobile', async({ render, page }) => {
   await page.route(VERIFY_ADDRESS_URL, (route) => route.fulfill({
     status: 200,
     body: JSON.stringify(mocks.ADDRESS_VERIFY_RESPONSE.INVALID_SIGNER_ERROR),
@@ -44,11 +38,7 @@ test('INVALID_SIGNER_ERROR view +@mobile', async({ mount, page }) => {
     ...mocks.ADDRESS_CHECK_RESPONSE.SUCCESS.result,
   };
 
-  await mount(
-    <TestApp>
-      <AddressVerificationStepSignature { ...props }/>
-    </TestApp>,
-  );
+  await render(<AddressVerificationStepSignature { ...props }/>);
 
   const signatureInput = page.getByLabel(/signature hash/i);
   await signatureInput.fill(mocks.SIGNATURE);

ui/blob/BlobData.pw.tsx

@@ -1,53 +1,31 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import BlobData from './BlobData';
 import imageBlobWithZeroesBytes from './image_with_zeroes.blob';
 
 test.use({ viewport: { width: 500, height: 300 } });
 
-test('text', async({ mount }) => {
+test('text', async({ render }) => {
   // eslint-disable-next-line max-len
   const data = '0xE2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A280E2A3A4E2A1B6E2A0BFE2A0BFE2A0B7E2A3B6E2A384E2A080E2A080E2A080E2A080E2A0800AE2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A3B0E2A1BFE2A081E2A080E2A080E2A280E2A380E2A180E2A099E2A3B7E2A180E2A080E2A080E2A0800AE2A080E2A080E2A080E2A180E2A080E2A080E2A080E2A080E2A080E2A2A0E2A3BFE2A081E2A080E2A080E2A080E2A098E2A0BFE2A083E2A080E2A2B8E2A3BFE2A3BFE2A3BFE2A3BF0AE2A080E2A3A0E2A1BFE2A09BE2A2B7E2A3A6E2A180E2A080E2A080E2A088E2A3BFE2A184E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A3B8E2A3BFE2A3BFE2A3BFE2A09F0AE2A2B0E2A1BFE2A081E2A080E2A080E2A099E2A2BFE2A3A6E2A3A4E2A3A4E2A3BCE2A3BFE2A384E2A080E2A080E2A080E2A080E2A080E2A2B4E2A19FE2A09BE2A08BE2A081E2A0800AE2A3BFE2A087E2A080E2A080E2A080E2A080E2A080E2A089E2A089E2A089E2A089E2A089E2A081E2A080E2A080E2A080E2A080E2A080E2A088E2A3BFE2A180E2A080E2A080E2A0800AE2A3BFE2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A2B9E2A187E2A080E2A080E2A0800AE2A3BFE2A186E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A3BCE2A187E2A080E2A080E2A0800AE2A0B8E2A3B7E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A2A0E2A1BFE2A080E2A080E2A080E2A0800AE2A080E2A0B9E2A3B7E2A3A4E2A380E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A380E2A3B0E2A1BFE2A081E2A080E2A080E2A080E2A0800AE2A080E2A080E2A080E2A089E2A099E2A09BE2A0BFE2A0B6E2A3B6E2A3B6E2A3B6E2A3B6E2A3B6E2A0B6E2A0BFE2A09FE2A09BE2A089E2A080E2A080E2A080E2A080E2A080E2A080';
-
-  const component = await mount(
-    <TestApp>
-      <BlobData hash="0x01" data={ data }/>
-    </TestApp>,
-  );
-
+  const component = await render(<BlobData hash="0x01" data={ data }/>);
   await expect(component).toHaveScreenshot();
-
   await component.locator('select').selectOption('UTF-8');
-
   await expect(component).toHaveScreenshot();
 });
 
-test('image', async({ mount }) => {
+test('image', async({ render }) => {
   // eslint-disable-next-line max-len
   const data = '0x89504E470D0A1A0A0000000D494844520000003C0000003C0403000000C8D2C4410000000467414D410000B18F0BFC6105000000017352474200AECE1CE900000027504C54454C69712B6CB02A6CB02B6CB02B6CB02B6CB02B6CB02B6CB02B6CB02B6CB02B6CB02B6CB02B6CB0F4205A540000000C74524E5300ED2F788CD91B99475C09B969CFA99D0000004F7A5458745261772070726F66696C65207479706520697074630000789CE3CA2C2849E6520003230B2E630B1323134B9314031320448034C3640323B35420CBD8D4C8C4CCC41CC407CB8048A04A2E0028950EE32A226D1F0000000970485973000084DF000084DF0195C81C33000000F24944415438CB636000018E983367CE482780D90CDA40F6991D0C4820152472A60ACCE6DA03629F4E40929E03961602B39964C09C0624691B24690E88F48461215D03160903B3D962C01C07842C2758C341A80643B0B40484C3646C6C5C78E6E016171723A8E215262EEE31670E161B1B7731304C05AB155EC08002C0D172E6F80206884DBB50651938CF4003FE0CBA4390E3C56064482F53525252C329CD562A2828283A0197340B22AAB0494332C311FCD2C747A547A58996C69998D8F12745B68DA0846C85331B2CEAE8E8681A81D91F8B348C4605D0527B02A4283FA88026CD05163EAAC0900ED21EC9800EC0C2110C002BBA9FE999B920330000000049454E44AE426082';
-
-  const component = await mount(
-    <TestApp>
-      <BlobData hash="0x01" data={ data }/>
-    </TestApp>,
-  );
-
+  const component = await render(<BlobData hash="0x01" data={ data }/>);
   await expect(component).toHaveScreenshot();
-
   await component.locator('select').selectOption('Base64');
-
   await expect(component).toHaveScreenshot();
 });
 
-test('image blob with zeroes bytes', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <BlobData hash="0x01" data={ imageBlobWithZeroesBytes }/>
-    </TestApp>,
-  );
-
+test('image blob with zeroes bytes', async({ render }) => {
+  const component = await render(<BlobData hash="0x01" data={ imageBlobWithZeroesBytes }/>);
   await expect(component).toHaveScreenshot();
 });

ui/contractVerification/ContractVerificationForm.pw.tsx

@@ -1,10 +1,9 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import type { SmartContractVerificationConfig } from 'types/api/contract';
 
 import * as socketServer from 'playwright/fixtures/socketServer';
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import ContractVerificationForm from './ContractVerificationForm';
 
@@ -72,13 +71,8 @@ const formConfig: SmartContractVerificationConfig = {
   },
 };
 
-test('flatten source code method +@dark-mode +@mobile', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <ContractVerificationForm config={ formConfig } hash={ hash }/>
-    </TestApp>,
-    { hooksConfig },
-  );
+test('flatten source code method +@dark-mode +@mobile', async({ render, page }) => {
+  const component = await render(<ContractVerificationForm config={ formConfig } hash={ hash }/>, { hooksConfig });
 
   // select license
   await component.getByLabel(/contract license/i).focus();
@@ -96,13 +90,8 @@ test('flatten source code method +@dark-mode +@mobile', async({ mount, page }) =
   await expect(component).toHaveScreenshot();
 });
 
-test('standard input json method', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <ContractVerificationForm config={ formConfig } hash={ hash }/>
-    </TestApp>,
-    { hooksConfig },
-  );
+test('standard input json method', async({ render, page }) => {
+  const component = await render(<ContractVerificationForm config={ formConfig } hash={ hash }/>, { hooksConfig });
 
   // select method
   await component.getByLabel(/verification method/i).focus();
@@ -113,17 +102,13 @@ test('standard input json method', async({ mount, page }) => {
 });
 
 test.describe('sourcify', () => {
-  const testWithSocket = test.extend<socketServer.SocketServerFixture>({
-    createSocket: socketServer.createSocket,
-  });
-  testWithSocket.describe.configure({ mode: 'serial', timeout: 20_000 });
+  test.describe.configure({ mode: 'serial', timeout: 20_000 });
 
-  testWithSocket('with multiple contracts', async({ mount, page, createSocket }) => {
-    const component = await mount(
-      <TestApp withSocket>
-        <ContractVerificationForm config={ formConfig } hash={ hash }/>
-      </TestApp>,
+  test('with multiple contracts', async({ render, page, createSocket }) => {
+    const component = await render(
+      <ContractVerificationForm config={ formConfig } hash={ hash }/>,
       { hooksConfig },
+      { withSocket: true },
     );
 
     // select method
@@ -163,13 +148,8 @@ test.describe('sourcify', () => {
   });
 });
 
-test('multi-part files method', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <ContractVerificationForm config={ formConfig } hash={ hash }/>
-    </TestApp>,
-    { hooksConfig },
-  );
+test('multi-part files method', async({ render, page }) => {
+  const component = await render(<ContractVerificationForm config={ formConfig } hash={ hash }/>, { hooksConfig });
 
   // select method
   await component.getByLabel(/verification method/i).focus();
@@ -179,13 +159,8 @@ test('multi-part files method', async({ mount, page }) => {
   await expect(component).toHaveScreenshot();
 });
 
-test('vyper contract method', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <ContractVerificationForm config={ formConfig } hash={ hash }/>
-    </TestApp>,
-    { hooksConfig },
-  );
+test('vyper contract method', async({ render, page }) => {
+  const component = await render(<ContractVerificationForm config={ formConfig } hash={ hash }/>, { hooksConfig });
 
   // select method
   await component.getByLabel(/verification method/i).focus();
@@ -195,13 +170,8 @@ test('vyper contract method', async({ mount, page }) => {
   await expect(component).toHaveScreenshot();
 });
 
-test('vyper multi-part method', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <ContractVerificationForm config={ formConfig } hash={ hash }/>
-    </TestApp>,
-    { hooksConfig },
-  );
+test('vyper multi-part method', async({ render, page }) => {
+  const component = await render(<ContractVerificationForm config={ formConfig } hash={ hash }/>, { hooksConfig });
 
   // select method
   await component.getByLabel(/verification method/i).focus();
@@ -211,13 +181,8 @@ test('vyper multi-part method', async({ mount, page }) => {
   await expect(component).toHaveScreenshot();
 });
 
-test('vyper vyper-standard-input method', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <ContractVerificationForm config={ formConfig } hash={ hash }/>
-    </TestApp>,
-    { hooksConfig },
-  );
+test('vyper vyper-standard-input method', async({ render, page }) => {
+  const component = await render(<ContractVerificationForm config={ formConfig } hash={ hash }/>, { hooksConfig });
 
   // select method
   await component.getByLabel(/verification method/i).focus();

ui/gasTracker/GasTrackerPriceSnippet.pw.tsx

@@ -1,14 +1,16 @@
 import React from 'react';
 
+import type { GasPriceInfo } from 'types/api/stats';
+
 import * as statsMock from 'mocks/stats/index';
 import { test, expect } from 'playwright/lib';
-import * as configs from 'playwright/utils/configs';
+import * as pwConfig from 'playwright/utils/config';
 
 import GasTrackerPriceSnippet from './GasTrackerPriceSnippet';
 
-test.use({ viewport: configs.viewport.md });
+test.use({ viewport: pwConfig.viewport.md });
 
-const data = statsMock.base.gas_prices.fast;
+const data = statsMock.base.gas_prices?.fast as GasPriceInfo;
 const clip = { x: 0, y: 0, width: 334, height: 204 };
 
 test('with usd as primary unit +@dark-mode', async({ render, page }) => {

ui/home/LatestTxs.pw.tsx

@@ -1,10 +1,8 @@
-import { test as base, expect, devices } from '@playwright/experimental-ct-react';
 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 { test as base, expect, devices } from 'playwright/lib';
 
 import LatestTxs from './LatestTxs';
 
@@ -14,44 +12,28 @@ export const test = base.extend<socketServer.SocketServerFixture>({
 
 test.describe('mobile', () => {
   test.use({ viewport: devices['iPhone 13 Pro'].viewport });
-  test('default view', async({ mount, page }) => {
-    await page.route(buildApiUrl('homepage_txs'), (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify([
-        txMock.base,
-        txMock.withContractCreation,
-        txMock.withTokenTransfer,
-        txMock.withWatchListNames,
-      ]),
-    }));
-
-    const component = await mount(
-      <TestApp>
-        <LatestTxs/>
-      </TestApp>,
-    );
-
-    await expect(component).toHaveScreenshot();
-  });
-});
-
-test('default view +@dark-mode', async({ mount, page }) => {
-  await page.route(buildApiUrl('homepage_txs'), (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify([
+  test('default view', async({ render, mockApiResponse }) => {
+    await mockApiResponse('homepage_txs', [
       txMock.base,
       txMock.withContractCreation,
       txMock.withTokenTransfer,
       txMock.withWatchListNames,
-    ]),
-  }));
+    ]);
 
-  const component = await mount(
-    <TestApp>
-      <LatestTxs/>
-    </TestApp>,
-  );
+    const component = await render(<LatestTxs/>);
+    await expect(component).toHaveScreenshot();
+  });
+});
 
+test('default view +@dark-mode', async({ render, mockApiResponse }) => {
+  await mockApiResponse('homepage_txs', [
+    txMock.base,
+    txMock.withContractCreation,
+    txMock.withTokenTransfer,
+    txMock.withWatchListNames,
+  ]);
+
+  const component = await render(<LatestTxs/>);
   await expect(component).toHaveScreenshot();
 });
 
@@ -65,27 +47,17 @@ test.describe('socket', () => {
     },
   };
 
-  test('new item', async({ mount, page, createSocket }) => {
-    await page.route(buildApiUrl('homepage_txs'), (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify([
-        txMock.base,
-        txMock.withContractCreation,
-        txMock.withTokenTransfer,
-      ]),
-    }));
-
-    const component = await mount(
-      <TestApp withSocket>
-        <LatestTxs/>
-      </TestApp>,
-      { hooksConfig },
-    );
+  test('new item', async({ render, mockApiResponse, createSocket }) => {
+    await mockApiResponse('homepage_txs', [
+      txMock.base,
+      txMock.withContractCreation,
+      txMock.withTokenTransfer,
+    ]);
 
+    const component = await render(<LatestTxs/>, { hooksConfig }, { withSocket: true });
     const socket = await createSocket();
     const channel = await socketServer.joinChannel(socket, 'transactions:new_transaction');
     socketServer.sendMessage(socket, channel, 'transaction', { transaction: 1 });
-
     await expect(component).toHaveScreenshot();
   });
 });

ui/home/Stats.pw.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 
 import * as statsMock from 'mocks/stats/index';
 import { test, expect } from 'playwright/lib';
-import * as configs from 'playwright/utils/configs';
+import * as pwConfig from 'playwright/utils/config';
 
 import Stats from './Stats';
 
@@ -20,7 +20,7 @@ test.describe('all items', () => {
   });
 
   test.describe('screen xl', () => {
-    test.use({ viewport: configs.viewport.xl });
+    test.use({ viewport: pwConfig.viewport.xl });
 
     test('', async() => {
       await expect(component).toHaveScreenshot();

ui/home/indicators/ChainIndicators.pw.tsx

@@ -1,44 +1,26 @@
-import { test as base, expect } from '@playwright/experimental-ct-react';
 import type { Locator } from '@playwright/test';
 import React from 'react';
 
 import * as dailyTxsMock from 'mocks/stats/daily_txs';
 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 { test, expect } from 'playwright/lib';
 
 import ChainIndicators from './ChainIndicators';
 
-const STATS_API_URL = buildApiUrl('stats');
-const TX_CHART_API_URL = buildApiUrl('stats_charts_txs');
-
-const test = base.extend({
-  context: contextWithEnvs([
-    { name: 'NEXT_PUBLIC_HOMEPAGE_CHARTS', value: '["daily_txs","coin_price","secondary_coin_price","market_cap","tvl"]' },
-    { name: 'NEXT_PUBLIC_NETWORK_SECONDARY_COIN_SYMBOL', value: 'DUCK' },
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  ]) as any,
+test.beforeEach(async({ mockEnvs }) => {
+  await mockEnvs([
+    [ 'NEXT_PUBLIC_HOMEPAGE_CHARTS', '["daily_txs","coin_price","secondary_coin_price","market_cap","tvl"]' ],
+    [ 'NEXT_PUBLIC_NETWORK_SECONDARY_COIN_SYMBOL', 'DUCK' ],
+  ]);
 });
 
 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.withSecondaryCoin),
-    }));
-    await page.route(TX_CHART_API_URL, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(dailyTxsMock.base),
-    }));
-
-    component = await mount(
-      <TestApp>
-        <ChainIndicators/>
-      </TestApp>,
-    );
+  test.beforeEach(async({ page, mockApiResponse, render }) => {
+    await mockApiResponse('stats', statsMock.withSecondaryCoin);
+    await mockApiResponse('stats_charts_txs', dailyTxsMock.base);
+    component = await render(<ChainIndicators/>);
     await page.hover('.ChartOverlay', { position: { x: 100, y: 100 } });
   });
 
@@ -55,43 +37,19 @@ test.describe('daily txs chart', () => {
   });
 });
 
-test('partial data', 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.partialData),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <ChainIndicators/>
-    </TestApp>,
-  );
+test('partial data', async({ page, mockApiResponse, render }) => {
+  await mockApiResponse('stats', statsMock.base);
+  await mockApiResponse('stats_charts_txs', dailyTxsMock.partialData);
+  const component = await render(<ChainIndicators/>);
   await page.waitForFunction(() => {
     return document.querySelector('path[data-name="gradient-chart-area"]')?.getAttribute('opacity') === '1';
   });
-
   await expect(component).toHaveScreenshot();
 });
 
-test('no data', async({ page, mount }) => {
-  await page.route(STATS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(statsMock.noChartData),
-  }));
-  await page.route(TX_CHART_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(dailyTxsMock.noData),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <ChainIndicators/>
-    </TestApp>,
-  );
-
+test('no data', async({ mockApiResponse, render }) => {
+  await mockApiResponse('stats', statsMock.noChartData);
+  await mockApiResponse('stats_charts_txs', dailyTxsMock.noData);
+  const component = await render(<ChainIndicators/>);
   await expect(component).toHaveScreenshot();
 });

ui/marketplace/MarketplaceAppInfo.pw.tsx

@@ -1,35 +1,22 @@
-import { test, expect, devices } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import { apps as appsMock } from 'mocks/apps/apps';
-import TestApp from 'playwright/TestApp';
+import { test, expect, devices } from 'playwright/lib';
 
 import MarketplaceAppInfo from './MarketplaceAppInfo';
 
-test('base view +@dark-mode', async({ mount, page }) => {
-  await mount(
-    <TestApp>
-      <MarketplaceAppInfo data={ appsMock[0] }/>
-    </TestApp>,
-  );
-
+test('base view +@dark-mode', async({ render, page }) => {
+  await render(<MarketplaceAppInfo data={ appsMock[0] }/>);
   await page.getByText('Info').click();
-
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 500, height: 400 } });
 });
 
 test.describe('mobile', () => {
   test.use({ viewport: devices['iPhone 13 Pro'].viewport });
 
-  test('base view', async({ mount, page }) => {
-    await mount(
-      <TestApp>
-        <MarketplaceAppInfo data={ appsMock[0] }/>
-      </TestApp>,
-    );
-
+  test('base view', async({ render, page }) => {
+    await render(<MarketplaceAppInfo data={ appsMock[0] }/>);
     await page.getByLabel('Show project info').click();
-
     await expect(page).toHaveScreenshot();
   });
 });

ui/marketplace/MarketplaceAppModal.pw.tsx

@@ -1,10 +1,9 @@
-import { test, expect, devices } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import type { MarketplaceAppWithSecurityReport } from 'types/client/marketplace';
 
 import { apps as appsMock } from 'mocks/apps/apps';
-import TestApp from 'playwright/TestApp';
+import { test, expect, devices } from 'playwright/lib';
 
 import MarketplaceAppModal from './MarketplaceAppModal';
 
@@ -16,20 +15,9 @@ const props = {
   isFavorite: false,
 };
 
-const testFn: Parameters<typeof test>[1] = async({ mount, page }) => {
-  await page.route(appsMock[0].logo, (route) =>
-    route.fulfill({
-      status: 200,
-      path: './playwright/mocks/image_s.jpg',
-    }),
-  );
-
-  await mount(
-    <TestApp>
-      <MarketplaceAppModal { ...props }/>
-    </TestApp>,
-  );
-
+const testFn: Parameters<typeof test>[1] = async({ render, page, mockAssetResponse }) => {
+  await mockAssetResponse(appsMock[0].logo, './playwright/mocks/image_s.jpg');
+  await render(<MarketplaceAppModal { ...props }/>);
   await expect(page).toHaveScreenshot();
 };
 

ui/pages/Accounts.pw.tsx

@@ -1,16 +1,12 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import type { AddressesResponse } from 'types/api/addresses';
 
 import * as addressMocks from 'mocks/address/address';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
+import { test, expect } from 'playwright/lib';
 
 import Accounts from './Accounts';
 
-const ADDRESSES_API_URL = buildApiUrl('addresses');
-
 const addresses: AddressesResponse = {
   items: [
     {
@@ -32,21 +28,9 @@ const addresses: AddressesResponse = {
   next_page_params: null,
 };
 
-test('base view +@mobile +@dark-mode', async({ mount, page }) => {
-  await page.route(ADDRESSES_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(addresses),
-  }));
-  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-    status: 200,
-    body: '',
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <Accounts/>
-    </TestApp>,
-  );
-
+test('base view +@mobile +@dark-mode', async({ render, mockTextAd, mockApiResponse }) => {
+  await mockTextAd();
+  await mockApiResponse('addresses', addresses);
+  const component = await render(<Accounts/>);
   await expect(component).toHaveScreenshot();
 });

ui/pages/Blob.pw.tsx

@@ -1,68 +1,35 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import * as textAdMock from 'mocks/ad/textAd';
 import * as blobsMock from 'mocks/blobs/blobs';
-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 * as pwConfig from 'playwright/utils/config';
 
 import Blob from './Blob';
 
-const BLOB_API_URL = buildApiUrl('blob', { hash: blobsMock.base1.hash });
 const hooksConfig = {
   router: {
     query: { hash: blobsMock.base1.hash },
   },
 };
 
-test.beforeEach(async({ page }) => {
-  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(textAdMock.duck),
-  }));
-  await page.route(textAdMock.duck.ad.thumbnail, (route) => {
-    return route.fulfill({
-      status: 200,
-      path: './playwright/mocks/image_s.jpg',
-    });
-  });
+test.beforeEach(async({ mockTextAd }) => {
+  await mockTextAd();
 });
 
-test('base view +@mobile +@dark-mode', async({ mount, page }) => {
-  await page.route(BLOB_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(blobsMock.base1),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <Blob/>
-    </TestApp>,
-    { hooksConfig },
-  );
-
+test('base view +@mobile +@dark-mode', async({ render, mockApiResponse, page }) => {
+  await mockApiResponse('blob', blobsMock.base1, { pathParams: { hash: blobsMock.base1.hash } });
+  const component = await render(<Blob/>, { hooksConfig });
   await expect(component).toHaveScreenshot({
-    mask: [ page.locator(configs.adsBannerSelector) ],
-    maskColor: configs.maskColor,
+    mask: [ page.locator(pwConfig.adsBannerSelector) ],
+    maskColor: pwConfig.maskColor,
   });
 });
 
-test('without data', async({ mount, page }) => {
-  await page.route(BLOB_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(blobsMock.withoutData),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <Blob/>
-    </TestApp>,
-    { hooksConfig },
-  );
-
+test('without data', async({ render, mockApiResponse, page }) => {
+  await mockApiResponse('blob', blobsMock.withoutData, { pathParams: { hash: blobsMock.base1.hash } });
+  const component = await render(<Blob/>, { hooksConfig });
   await expect(component).toHaveScreenshot({
-    mask: [ page.locator(configs.adsBannerSelector) ],
-    maskColor: configs.maskColor,
+    mask: [ page.locator(pwConfig.adsBannerSelector) ],
+    maskColor: pwConfig.maskColor,
   });
 });

ui/pages/CsvExport.pw.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import * as addressMock from 'mocks/address/address';
 import * as tokenMock from 'mocks/tokens/tokenInfo';
 import { test, expect } from 'playwright/lib';
-import * as configs from 'playwright/utils/configs';
+import * as pwConfig from 'playwright/utils/config';
 
 import CsvExport from './CsvExport';
 
@@ -20,7 +20,7 @@ test('base view +@mobile +@dark-mode', async({ render, page, mockApiResponse })
 
   await expect(component).toHaveScreenshot({
     mask: [ page.locator('.recaptcha') ],
-    maskColor: configs.maskColor,
+    maskColor: pwConfig.maskColor,
   });
 });
 
@@ -37,6 +37,6 @@ test('token holders', async({ render, page, mockApiResponse }) => {
 
   await expect(component).toHaveScreenshot({
     mask: [ page.locator('.recaptcha') ],
-    maskColor: configs.maskColor,
+    maskColor: pwConfig.maskColor,
   });
 });

ui/pages/GasTracker.pw.tsx

@@ -1,55 +1,28 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import * as textAdMock from 'mocks/ad/textAd';
 import * as statsMock from 'mocks/stats/index';
 import * as statsLineMock from 'mocks/stats/line';
 import * as statsLinesMock from 'mocks/stats/lines';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
+import { test, expect } from 'playwright/lib';
 
 import GasTracker from './GasTracker';
 
-const STATS_LINES_API_URL = buildApiUrl('stats_lines');
-const GAS_PRICE_CHART_API_URL = buildApiUrl('stats_line', { id: 'averageGasPrice' }) + '?**';
-const STATS_API_URL = buildApiUrl('stats');
-
-test.beforeEach(async({ page }) => {
-  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(textAdMock.duck),
-  }));
-  await page.route(textAdMock.duck.ad.thumbnail, (route) => {
-    return route.fulfill({
-      status: 200,
-      path: './playwright/mocks/image_s.jpg',
-    });
-  });
+test.beforeEach(async({ mockTextAd }) => {
+  await mockTextAd();
 });
 
-test('base view +@dark-mode +@mobile', async({ mount, page }) => {
-  await page.route(STATS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify({ ...statsMock.base, coin_price: '2442.789' }),
-  }));
-  await page.route(STATS_LINES_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(statsLinesMock.base),
-  }));
-  await page.route(GAS_PRICE_CHART_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(statsLineMock.averageGasPrice),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <GasTracker/>
-    </TestApp>,
+test('base view +@dark-mode +@mobile', async({ render, mockApiResponse, page }) => {
+  await mockApiResponse('stats', { ...statsMock.base, coin_price: '2442.789' });
+  await mockApiResponse('stats_lines', statsLinesMock.base);
+  const chartApiUrl = await mockApiResponse(
+    'stats_line',
+    statsLineMock.averageGasPrice,
+    { pathParams: { id: 'averageGasPrice' }, queryParams: { from: '**' } },
   );
-  await page.waitForResponse(GAS_PRICE_CHART_API_URL);
+  const component = await render(<GasTracker/>);
+  await page.waitForResponse(chartApiUrl);
   await page.waitForFunction(() => {
     return document.querySelector('path[data-name="chart-Averagegasprice-small"]')?.getAttribute('opacity') === '1';
   });
-
   await expect(component).toHaveScreenshot();
 });

ui/pages/Home.pw.tsx

@@ -6,16 +6,15 @@ import * as dailyTxsMock from 'mocks/stats/daily_txs';
 import * as statsMock from 'mocks/stats/index';
 import * as txMock from 'mocks/txs/tx';
 import { test, expect, devices } from 'playwright/lib';
-import TestApp from 'playwright/TestApp';
-import * as configs from 'playwright/utils/configs';
+import * as pwConfig from 'playwright/utils/config';
 
 import Home from './Home';
 
 test.describe('default view', () => {
   let component: Locator;
 
-  test.beforeEach(async({ mount, mockApiResponse, mockAssetResponse }) => {
-    await mockAssetResponse(statsMock.base.coin_image, './playwright/mocks/image_s.jpg');
+  test.beforeEach(async({ render, mockApiResponse, mockAssetResponse }) => {
+    await mockAssetResponse(statsMock.base.coin_image as string, './playwright/mocks/image_s.jpg');
     await mockApiResponse('stats', statsMock.base);
     await mockApiResponse('homepage_blocks', [
       blockMock.base,
@@ -28,27 +27,23 @@ test.describe('default view', () => {
     ]);
     await mockApiResponse('stats_charts_txs', dailyTxsMock.base);
 
-    component = await mount(
-      <TestApp>
-        <Home/>
-      </TestApp>,
-    );
+    component = await render(<Home/>);
   });
 
   test('-@default +@dark-mode', async({ page }) => {
     await expect(component).toHaveScreenshot({
-      mask: [ page.locator(configs.adsBannerSelector) ],
-      maskColor: configs.maskColor,
+      mask: [ page.locator(pwConfig.adsBannerSelector) ],
+      maskColor: pwConfig.maskColor,
     });
   });
 
   test.describe('screen xl', () => {
-    test.use({ viewport: configs.viewport.xl });
+    test.use({ viewport: pwConfig.viewport.xl });
 
     test('', async({ page }) => {
       await expect(component).toHaveScreenshot({
-        mask: [ page.locator(configs.adsBannerSelector) ],
-        maskColor: configs.maskColor,
+        mask: [ page.locator(pwConfig.adsBannerSelector) ],
+        maskColor: pwConfig.maskColor,
       });
     });
   });
@@ -62,7 +57,7 @@ test.describe('custom hero plate background', () => {
     ]);
   });
 
-  test('default view', async({ mount, page }) => {
+  test('default view', async({ render, page }) => {
     await page.route(IMAGE_URL, (route) => {
       return route.fulfill({
         status: 200,
@@ -70,17 +65,13 @@ test.describe('custom hero plate background', () => {
       });
     });
 
-    const component = await mount(
-      <TestApp>
-        <Home/>
-      </TestApp>,
-    );
+    const component = await render(<Home/>);
 
     const heroPlate = component.locator('div[data-label="hero plate"]');
 
     await expect(heroPlate).toHaveScreenshot({
-      mask: [ page.locator(configs.adsBannerSelector) ],
-      maskColor: configs.maskColor,
+      mask: [ page.locator(pwConfig.adsBannerSelector) ],
+      maskColor: pwConfig.maskColor,
     });
   });
 });
@@ -89,8 +80,8 @@ test.describe('custom hero plate background', () => {
 test.describe('mobile', () => {
   test.use({ viewport: devices['iPhone 13 Pro'].viewport });
 
-  test('base view', async({ mount, page, mockAssetResponse, mockApiResponse }) => {
-    await mockAssetResponse(statsMock.base.coin_image, './playwright/mocks/image_s.jpg');
+  test('base view', async({ render, page, mockAssetResponse, mockApiResponse }) => {
+    await mockAssetResponse(statsMock.base.coin_image as string, './playwright/mocks/image_s.jpg');
     await mockApiResponse('stats', statsMock.base);
     await mockApiResponse('homepage_blocks', [
       blockMock.base,
@@ -103,15 +94,11 @@ test.describe('mobile', () => {
     ]);
     await mockApiResponse('stats_charts_txs', dailyTxsMock.base);
 
-    const component = await mount(
-      <TestApp>
-        <Home/>
-      </TestApp>,
-    );
+    const component = await render(<Home/>);
 
     await expect(component).toHaveScreenshot({
-      mask: [ page.locator(configs.adsBannerSelector) ],
-      maskColor: configs.maskColor,
+      mask: [ page.locator(pwConfig.adsBannerSelector) ],
+      maskColor: pwConfig.maskColor,
     });
   });
 });

ui/pages/Login.pw.tsx

@@ -1,25 +1,14 @@
-import { test as base, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import contextWithFeatures from 'playwright/fixtures/contextWithFeatures';
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import Login from './Login';
 
-const testWithFeature = base.extend({
-  context: contextWithFeatures([
-    { id: 'test_value', value: 'kitty' },
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  ]) as any,
-});
-
-testWithFeature('has feature text', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <Login/>
-    </TestApp>,
-  );
-
+test.fixme('has feature text', async({ render, mockFeatures }) => {
+  await mockFeatures([
+    [ 'test_value', 'kitty' ],
+  ]);
+  const component = await render(<Login/>);
   const featureText = component.getByText('kitty');
   await expect(featureText).toBeVisible();
 });

ui/pages/NameDomain.pw.tsx

@@ -1,41 +1,19 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import config from 'configs/app';
-import * as textAdMock from 'mocks/ad/textAd';
 import * as ensDomainMock from 'mocks/ens/domain';
 import * as ensDomainEventsMock from 'mocks/ens/events';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
+import { test, expect } from 'playwright/lib';
 
 import NameDomain from './NameDomain';
 
-const DOMAIN_API_URL = buildApiUrl('domain_info', { chainId: config.chain.id, name: ensDomainMock.ensDomainA.name });
-const DOMAIN_EVENTS_API_URL = buildApiUrl('domain_events', { chainId: config.chain.id, name: ensDomainMock.ensDomainA.name });
-
-test.beforeEach(async({ page }) => {
-  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(textAdMock.duck),
-  }));
-  await page.route(textAdMock.duck.ad.thumbnail, (route) => {
-    return route.fulfill({
-      status: 200,
-      path: './playwright/mocks/image_s.jpg',
-    });
+test('details tab', async({ render, mockTextAd, mockApiResponse }) => {
+  await mockTextAd();
+  await mockApiResponse('domain_info', ensDomainMock.ensDomainA, {
+    pathParams: { chainId: config.chain.id, name: ensDomainMock.ensDomainA.name },
   });
-});
-
-test('details tab', async({ mount, page }) => {
-  await page.route(DOMAIN_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(ensDomainMock.ensDomainA),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <NameDomain/>
-    </TestApp>,
+  const component = await render(
+    <NameDomain/>,
     { hooksConfig: {
       router: {
         query: { name: ensDomainMock.ensDomainA.name },
@@ -43,30 +21,24 @@ test('details tab', async({ mount, page }) => {
       },
     } },
   );
-
   await expect(component).toHaveScreenshot();
 });
 
-test('history tab +@mobile', async({ mount, page }) => {
-  await page.route(DOMAIN_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(ensDomainMock.ensDomainA),
-  }));
-  await page.route(DOMAIN_EVENTS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify({
-      items: [
-        ensDomainEventsMock.ensDomainEventA,
-        ensDomainEventsMock.ensDomainEventB,
-      ],
-      totalRecords: 2,
-    }),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <NameDomain/>
-    </TestApp>,
+test('history tab +@mobile', async({ render, mockTextAd, mockApiResponse }) => {
+  await mockTextAd();
+  await mockApiResponse('domain_info', ensDomainMock.ensDomainA, {
+    pathParams: { chainId: config.chain.id, name: ensDomainMock.ensDomainA.name },
+  });
+  await mockApiResponse('domain_events', {
+    items: [
+      ensDomainEventsMock.ensDomainEventA,
+      ensDomainEventsMock.ensDomainEventB,
+    ],
+  }, {
+    pathParams: { chainId: config.chain.id, name: ensDomainMock.ensDomainA.name },
+  });
+  const component = await render(
+    <NameDomain/>,
     { hooksConfig: {
       router: {
         query: { name: ensDomainMock.ensDomainA.name, tab: 'history' },
@@ -74,6 +46,5 @@ test('history tab +@mobile', async({ mount, page }) => {
       },
     } },
   );
-
   await expect(component).toHaveScreenshot();
 });

ui/pages/NameDomains.pw.tsx

@@ -1,50 +1,29 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import config from 'configs/app';
-import * as textAdMock from 'mocks/ad/textAd';
 import * as ensDomainMock from 'mocks/ens/domain';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
+import { test, expect } from 'playwright/lib';
 
 import NameDomains from './NameDomains';
 
-const DOMAINS_LOOKUP_API_URL = buildApiUrl('domains_lookup', { chainId: config.chain.id }) + '?only_active=true';
-
-test.beforeEach(async({ page }) => {
-  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(textAdMock.duck),
-  }));
-  await page.route(textAdMock.duck.ad.thumbnail, (route) => {
-    return route.fulfill({
-      status: 200,
-      path: './playwright/mocks/image_s.jpg',
-    });
+test('default view +@mobile', async({ render, mockApiResponse, mockTextAd }) => {
+  await mockTextAd();
+  await mockApiResponse('domains_lookup', {
+    items: [
+      ensDomainMock.ensDomainA,
+      ensDomainMock.ensDomainB,
+      ensDomainMock.ensDomainC,
+      ensDomainMock.ensDomainD,
+    ],
+    next_page_params: {
+      page_token: '<token>',
+      page_size: 50,
+    },
+  }, {
+    pathParams: { chainId: config.chain.id },
+    queryParams: { only_active: true },
   });
-});
-
-test('default view +@mobile', async({ mount, page }) => {
-  await page.route(DOMAINS_LOOKUP_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify({
-      items: [
-        ensDomainMock.ensDomainA,
-        ensDomainMock.ensDomainB,
-        ensDomainMock.ensDomainC,
-        ensDomainMock.ensDomainD,
-      ],
-      next_page_params: {
-        token_id: '<token-id>',
-      },
-    }),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <NameDomains/>
-    </TestApp>,
-  );
 
+  const component = await render(<NameDomains/>);
   await expect(component).toHaveScreenshot();
 });

ui/pages/Token.pw.tsx

@@ -7,7 +7,7 @@ import { tokenInfo, tokenCounters, bridgedTokenA } from 'mocks/tokens/tokenInfo'
 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 * as pwConfig from 'playwright/utils/config';
 
 import Token from './Token';
 
@@ -41,8 +41,8 @@ test('base view', async({ render, page, createSocket }) => {
   socketServer.sendMessage(socket, channel, 'total_supply', { total_supply: 10 ** 20 });
 
   await expect(component).toHaveScreenshot({
-    mask: [ page.locator(configs.adsBannerSelector) ],
-    maskColor: configs.maskColor,
+    mask: [ page.locator(pwConfig.adsBannerSelector) ],
+    maskColor: pwConfig.maskColor,
   });
 });
 
@@ -59,8 +59,8 @@ test('with verified info', async({ render, page, createSocket, mockApiResponse,
   await page.getByRole('button', { name: /project info/i }).click();
 
   await expect(component).toHaveScreenshot({
-    mask: [ page.locator(configs.adsBannerSelector) ],
-    maskColor: configs.maskColor,
+    mask: [ page.locator(pwConfig.adsBannerSelector) ],
+    maskColor: pwConfig.maskColor,
   });
 });
 
@@ -86,8 +86,8 @@ test('bridged token', async({ render, page, createSocket, mockApiResponse, mockA
   socketServer.sendMessage(socket, channel, 'total_supply', { total_supply: 10 ** 20 });
 
   await expect(component).toHaveScreenshot({
-    mask: [ page.locator(configs.adsBannerSelector) ],
-    maskColor: configs.maskColor,
+    mask: [ page.locator(pwConfig.adsBannerSelector) ],
+    maskColor: pwConfig.maskColor,
   });
 });
 
@@ -101,8 +101,8 @@ test.describe('mobile', () => {
     socketServer.sendMessage(socket, channel, 'total_supply', { total_supply: 10 ** 20 });
 
     await expect(component).toHaveScreenshot({
-      mask: [ page.locator(configs.adsBannerSelector) ],
-      maskColor: configs.maskColor,
+      mask: [ page.locator(pwConfig.adsBannerSelector) ],
+      maskColor: pwConfig.maskColor,
     });
   });
 
@@ -116,8 +116,8 @@ test.describe('mobile', () => {
     socketServer.sendMessage(socket, channel, 'total_supply', { total_supply: 10 ** 20 });
 
     await expect(component).toHaveScreenshot({
-      mask: [ page.locator(configs.adsBannerSelector) ],
-      maskColor: configs.maskColor,
+      mask: [ page.locator(pwConfig.adsBannerSelector) ],
+      maskColor: pwConfig.maskColor,
     });
   });
 });

ui/pages/VerifiedContracts.pw.tsx

@@ -1,45 +1,15 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import * as textAdMock from 'mocks/ad/textAd';
 import { verifiedContractsCountersMock } from 'mocks/contracts/counters';
 import * as verifiedContractsMock from 'mocks/contracts/index';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
+import { test, expect } from 'playwright/lib';
 
 import VerifiedContracts from './VerifiedContracts';
 
-const VERIFIED_CONTRACTS_API_URL = buildApiUrl('verified_contracts');
-const VERIFIED_CONTRACTS_COUNTERS_API_URL = buildApiUrl('verified_contracts_counters');
-
-test.beforeEach(async({ page }) => {
-  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(textAdMock.duck),
-  }));
-  await page.route(textAdMock.duck.ad.thumbnail, (route) => {
-    return route.fulfill({
-      status: 200,
-      path: './playwright/mocks/image_s.jpg',
-    });
-  });
-});
-
-test('base view +@mobile', async({ mount, page }) => {
-  await page.route(VERIFIED_CONTRACTS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(verifiedContractsMock.baseResponse),
-  }));
-  await page.route(VERIFIED_CONTRACTS_COUNTERS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(verifiedContractsCountersMock),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <VerifiedContracts/>
-    </TestApp>,
-  );
-
+test('base view +@mobile', async({ render, mockTextAd, mockApiResponse }) => {
+  await mockTextAd();
+  await mockApiResponse('verified_contracts', verifiedContractsMock.baseResponse);
+  await mockApiResponse('verified_contracts_counters', verifiedContractsCountersMock);
+  const component = await render(<VerifiedContracts/>);
   await expect(component).toHaveScreenshot();
 });

ui/shared/AppError/AppError.pw.tsx

@@ -1,79 +1,52 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
-import * as configs from 'playwright/utils/configs';
+import { test, expect } from 'playwright/lib';
+import * as pwConfig from 'playwright/utils/config';
 
 import AppError from './AppError';
 
-test('status code 404', async({ mount }) => {
+test('status code 404', async({ render }) => {
   const error = { message: 'Not found', cause: { status: 404 } } as Error;
-  const component = await mount(
-    <TestApp>
-      <AppError error={ error }/>
-    </TestApp>,
-  );
+  const component = await render(<AppError error={ error }/>);
   await expect(component).toHaveScreenshot();
 });
 
-test('status code 422', async({ mount }) => {
+test('status code 422', async({ render }) => {
   const error = { message: 'Unprocessable entry', cause: { status: 422 } } as Error;
-  const component = await mount(
-    <TestApp>
-      <AppError error={ error }/>
-    </TestApp>,
-  );
+  const component = await render(<AppError error={ error }/>);
   await expect(component).toHaveScreenshot();
 });
 
-test('status code 500', async({ mount }) => {
+test('status code 500', async({ render }) => {
   const error = { message: 'Unknown error', cause: { status: 500 } } as Error;
-  const component = await mount(
-    <TestApp>
-      <AppError error={ error }/>
-    </TestApp>,
-  );
+  const component = await render(<AppError error={ error }/>);
   await expect(component).toHaveScreenshot();
 });
 
-test('tx not found', async({ mount }) => {
+test('tx not found', async({ render }) => {
   const error = { message: 'Not found', cause: { status: 404, resource: 'tx' } } as Error;
-  const component = await mount(
-    <TestApp>
-      <AppError error={ error }/>
-    </TestApp>,
-  );
+  const component = await render(<AppError error={ error }/>);
   await expect(component).toHaveScreenshot();
 });
 
-test('block lost consensus', async({ mount }) => {
+test('block lost consensus', async({ render }) => {
   const error = {
     message: 'Not found',
     cause: { payload: { message: 'Block lost consensus', hash: 'hash' } },
   } as Error;
-  const component = await mount(
-    <TestApp>
-      <AppError error={ error }/>
-    </TestApp>,
-  );
+  const component = await render(<AppError error={ error }/>);
   await expect(component).toHaveScreenshot();
 });
 
-test('too many requests +@mobile', async({ mount, page }) => {
+test('too many requests +@mobile', async({ render, page }) => {
   const error = {
     message: 'Too many requests',
     cause: { status: 429 },
   } as Error;
-
-  const component = await mount(
-    <TestApp>
-      <AppError error={ error }/>
-    </TestApp>,
-  );
+  const component = await render(<AppError error={ error }/>);
   await page.waitForResponse('https://www.google.com/recaptcha/api2/**');
-
   await expect(component).toHaveScreenshot({
     mask: [ page.locator('.recaptcha') ],
-    maskColor: configs.maskColor,
+    maskColor: pwConfig.maskColor,
   });
 });

ui/shared/FancySelect/FancySelect.pw.tsx

@@ -1,8 +1,7 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import _noop from 'lodash/noop';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import FancySelect from './FancySelect';
 
@@ -24,15 +23,13 @@ const defaultProps = {
 
 [ 'md' as const, 'lg' as const ].forEach((size) => {
   test.describe(`size ${ size } +@dark-mode`, () => {
-    test('empty', async({ mount, page }) => {
-      const component = await mount(
-        <TestApp>
-          <FancySelect
-            { ...defaultProps }
-            size={ size }
-            value={ null }
-          />
-        </TestApp>,
+    test('empty', async({ render, page }) => {
+      const component = await render(
+        <FancySelect
+          { ...defaultProps }
+          size={ size }
+          value={ null }
+        />,
       );
 
       await expect(component).toHaveScreenshot();
@@ -42,33 +39,29 @@ const defaultProps = {
       await expect(page).toHaveScreenshot();
     });
 
-    test('filled', async({ mount }) => {
-      const component = await mount(
-        <TestApp>
-          <FancySelect
-            { ...defaultProps }
-            size={ size }
-            value={ OPTIONS[0] }
-          />
-        </TestApp>,
+    test('filled', async({ render }) => {
+      const component = await render(
+        <FancySelect
+          { ...defaultProps }
+          size={ size }
+          value={ OPTIONS[0] }
+        />,
       );
 
       await expect(component).toHaveScreenshot();
     });
 
-    test('error', async({ mount }) => {
-      const component = await mount(
-        <TestApp>
-          <FancySelect
-            { ...defaultProps }
-            size={ size }
-            value={ null }
-            error={{
-              type: 'unknown',
-              message: 'cannot be empty',
-            }}
-          />
-        </TestApp>,
+    test('error', async({ render }) => {
+      const component = await render(
+        <FancySelect
+          { ...defaultProps }
+          size={ size }
+          value={ null }
+          error={{
+            type: 'unknown',
+            message: 'cannot be empty',
+          }}
+        />,
       );
 
       await expect(component).toHaveScreenshot();
@@ -78,31 +71,27 @@ const defaultProps = {
       await expect(component).toHaveScreenshot();
     });
 
-    test('disabled', async({ mount }) => {
-      const component = await mount(
-        <TestApp>
-          <FancySelect
-            { ...defaultProps }
-            size={ size }
-            value={ OPTIONS[0] }
-            isDisabled
-          />
-        </TestApp>,
+    test('disabled', async({ render }) => {
+      const component = await render(
+        <FancySelect
+          { ...defaultProps }
+          size={ size }
+          value={ OPTIONS[0] }
+          isDisabled
+        />,
       );
 
       await expect(component).toHaveScreenshot();
     });
 
-    test('read-only', async({ mount }) => {
-      const component = await mount(
-        <TestApp>
-          <FancySelect
-            { ...defaultProps }
-            size={ size }
-            value={ OPTIONS[0] }
-            isReadOnly
-          />
-        </TestApp>,
+    test('read-only', async({ render }) => {
+      const component = await render(
+        <FancySelect
+          { ...defaultProps }
+          size={ size }
+          value={ OPTIONS[0] }
+          isReadOnly
+        />,
       );
 
       await expect(component).toHaveScreenshot();

ui/shared/NetworkExplorers.pw.tsx

@@ -1,18 +1,11 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import NetworkExplorers from './NetworkExplorers';
 
-test('base view', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <NetworkExplorers type="tx" pathParam="0x123"/>
-    </TestApp>,
-  );
-
+test('base view', async({ render, page }) => {
+  const component = await render(<NetworkExplorers type="tx" pathParam="0x123"/>);
   await component.getByText('2').click();
-
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 300, height: 150 } });
 });

ui/shared/Page/PageTitle.pw.tsx

@@ -1,58 +1,27 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import * as textAdMock from 'mocks/ad/textAd';
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import DefaultView from './specs/DefaultView';
 import LongNameAndManyTags from './specs/LongNameAndManyTags';
 import WithTextAd from './specs/WithTextAd';
 
-test.beforeEach(async({ page }) => {
-  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(textAdMock.duck),
-  }));
-  await page.route(textAdMock.duck.ad.thumbnail, (route) => {
-    return route.fulfill({
-      status: 200,
-      path: './playwright/mocks/image_s.jpg',
-    });
-  });
-  await page.route('https://example.com/logo.png', (route) => {
-    return route.fulfill({
-      status: 200,
-      path: './playwright/mocks/image_s.jpg',
-    });
-  });
+test.beforeEach(async({ mockTextAd, mockAssetResponse }) => {
+  await mockTextAd();
+  await mockAssetResponse('https://example.com/logo.png', './playwright/mocks/image_s.jpg');
 });
 
-test('default view +@mobile', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <DefaultView/>
-    </TestApp>,
-  );
-
+test('default view +@mobile', async({ render }) => {
+  const component = await render(<DefaultView/>);
   await expect(component).toHaveScreenshot();
 });
 
-test('with text ad +@mobile', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <WithTextAd/>
-    </TestApp>,
-  );
-
+test('with text ad +@mobile', async({ render }) => {
+  const component = await render(<WithTextAd/>);
   await expect(component).toHaveScreenshot();
 });
 
-test('with long name and many tags +@mobile', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <LongNameAndManyTags/>
-    </TestApp>,
-  );
-
+test('with long name and many tags +@mobile', async({ render }) => {
+  const component = await render(<LongNameAndManyTags/>);
   await expect(component).toHaveScreenshot();
 });

ui/shared/SocketNewItemsNotice.pw.tsx

@@ -1,7 +1,6 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import SocketNewItemsNotice from './SocketNewItemsNotice';
 
@@ -12,35 +11,17 @@ const hooksConfig = {
   },
 };
 
-test('2 new items in validated txs list +@dark-mode', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <SocketNewItemsNotice url="/" num={ 2 }/>
-    </TestApp>,
-    { hooksConfig },
-  );
-
+test('2 new items in validated txs list +@dark-mode', async({ render }) => {
+  const component = await render(<SocketNewItemsNotice url="/" num={ 2 }/>, { hooksConfig });
   await expect(component).toHaveScreenshot();
 });
 
-test('connection loss', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <SocketNewItemsNotice url="/" alert="Connection is lost. Please reload the page."/>
-    </TestApp>,
-    { hooksConfig },
-  );
-
+test('connection loss', async({ render }) => {
+  const component = await render(<SocketNewItemsNotice url="/" alert="Connection is lost. Please reload the page."/>, { hooksConfig });
   await expect(component).toHaveScreenshot();
 });
 
-test('fetching', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <SocketNewItemsNotice url="/"/>
-    </TestApp>,
-    { hooksConfig },
-  );
-
+test('fetching', async({ render }) => {
+  const component = await render(<SocketNewItemsNotice url="/"/>, { hooksConfig });
   await expect(component).toHaveScreenshot();
 });

ui/shared/Tabs/TabsWithScroll.pw.tsx

@@ -1,13 +1,12 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import type { TabItem } from './types';
 
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import TabsWithScroll from './TabsWithScroll';
 
-test('with counters', async({ mount }) => {
+test('with counters', async({ render }) => {
   const tabs: Array<TabItem> = [
     {
       id: 'tab1',
@@ -28,13 +27,7 @@ test('with counters', async({ mount }) => {
       component: null,
     },
   ];
-  const component = await mount(
-    <TestApp>
-      <TabsWithScroll tabs={ tabs }/>
-    </TestApp>,
-  );
-
+  const component = await render(<TabsWithScroll tabs={ tabs }/>);
   await component.getByText('Third tab').hover();
-
   await expect(component).toHaveScreenshot();
 });

ui/shared/TokenTransfer/TokenTransferList.pw.tsx

@@ -1,9 +1,8 @@
 import { Box } from '@chakra-ui/react';
-import { test, expect, devices } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as tokenTransferMock from 'mocks/tokens/tokenTransfer';
-import TestApp from 'playwright/TestApp';
+import { test, expect, devices } from 'playwright/lib';
 
 import TokenTransferList from './TokenTransferList';
 
@@ -24,29 +23,27 @@ const data = [
   tokenTransferMock.erc1155D,
 ];
 
-test('without tx info', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <Box h={{ base: '134px', lg: 6 }}/>
+test('without tx info', async({ render }) => {
+  const component = await render(
+    <Box pt={{ base: '134px', lg: 6 }}>
       <TokenTransferList
         data={ data }
         showTxInfo={ false }
       />
-    </TestApp>,
+    </Box>,
   );
 
   await expect(component).toHaveScreenshot();
 });
 
-test('with tx info', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <Box h={{ base: '134px', lg: 6 }}/>
+test('with tx info', async({ render }) => {
+  const component = await render(
+    <Box pt={{ base: '134px', lg: 6 }}>
       <TokenTransferList
         data={ data }
         showTxInfo={ true }
       />
-    </TestApp>,
+    </Box>,
   );
 
   await expect(component).toHaveScreenshot();

ui/shared/TokenTransfer/TokenTransferTable.pw.tsx

@@ -1,37 +1,34 @@
 import { Box } from '@chakra-ui/react';
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as tokenTransferMock from 'mocks/tokens/tokenTransfer';
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import TokenTransferTable from './TokenTransferTable';
 
-test('without tx info', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <Box h={{ base: '134px', lg: 6 }}/>
+test('without tx info', async({ render }) => {
+  const component = await render(
+    <Box pt={{ base: '134px', lg: 6 }}>
       <TokenTransferTable
         data={ tokenTransferMock.mixTokens.items }
         top={ 0 }
         showTxInfo={ false }
       />
-    </TestApp>,
+    </Box>,
   );
 
   await expect(component).toHaveScreenshot();
 });
 
-test('with tx info', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <Box h={{ base: '134px', lg: 6 }}/>
+test('with tx info', async({ render }) => {
+  const component = await render(
+    <Box pt={{ base: '134px', lg: 6 }}>
       <TokenTransferTable
         data={ tokenTransferMock.mixTokens.items }
         top={ 0 }
         showTxInfo={ true }
       />
-    </TestApp>,
+    </Box>,
   );
 
   await expect(component).toHaveScreenshot();

ui/shared/Utilization/Utilization.pw.tsx

@@ -1,26 +1,17 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import Utilization from './Utilization';
 
 test.use({ viewport: { width: 100, height: 50 } });
 
-test('green color scheme +@dark-mode', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <Utilization value={ 0.423 }/>
-    </TestApp>,
-  );
+test('green color scheme +@dark-mode', async({ render }) => {
+  const component = await render(<Utilization value={ 0.423 }/>);
   await expect(component).toHaveScreenshot();
 });
 
-test('gray color scheme +@dark-mode', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <Utilization value={ 0.423 } colorScheme="gray"/>
-    </TestApp>,
-  );
+test('gray color scheme +@dark-mode', async({ render }) => {
+  const component = await render(<Utilization value={ 0.423 } colorScheme="gray"/>);
   await expect(component).toHaveScreenshot();
 });

ui/shared/address/AddressFromTo.pw.tsx

@@ -1,62 +1,53 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as addressMock from 'mocks/address/address';
-import TestApp from 'playwright/TestApp';
-import * as configs from 'playwright/utils/configs';
+import { test, expect } from 'playwright/lib';
+import * as pwConfig from 'playwright/utils/config';
 
 import AddressFromTo from './AddressFromTo';
 
-test.use({ viewport: configs.viewport.mobile });
+test.use({ viewport: pwConfig.viewport.mobile });
 
-test('outgoing txn', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <AddressFromTo
-        from={ addressMock.withoutName }
-        to={{ ...addressMock.withName, hash: '0xa8FCe579a11E551635b9c9CB915BEcd873C51254' }}
-        current={ addressMock.withoutName.hash }
-      />
-    </TestApp>,
+test('outgoing txn', async({ render }) => {
+  const component = await render(
+    <AddressFromTo
+      from={ addressMock.withoutName }
+      to={{ ...addressMock.withName, hash: '0xa8FCe579a11E551635b9c9CB915BEcd873C51254' }}
+      current={ addressMock.withoutName.hash }
+    />,
   );
   await expect(component).toHaveScreenshot();
 });
 
-test('incoming txn', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <AddressFromTo
-        from={{ ...addressMock.withName, hash: '0xa8FCe579a11E551635b9c9CB915BEcd873C51254' }}
-        to={ addressMock.withoutName }
-        current={ addressMock.withoutName.hash }
-      />
-    </TestApp>,
+test('incoming txn', async({ render }) => {
+  const component = await render(
+    <AddressFromTo
+      from={{ ...addressMock.withName, hash: '0xa8FCe579a11E551635b9c9CB915BEcd873C51254' }}
+      to={ addressMock.withoutName }
+      current={ addressMock.withoutName.hash }
+    />,
   );
   await expect(component).toHaveScreenshot();
 });
 
-test('compact mode', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <AddressFromTo
-        from={ addressMock.withoutName }
-        to={{ ...addressMock.withName, hash: '0xa8FCe579a11E551635b9c9CB915BEcd873C51254' }}
-        mode="compact"
-      />
-    </TestApp>,
+test('compact mode', async({ render }) => {
+  const component = await render(
+    <AddressFromTo
+      from={ addressMock.withoutName }
+      to={{ ...addressMock.withName, hash: '0xa8FCe579a11E551635b9c9CB915BEcd873C51254' }}
+      mode="compact"
+    />,
   );
   await expect(component).toHaveScreenshot();
 });
 
-test('loading state', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <AddressFromTo
-        from={ addressMock.withoutName }
-        to={{ ...addressMock.withName, hash: '0xa8FCe579a11E551635b9c9CB915BEcd873C51254' }}
-        isLoading
-      />
-    </TestApp>,
+test('loading state', async({ render }) => {
+  const component = await render(
+    <AddressFromTo
+      from={ addressMock.withoutName }
+      to={{ ...addressMock.withName, hash: '0xa8FCe579a11E551635b9c9CB915BEcd873C51254' }}
+      isLoading
+    />,
   );
   await expect(component).toHaveScreenshot();
 });

ui/shared/address/AddressFromToIcon.pw.tsx

@@ -1,21 +1,18 @@
 import { Box } from '@chakra-ui/react';
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import AddressFromToIcon from './AddressFromToIcon';
 
 test.use({ viewport: { width: 36, height: 36 } });
 
 [ 'in', 'out', 'self', 'unspecified' ].forEach((type) => {
-  test(`${ type } txn type +@dark-mode`, async({ mount }) => {
-    const component = await mount(
-      <TestApp>
-        <Box p={ 2 }>
-          <AddressFromToIcon type={ type }/>
-        </Box>
-      </TestApp>,
+  test(`${ type } txn type +@dark-mode`, async({ render }) => {
+    const component = await render(
+      <Box p={ 2 }>
+        <AddressFromToIcon type={ type }/>
+      </Box>,
     );
     await expect(component).toHaveScreenshot();
   });

ui/shared/blob/BlobDataType.pw.tsx

@@ -1,35 +1,22 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import BlobDataType from './BlobDataType';
 
 test.use({ viewport: { width: 100, height: 50 } });
 
-test('image data', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <BlobDataType data="0x89504E470D0A1A0A0000000D494844520000003C0000003C0403"/>
-    </TestApp>,
-  );
+test('image data', async({ render }) => {
+  const component = await render(<BlobDataType data="0x89504E470D0A1A0A0000000D494844520000003C0000003C0403"/>);
   await expect(component).toHaveScreenshot();
 });
 
-test('raw data', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <BlobDataType data="0x010203040506"/>
-    </TestApp>,
-  );
+test('raw data', async({ render }) => {
+  const component = await render(<BlobDataType data="0x010203040506"/>);
   await expect(component).toHaveScreenshot();
 });
 
-test('text data', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <BlobDataType data="0x7b226e616d65223a22706963732f"/>
-    </TestApp>,
-  );
+test('text data', async({ render }) => {
+  const component = await render(<BlobDataType data="0x7b226e616d65223a22706963732f"/>);
   await expect(component).toHaveScreenshot();
 });

ui/shared/chart/ChartWidget.pw.tsx

@@ -1,7 +1,6 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import type { Props } from './ChartWidget';
 import ChartWidget from './ChartWidget';
@@ -29,12 +28,9 @@ const props: Props = {
   isError: false,
 };
 
-test('base view +@dark-mode', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <ChartWidget { ...props }/>
-    </TestApp>,
-  );
+test('base view +@dark-mode', async({ render, page }) => {
+  const component = await render(<ChartWidget { ...props }/>);
+
   await page.waitForFunction(() => {
     return document.querySelector('path[data-name="chart-Nativecoincirculatingsupply-small"]')?.getAttribute('opacity') === '1';
   });
@@ -54,27 +50,17 @@ test('base view +@dark-mode', async({ mount, page }) => {
   await expect(component).toHaveScreenshot();
 });
 
-test('loading', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <ChartWidget { ...props } isLoading minH="250px"/>
-    </TestApp>,
-  );
-
+test('loading', async({ render }) => {
+  const component = await render(<ChartWidget { ...props } isLoading minH="250px"/>);
   await expect(component).toHaveScreenshot();
 });
 
-test('error', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <ChartWidget { ...props } isError/>
-    </TestApp>,
-  );
-
+test('error', async({ render }) => {
+  const component = await render(<ChartWidget { ...props } isError/>);
   await expect(component).toHaveScreenshot();
 });
 
-test('small values', async({ mount, page }) => {
+test('small values', async({ render, page }) => {
   const modifiedProps = {
     ...props,
     items: [
@@ -92,18 +78,14 @@ test('small values', async({ mount, page }) => {
     ],
   };
 
-  const component = await mount(
-    <TestApp>
-      <ChartWidget { ...modifiedProps }/>
-    </TestApp>,
-  );
+  const component = await render(<ChartWidget { ...modifiedProps }/>);
   await page.waitForFunction(() => {
     return document.querySelector('path[data-name="chart-Nativecoincirculatingsupply-small"]')?.getAttribute('opacity') === '1';
   });
   await expect(component).toHaveScreenshot();
 });
 
-test('small variations in big values', async({ mount, page }) => {
+test('small variations in big values', async({ render, page }) => {
   const modifiedProps = {
     ...props,
     items: [
@@ -121,11 +103,7 @@ test('small variations in big values', async({ mount, page }) => {
     ],
   };
 
-  const component = await mount(
-    <TestApp>
-      <ChartWidget { ...modifiedProps }/>
-    </TestApp>,
-  );
+  const component = await render(<ChartWidget { ...modifiedProps }/>);
   await page.waitForFunction(() => {
     return document.querySelector('path[data-name="chart-Nativecoincirculatingsupply-small"]')?.getAttribute('opacity') === '1';
   });

ui/shared/entities/address/AddressEntity.pw.tsx

@@ -1,10 +1,9 @@
 import { Box } from '@chakra-ui/react';
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import { AddressHighlightProvider } from 'lib/contexts/addressHighlight';
 import * as addressMock from 'mocks/address/address';
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import AddressEntity from './AddressEntity';
 
@@ -14,14 +13,12 @@ test.use({ viewport: { width: 180, height: 140 } });
 
 test.describe('icon size', () => {
   iconSizes.forEach((size) => {
-    test(size, async({ mount }) => {
-      const component = await mount(
-        <TestApp>
-          <AddressEntity
-            address={ addressMock.withoutName }
-            iconSize={ size }
-          />
-        </TestApp>,
+    test(size, async({ render }) => {
+      const component = await render(
+        <AddressEntity
+          address={ addressMock.withoutName }
+          iconSize={ size }
+        />,
       );
 
       await expect(component).toHaveScreenshot();
@@ -30,26 +27,22 @@ test.describe('icon size', () => {
 });
 
 test.describe('contract', () => {
-  test('unverified', async({ mount, page }) => {
-    const component = await mount(
-      <TestApp>
-        <AddressEntity
-          address={{ ...addressMock.contract, is_verified: false }}
-        />
-      </TestApp>,
+  test('unverified', async({ render, page }) => {
+    const component = await render(
+      <AddressEntity
+        address={{ ...addressMock.contract, is_verified: false }}
+      />,
     );
 
     await component.getByText(/eternal/i).hover();
     await expect(page).toHaveScreenshot();
   });
 
-  test('verified', async({ mount }) => {
-    const component = await mount(
-      <TestApp>
-        <AddressEntity
-          address={{ ...addressMock.contract, is_verified: true }}
-        />
-      </TestApp>,
+  test('verified', async({ render }) => {
+    const component = await render(
+      <AddressEntity
+        address={{ ...addressMock.contract, is_verified: true }}
+      />,
     );
 
     await expect(component).toHaveScreenshot();
@@ -57,111 +50,95 @@ test.describe('contract', () => {
 });
 
 test.describe('loading', () => {
-  test('without alias', async({ mount }) => {
-    const component = await mount(
-      <TestApp>
+  test('without alias', async({ render }) => {
+    const component = await render(
+      <AddressEntity
+        address={ addressMock.withoutName }
+        isLoading
+      />,
+    );
+
+    await expect(component).toHaveScreenshot();
+  });
+
+  test('with alias', async({ render }) => {
+    const component = await render(
+      <AddressEntity
+        address={ addressMock.withName }
+        isLoading
+      />,
+    );
+
+    await expect(component).toHaveScreenshot();
+  });
+
+});
+
+test('with ENS', async({ render }) => {
+  const component = await render(
+    <AddressEntity
+      address={ addressMock.withEns }
+    />,
+  );
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('with name tag', async({ render }) => {
+  const component = await render(
+    <AddressEntity
+      address={ addressMock.withNameTag }
+    />,
+  );
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('external link', async({ render }) => {
+  const component = await render(
+    <AddressEntity
+      address={ addressMock.withoutName }
+      isExternal
+    />,
+  );
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('no link', async({ render }) => {
+  const component = await render(
+    <AddressEntity
+      address={ addressMock.withoutName }
+      noLink
+    />,
+  );
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('customization', async({ render }) => {
+  const component = await render(
+    <AddressEntity
+      address={ addressMock.withoutName }
+      truncation="constant"
+      p={ 3 }
+      borderWidth="1px"
+      borderColor="blue.700"
+    />,
+  );
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('hover', async({ page, render }) => {
+  const component = await render(
+    <AddressHighlightProvider>
+      <Box p={ 3 }>
         <AddressEntity
           address={ addressMock.withoutName }
-          isLoading
         />
-      </TestApp>,
-    );
-
-    await expect(component).toHaveScreenshot();
-  });
-
-  test('with alias', async({ mount }) => {
-    const component = await mount(
-      <TestApp>
-        <AddressEntity
-          address={ addressMock.withName }
-          isLoading
-        />
-      </TestApp>,
-    );
-
-    await expect(component).toHaveScreenshot();
-  });
-
-});
-
-test('with ENS', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <AddressEntity
-        address={ addressMock.withEns }
-      />
-    </TestApp>,
-  );
-
-  await expect(component).toHaveScreenshot();
-});
-
-test('with name tag', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <AddressEntity
-        address={ addressMock.withNameTag }
-      />
-    </TestApp>,
-  );
-
-  await expect(component).toHaveScreenshot();
-});
-
-test('external link', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <AddressEntity
-        address={ addressMock.withoutName }
-        isExternal
-      />
-    </TestApp>,
-  );
-
-  await expect(component).toHaveScreenshot();
-});
-
-test('no link', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <AddressEntity
-        address={ addressMock.withoutName }
-        noLink
-      />
-    </TestApp>,
-  );
-
-  await expect(component).toHaveScreenshot();
-});
-
-test('customization', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <AddressEntity
-        address={ addressMock.withoutName }
-        truncation="constant"
-        p={ 3 }
-        borderWidth="1px"
-        borderColor="blue.700"
-      />
-    </TestApp>,
-  );
-
-  await expect(component).toHaveScreenshot();
-});
-
-test('hover', async({ page, mount }) => {
-  const component = await mount(
-    <TestApp>
-      <AddressHighlightProvider>
-        <Box p={ 3 }>
-          <AddressEntity
-            address={ addressMock.withoutName }
-          />
-        </Box>
-      </AddressHighlightProvider>
-    </TestApp>,
+      </Box>
+    </AddressHighlightProvider>,
   );
 
   await component.getByText(addressMock.hash.slice(0, 4)).hover();

ui/shared/entities/block/BlockEntity.pw.tsx

@@ -1,7 +1,6 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import BlockEntity from './BlockEntity';
 
@@ -11,14 +10,12 @@ test.use({ viewport: { width: 180, height: 30 } });
 
 test.describe('icon sizes', () => {
   iconSizes.forEach((size) => {
-    test(size, async({ mount }) => {
-      const component = await mount(
-        <TestApp>
-          <BlockEntity
-            number={ 17943507 }
-            iconSize={ size }
-          />
-        </TestApp>,
+    test(size, async({ render }) => {
+      const component = await render(
+        <BlockEntity
+          number={ 17943507 }
+          iconSize={ size }
+        />,
       );
 
       await expect(component).toHaveScreenshot();
@@ -26,27 +23,23 @@ test.describe('icon sizes', () => {
   });
 });
 
-test('loading', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <BlockEntity
-        number={ 17943507 }
-        isLoading
-      />
-    </TestApp>,
+test('loading', async({ render }) => {
+  const component = await render(
+    <BlockEntity
+      number={ 17943507 }
+      isLoading
+    />,
   );
 
   await expect(component).toHaveScreenshot();
 });
 
-test('external link +@dark-mode', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <BlockEntity
-        number={ 17943507 }
-        isExternal
-      />
-    </TestApp>,
+test('external link +@dark-mode', async({ render }) => {
+  const component = await render(
+    <BlockEntity
+      number={ 17943507 }
+      isExternal
+    />,
   );
 
   await component.getByText('17943507').hover();
@@ -54,28 +47,24 @@ test('external link +@dark-mode', async({ mount }) => {
   await expect(component).toHaveScreenshot();
 });
 
-test('long number', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <BlockEntity
-        number={ 1794350723452223 }
-      />
-    </TestApp>,
+test('long number', async({ render }) => {
+  const component = await render(
+    <BlockEntity
+      number={ 1794350723452223 }
+    />,
   );
 
   await expect(component).toHaveScreenshot();
 });
 
-test('customization', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <BlockEntity
-        number={ 17943507 }
-        p={ 3 }
-        borderWidth="1px"
-        borderColor="blue.700"
-      />
-    </TestApp>,
+test('customization', async({ render }) => {
+  const component = await render(
+    <BlockEntity
+      number={ 17943507 }
+      p={ 3 }
+      borderWidth="1px"
+      borderColor="blue.700"
+    />,
   );
 
   await expect(component).toHaveScreenshot();

ui/shared/entities/ens/EnsEntity.pw.tsx

@@ -1,7 +1,6 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import EnsEntity from './EnsEntity';
 
@@ -12,14 +11,12 @@ test.use({ viewport: { width: 180, height: 30 } });
 
 test.describe('icon size', () => {
   iconSizes.forEach((size) => {
-    test(size, async({ mount }) => {
-      const component = await mount(
-        <TestApp>
-          <EnsEntity
-            name={ name }
-            iconSize={ size }
-          />
-        </TestApp>,
+    test(size, async({ render }) => {
+      const component = await render(
+        <EnsEntity
+          name={ name }
+          iconSize={ size }
+        />,
       );
 
       await expect(component).toHaveScreenshot();
@@ -27,26 +24,22 @@ test.describe('icon size', () => {
   });
 });
 
-test('loading', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <EnsEntity
-        name={ name }
-        isLoading
-      />
-    </TestApp>,
+test('loading', async({ render }) => {
+  const component = await render(
+    <EnsEntity
+      name={ name }
+      isLoading
+    />,
   );
 
   await expect(component).toHaveScreenshot();
 });
 
-test('with long name', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <EnsEntity
-        name="kitty.kitty.kitty.cat.eth"
-      />
-    </TestApp>,
+test('with long name', async({ render }) => {
+  const component = await render(
+    <EnsEntity
+      name="kitty.kitty.kitty.cat.eth"
+    />,
   );
 
   await component.getByText(name.slice(0, 4)).hover();
@@ -54,16 +47,14 @@ test('with long name', async({ mount }) => {
   await expect(component).toHaveScreenshot();
 });
 
-test('customization', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <EnsEntity
-        name={ name }
-        p={ 3 }
-        borderWidth="1px"
-        borderColor="blue.700"
-      />
-    </TestApp>,
+test('customization', async({ render }) => {
+  const component = await render(
+    <EnsEntity
+      name={ name }
+      p={ 3 }
+      borderWidth="1px"
+      borderColor="blue.700"
+    />,
   );
 
   await expect(component).toHaveScreenshot();

ui/shared/entities/nft/NftEntity.pw.tsx

@@ -1,7 +1,6 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import NftEntity from './NftEntity';
 
@@ -12,15 +11,13 @@ test.use({ viewport: { width: 180, height: 30 } });
 
 test.describe('icon sizes', () => {
   iconSizes.forEach((size) => {
-    test(size, async({ mount }) => {
-      const component = await mount(
-        <TestApp>
-          <NftEntity
-            hash={ hash }
-            id={ 1042 }
-            iconSize={ size }
-          />
-        </TestApp>,
+    test(size, async({ render }) => {
+      const component = await render(
+        <NftEntity
+          hash={ hash }
+          id={ 1042 }
+          iconSize={ size }
+        />,
       );
 
       await expect(component).toHaveScreenshot();
@@ -28,44 +25,38 @@ test.describe('icon sizes', () => {
   });
 });
 
-test('loading', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <NftEntity
-        hash={ hash }
-        id={ 1042 }
-        isLoading
-      />
-    </TestApp>,
+test('loading', async({ render }) => {
+  const component = await render(
+    <NftEntity
+      hash={ hash }
+      id={ 1042 }
+      isLoading
+    />,
   );
 
   await expect(component).toHaveScreenshot();
 });
 
-test('long id', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <NftEntity
-        hash={ hash }
-        id={ 1794350723452223 }
-      />
-    </TestApp>,
+test('long id', async({ render }) => {
+  const component = await render(
+    <NftEntity
+      hash={ hash }
+      id={ 1794350723452223 }
+    />,
   );
 
   await expect(component).toHaveScreenshot();
 });
 
-test('customization', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <NftEntity
-        hash={ hash }
-        id={ 1042 }
-        p={ 3 }
-        borderWidth="1px"
-        borderColor="blue.700"
-      />
-    </TestApp>,
+test('customization', async({ render }) => {
+  const component = await render(
+    <NftEntity
+      hash={ hash }
+      id={ 1042 }
+      p={ 3 }
+      borderWidth="1px"
+      borderColor="blue.700"
+    />,
   );
 
   await expect(component).toHaveScreenshot();

ui/shared/entities/token/TokenEntity.pw.tsx

@@ -1,9 +1,8 @@
 import { Box } from '@chakra-ui/react';
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as tokenMock from 'mocks/tokens/tokenInfo';
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import TokenEntity from './TokenEntity';
 
@@ -13,14 +12,12 @@ test.use({ viewport: { width: 300, height: 100 } });
 
 test.describe('icon size', () => {
   iconSizes.forEach((size) => {
-    test(size, async({ mount }) => {
-      const component = await mount(
-        <TestApp>
-          <TokenEntity
-            token={ tokenMock.tokenInfo }
-            iconSize={ size }
-          />
-        </TestApp>,
+    test(size, async({ render }) => {
+      const component = await render(
+        <TokenEntity
+          token={ tokenMock.tokenInfo }
+          iconSize={ size }
+        />,
       );
 
       await expect(component).toHaveScreenshot();
@@ -28,7 +25,7 @@ test.describe('icon size', () => {
   });
 });
 
-test('with logo, long name and symbol', async({ page, mount }) => {
+test('with logo, long name and symbol', async({ page, render }) => {
   const LOGO_URL = 'https://example.com/logo.png';
   await page.route(LOGO_URL, (route) => {
     return route.fulfill({
@@ -37,17 +34,15 @@ test('with logo, long name and symbol', async({ page, mount }) => {
     });
   });
 
-  await mount(
-    <TestApp>
-      <TokenEntity
-        token={{
-          name: 'This token is the best token ever',
-          symbol: 'DUCK DUCK DUCK',
-          address: tokenMock.tokenInfo.address,
-          icon_url: LOGO_URL,
-        }}
-      />
-    </TestApp>,
+  await render(
+    <TokenEntity
+      token={{
+        name: 'This token is the best token ever',
+        symbol: 'DUCK DUCK DUCK',
+        address: tokenMock.tokenInfo.address,
+        icon_url: LOGO_URL,
+      }}
+    />,
   );
 
   await page.getByText(/this/i).hover();
@@ -57,35 +52,31 @@ test('with logo, long name and symbol', async({ page, mount }) => {
   await expect(page).toHaveScreenshot();
 });
 
-test('loading', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
+test('loading', async({ render }) => {
+  const component = await render(
+    <TokenEntity
+      token={ tokenMock.tokenInfo }
+      isLoading
+    />,
+  );
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('customization', async({ render }) => {
+  const component = await render(
+    <Box
+      borderWidth="1px"
+      borderColor="orange.500"
+    >
       <TokenEntity
         token={ tokenMock.tokenInfo }
-        isLoading
-      />
-    </TestApp>,
-  );
-
-  await expect(component).toHaveScreenshot();
-});
-
-test('customization', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <Box
+        p={ 2 }
+        maxW="200px"
         borderWidth="1px"
-        borderColor="orange.500"
-      >
-        <TokenEntity
-          token={ tokenMock.tokenInfo }
-          p={ 2 }
-          maxW="200px"
-          borderWidth="1px"
-          borderColor="blue.700"
-        />
-      </Box>
-    </TestApp>,
+        borderColor="blue.700"
+      />
+    </Box>,
   );
 
   await expect(component).toHaveScreenshot();

ui/shared/entities/tx/TxEntity.pw.tsx

@@ -1,7 +1,6 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import TxEntity from './TxEntity';
 
@@ -12,14 +11,12 @@ test.use({ viewport: { width: 180, height: 30 } });
 
 test.describe('icon size', () => {
   iconSizes.forEach((size) => {
-    test(size, async({ mount }) => {
-      const component = await mount(
-        <TestApp>
-          <TxEntity
-            hash={ hash }
-            iconSize={ size }
-          />
-        </TestApp>,
+    test(size, async({ render }) => {
+      const component = await render(
+        <TxEntity
+          hash={ hash }
+          iconSize={ size }
+        />,
       );
 
       await expect(component).toHaveScreenshot();
@@ -27,40 +24,34 @@ test.describe('icon size', () => {
   });
 });
 
-test('loading', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <TxEntity
-        hash={ hash }
-        isLoading
-      />
-    </TestApp>,
+test('loading', async({ render }) => {
+  const component = await render(
+    <TxEntity
+      hash={ hash }
+      isLoading
+    />,
   );
 
   await expect(component).toHaveScreenshot();
 });
 
-test('external link', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <TxEntity
-        hash={ hash }
-        isExternal
-      />
-    </TestApp>,
+test('external link', async({ render }) => {
+  const component = await render(
+    <TxEntity
+      hash={ hash }
+      isExternal
+    />,
   );
 
   await expect(component).toHaveScreenshot();
 });
 
-test('with copy +@dark-mode', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <TxEntity
-        hash={ hash }
-        noCopy={ false }
-      />
-    </TestApp>,
+test('with copy +@dark-mode', async({ render }) => {
+  const component = await render(
+    <TxEntity
+      hash={ hash }
+      noCopy={ false }
+    />,
   );
 
   await component.getByText(hash.slice(0, 4)).hover();
@@ -68,17 +59,15 @@ test('with copy +@dark-mode', async({ mount }) => {
   await expect(component).toHaveScreenshot();
 });
 
-test('customization', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <TxEntity
-        hash={ hash }
-        truncation="constant"
-        p={ 3 }
-        borderWidth="1px"
-        borderColor="blue.700"
-      />
-    </TestApp>,
+test('customization', async({ render }) => {
+  const component = await render(
+    <TxEntity
+      hash={ hash }
+      truncation="constant"
+      p={ 3 }
+      borderWidth="1px"
+      borderColor="blue.700"
+    />,
   );
 
   await expect(component).toHaveScreenshot();

ui/shared/entities/userOp/UserOpEntity.pw.tsx

@@ -1,7 +1,6 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import UserOpEntity from './UserOpEntity';
 
@@ -12,14 +11,12 @@ test.use({ viewport: { width: 180, height: 30 } });
 
 test.describe('icon size', () => {
   iconSizes.forEach((size) => {
-    test(size, async({ mount }) => {
-      const component = await mount(
-        <TestApp>
-          <UserOpEntity
-            hash={ hash }
-            iconSize={ size }
-          />
-        </TestApp>,
+    test(size, async({ render }) => {
+      const component = await render(
+        <UserOpEntity
+          hash={ hash }
+          iconSize={ size }
+        />,
       );
 
       await expect(component).toHaveScreenshot();
@@ -27,27 +24,23 @@ test.describe('icon size', () => {
   });
 });
 
-test('loading', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <UserOpEntity
-        hash={ hash }
-        isLoading
-      />
-    </TestApp>,
+test('loading', async({ render }) => {
+  const component = await render(
+    <UserOpEntity
+      hash={ hash }
+      isLoading
+    />,
   );
 
   await expect(component).toHaveScreenshot();
 });
 
-test('with copy +@dark-mode', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <UserOpEntity
-        hash={ hash }
-        noCopy={ false }
-      />
-    </TestApp>,
+test('with copy +@dark-mode', async({ render }) => {
+  const component = await render(
+    <UserOpEntity
+      hash={ hash }
+      noCopy={ false }
+    />,
   );
 
   await component.getByText(hash.slice(0, 4)).hover();
@@ -55,17 +48,15 @@ test('with copy +@dark-mode', async({ mount }) => {
   await expect(component).toHaveScreenshot();
 });
 
-test('customization', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <UserOpEntity
-        hash={ hash }
-        truncation="constant"
-        p={ 3 }
-        borderWidth="1px"
-        borderColor="blue.700"
-      />
-    </TestApp>,
+test('customization', async({ render }) => {
+  const component = await render(
+    <UserOpEntity
+      hash={ hash }
+      truncation="constant"
+      p={ 3 }
+      borderWidth="1px"
+      borderColor="blue.700"
+    />,
   );
 
   await expect(component).toHaveScreenshot();

ui/shared/gas/GasInfoTooltip.pw.tsx

@@ -1,10 +1,10 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
+import type { GasPriceInfo } from 'types/api/stats';
+
 import { SECOND } from 'lib/consts';
 import * as statsMock from 'mocks/stats/index';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import GasInfoTooltip from './GasInfoTooltip';
 import GasPrice from './GasPrice';
@@ -13,13 +13,11 @@ const dataUpdatedAt = Date.now() - 30 * SECOND;
 
 test.use({ viewport: { width: 300, height: 300 } });
 
-test('all data', async({ mount, page }) => {
-  await mount(
-    <TestApp>
-      <GasInfoTooltip data={ statsMock.base } dataUpdatedAt={ dataUpdatedAt } isOpen>
-        <span>Gas <GasPrice data={ statsMock.base.gas_prices.average }/></span>
-      </GasInfoTooltip>
-    </TestApp>,
+test('all data', async({ render, page }) => {
+  await render(
+    <GasInfoTooltip data={ statsMock.base } dataUpdatedAt={ dataUpdatedAt } isOpen>
+      <span>Gas <GasPrice data={ statsMock.base.gas_prices?.average as GasPriceInfo }/></span>
+    </GasInfoTooltip>,
   );
 
   // await page.getByText(/gas/i).hover();
@@ -27,77 +25,66 @@ test('all data', async({ mount, page }) => {
   await expect(page).toHaveScreenshot();
 });
 
-test('without primary unit price', async({ mount, page }) => {
-  await mount(
-    <TestApp>
+test('without primary unit price', async({ render, page }) => {
+  await render(
+    <GasInfoTooltip data={ statsMock.withoutFiatPrices } dataUpdatedAt={ dataUpdatedAt } isOpen>
+      <span>Gas: <GasPrice data={ statsMock.withoutFiatPrices.gas_prices?.average as GasPriceInfo }/></span>
+    </GasInfoTooltip>,
+  );
+
+  // await page.getByText(/gas/i).hover();
+  await page.getByText(/last update/i).isVisible();
+  await expect(page).toHaveScreenshot();
+});
+
+test('without secondary unit price', async({ render, page }) => {
+  await render(
+    <GasInfoTooltip data={ statsMock.withoutGweiPrices } dataUpdatedAt={ dataUpdatedAt } isOpen>
+      <span>Gas: <GasPrice data={ statsMock.withoutGweiPrices.gas_prices?.average as GasPriceInfo }/></span>
+    </GasInfoTooltip>,
+  );
+
+  // await page.getByText(/gas/i).hover();
+  await page.getByText(/last update/i).isVisible();
+  await expect(page).toHaveScreenshot();
+});
+
+test('no data', async({ render, page }) => {
+  await render(
+    <GasInfoTooltip data={ statsMock.withoutBothPrices } dataUpdatedAt={ dataUpdatedAt } isOpen>
+      <span>Gas: <GasPrice data={ statsMock.withoutBothPrices.gas_prices?.average as GasPriceInfo }/></span>
+    </GasInfoTooltip>,
+  );
+
+  // await page.getByText(/gas/i).hover();
+  await page.getByText(/last update/i).isVisible();
+  await expect(page).toHaveScreenshot();
+});
+
+test.describe('one unit', () => {
+  test.beforeEach(async({ mockEnvs }) => {
+    await mockEnvs([
+      [ 'NEXT_PUBLIC_GAS_TRACKER_UNITS', '["gwei"]' ],
+    ]);
+  });
+
+  test('with data', async({ render, page }) => {
+    await render(
       <GasInfoTooltip data={ statsMock.withoutFiatPrices } dataUpdatedAt={ dataUpdatedAt } isOpen>
-        <span>Gas: <GasPrice data={ statsMock.withoutFiatPrices.gas_prices.average }/></span>
-      </GasInfoTooltip>
-    </TestApp>,
-  );
+        <span>Gas: <GasPrice data={ statsMock.withoutFiatPrices.gas_prices?.average as GasPriceInfo }/></span>
+      </GasInfoTooltip>,
+    );
 
-  // await page.getByText(/gas/i).hover();
-  await page.getByText(/last update/i).isVisible();
-  await expect(page).toHaveScreenshot();
-});
+    // await page.getByText(/gas/i).hover();
+    await page.getByText(/last update/i).isVisible();
+    await expect(page).toHaveScreenshot();
+  });
 
-test('without secondary unit price', async({ mount, page }) => {
-  await mount(
-    <TestApp>
+  test('without data', async({ render, page }) => {
+    await render(
       <GasInfoTooltip data={ statsMock.withoutGweiPrices } dataUpdatedAt={ dataUpdatedAt } isOpen>
-        <span>Gas: <GasPrice data={ statsMock.withoutGweiPrices.gas_prices.average }/></span>
-      </GasInfoTooltip>
-    </TestApp>,
-  );
-
-  // await page.getByText(/gas/i).hover();
-  await page.getByText(/last update/i).isVisible();
-  await expect(page).toHaveScreenshot();
-});
-
-test('no data', async({ mount, page }) => {
-  await mount(
-    <TestApp>
-      <GasInfoTooltip data={ statsMock.withoutBothPrices } dataUpdatedAt={ dataUpdatedAt } isOpen>
-        <span>Gas: <GasPrice data={ statsMock.withoutBothPrices.gas_prices.average }/></span>
-      </GasInfoTooltip>
-    </TestApp>,
-  );
-
-  // await page.getByText(/gas/i).hover();
-  await page.getByText(/last update/i).isVisible();
-  await expect(page).toHaveScreenshot();
-});
-
-const oneUnitTest = test.extend({
-  context: contextWithEnvs([
-    { name: 'NEXT_PUBLIC_GAS_TRACKER_UNITS', value: '["gwei"]' },
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  ]) as any,
-});
-
-oneUnitTest.describe('one unit', () => {
-  oneUnitTest('with data', async({ mount, page }) => {
-    await mount(
-      <TestApp>
-        <GasInfoTooltip data={ statsMock.withoutFiatPrices } dataUpdatedAt={ dataUpdatedAt } isOpen>
-          <span>Gas: <GasPrice data={ statsMock.withoutFiatPrices.gas_prices.average }/></span>
-        </GasInfoTooltip>
-      </TestApp>,
-    );
-
-    // await page.getByText(/gas/i).hover();
-    await page.getByText(/last update/i).isVisible();
-    await expect(page).toHaveScreenshot();
-  });
-
-  oneUnitTest('without data', async({ mount, page }) => {
-    await mount(
-      <TestApp>
-        <GasInfoTooltip data={ statsMock.withoutGweiPrices } dataUpdatedAt={ dataUpdatedAt } isOpen>
-          <span>Gas: <GasPrice data={ statsMock.withoutGweiPrices.gas_prices.average }/></span>
-        </GasInfoTooltip>
-      </TestApp>,
+        <span>Gas: <GasPrice data={ statsMock.withoutGweiPrices.gas_prices?.average as GasPriceInfo }/></span>
+      </GasInfoTooltip>,
     );
 
     // await page.getByText(/gas/i).hover();

ui/shared/layout/Layout.pw.tsx

@@ -1,35 +1,18 @@
-import { test as base, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
+import { indexingStatus } from 'mocks/stats/index';
+import { test, expect } from 'playwright/lib';
 
 import Layout from './Layout';
 
-const API_URL = buildApiUrl('homepage_indexing_status');
-
-const test = base.extend({
-  context: contextWithEnvs([
-    {
-      name: 'NEXT_PUBLIC_MAINTENANCE_ALERT_MESSAGE',
-      value: 'We are currently lacking pictures of <i>ducks</i>. Please <a href="mailto:[email protected]">send</a> us one.',
-    },
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  ]) as any,
-});
-
-test('base view +@mobile', async({ mount, page }) => {
-  await page.route(API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify({ finished_indexing_blocks: false, indexed_blocks_ratio: 0.1 }),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <Layout>Page Content</Layout>
-    </TestApp>,
-  );
-
+test('base view +@mobile', async({ render, mockEnvs, mockApiResponse }) => {
+  await mockEnvs([
+    [
+      'NEXT_PUBLIC_MAINTENANCE_ALERT_MESSAGE',
+      'We are currently lacking pictures of <i>ducks</i>. Please <a href="mailto:[email protected]">send</a> us one.',
+    ],
+  ]);
+  await mockApiResponse('homepage_indexing_status', indexingStatus);
+  const component = await render(<Layout>Page Content</Layout>);
   await expect(component).toHaveScreenshot();
 });

ui/shared/layout/LayoutError.pw.tsx

@@ -1,27 +1,17 @@
 import { Box } from '@chakra-ui/react';
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
+import { indexingStatus } from 'mocks/stats/index';
+import { test, expect } from 'playwright/lib';
 
 import LayoutHome from './LayoutHome';
 
-const API_URL = buildApiUrl('homepage_indexing_status');
-
-test('base view +@mobile', async({ mount, page }) => {
-  await page.route(API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify({ finished_indexing_blocks: false, indexed_blocks_ratio: 0.1 }),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <LayoutHome>
-        <Box pt={ 10 }>Error</Box>
-      </LayoutHome>
-    </TestApp>,
+test('base view +@mobile', async({ render, mockApiResponse }) => {
+  await mockApiResponse('homepage_indexing_status', indexingStatus);
+  const component = await render(
+    <LayoutHome>
+      <Box pt={ 10 }>Error</Box>
+    </LayoutHome>,
   );
-
   await expect(component).toHaveScreenshot();
 });

ui/shared/layout/LayoutHome.pw.tsx

@@ -1,24 +1,12 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
+import { indexingStatus } from 'mocks/stats/index';
+import { test, expect } from 'playwright/lib';
 
 import LayoutHome from './LayoutHome';
 
-const API_URL = buildApiUrl('homepage_indexing_status');
-
-test('base view +@mobile', async({ mount, page }) => {
-  await page.route(API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify({ finished_indexing_blocks: false, indexed_blocks_ratio: 0.1 }),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <LayoutHome>Page Content</LayoutHome>
-    </TestApp>,
-  );
-
+test('base view +@mobile', async({ render, mockApiResponse }) => {
+  await mockApiResponse('homepage_indexing_status', indexingStatus);
+  const component = await render(<LayoutHome>Page Content</LayoutHome>);
   await expect(component).toHaveScreenshot();
 });

ui/shared/logs/LogDecodedInputData.pw.tsx

@@ -1,25 +1,16 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as mocks from 'mocks/txs/decodedInputData';
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import LogDecodedInputData from './LogDecodedInputData';
 
-test('with indexed fields +@mobile +@dark-mode', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <LogDecodedInputData data={ mocks.withIndexedFields }/>
-    </TestApp>,
-  );
+test('with indexed fields +@mobile +@dark-mode', async({ render }) => {
+  const component = await render(<LogDecodedInputData data={ mocks.withIndexedFields }/>);
   await expect(component).toHaveScreenshot();
 });
 
-test('without indexed fields +@mobile', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <LogDecodedInputData data={ mocks.withoutIndexedFields }/>
-    </TestApp>,
-  );
+test('without indexed fields +@mobile', async({ render }) => {
+  const component = await render(<LogDecodedInputData data={ mocks.withoutIndexedFields }/>);
   await expect(component).toHaveScreenshot();
 });

ui/shared/logs/LogItem.pw.tsx

@@ -1,9 +1,8 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as addressMocks from 'mocks/address/address';
 import * as inputDataMocks from 'mocks/txs/decodedInputData';
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import LogItem from './LogItem';
 
@@ -15,36 +14,32 @@ const TOPICS = [
 ];
 const DATA = '0x0000000000000000000000000000000000000000000000000070265bf0112cee';
 
-test('with decoded input data +@mobile +@dark-mode', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <LogItem
-        index={ 42 }
-        decoded={ inputDataMocks.withIndexedFields }
-        address={{ ...addressMocks.withName, is_verified: true }}
-        topics={ TOPICS }
-        data={ DATA }
-        type="transaction"
-        tx_hash={ null }
-      />
-    </TestApp>,
+test('with decoded input data +@mobile +@dark-mode', async({ render }) => {
+  const component = await render(
+    <LogItem
+      index={ 42 }
+      decoded={ inputDataMocks.withIndexedFields }
+      address={{ ...addressMocks.withName, is_verified: true }}
+      topics={ TOPICS }
+      data={ DATA }
+      type="transaction"
+      tx_hash={ null }
+    />,
   );
   await expect(component).toHaveScreenshot();
 });
 
-test('without decoded input data +@mobile', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <LogItem
-        index={ 42 }
-        decoded={ null }
-        address={ addressMocks.withoutName }
-        topics={ TOPICS }
-        data={ DATA }
-        type="transaction"
-        tx_hash={ null }
-      />
-    </TestApp>,
+test('without decoded input data +@mobile', async({ render }) => {
+  const component = await render(
+    <LogItem
+      index={ 42 }
+      decoded={ null }
+      address={ addressMocks.withoutName }
+      topics={ TOPICS }
+      data={ DATA }
+      type="transaction"
+      tx_hash={ null }
+    />,
   );
   await expect(component).toHaveScreenshot();
 });

ui/shared/logs/LogTopic.pw.tsx

@@ -1,27 +1,18 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import LogTopic from './LogTopic';
 
-test('address view +@mobile -@default', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <LogTopic hex="0x000000000000000000000000d789a607ceac2f0e14867de4eb15b15c9ffb5859" index={ 42 }/>
-    </TestApp>,
-  );
+test('address view +@mobile -@default', async({ render }) => {
+  const component = await render(<LogTopic hex="0x000000000000000000000000d789a607ceac2f0e14867de4eb15b15c9ffb5859" index={ 42 }/>);
   await component.locator('select[aria-label="Data type"]').selectOption('address');
 
   await expect(component).toHaveScreenshot();
 });
 
-test('hex view +@mobile -@default', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <LogTopic hex="0x000000000000000000000000d789a607ceac2f0e14867de4eb15b15c9ffb5859" index={ 42 }/>
-    </TestApp>,
-  );
+test('hex view +@mobile -@default', async({ render }) => {
+  const component = await render(<LogTopic hex="0x000000000000000000000000d789a607ceac2f0e14867de4eb15b15c9ffb5859" index={ 42 }/>);
   await component.locator('select[aria-label="Data type"]').selectOption('hex');
 
   await expect(component).toHaveScreenshot();

ui/shared/nft/NftMedia.pw.tsx

@@ -1,42 +1,25 @@
-import { test, expect } from '@playwright/experimental-ct-react';
+import { Box } from '@chakra-ui/react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import NftMedia from './NftMedia';
 
 test.describe('no url', () => {
   test.use({ viewport: { width: 250, height: 250 } });
-  test('preview +@dark-mode', async({ mount }) => {
-    const component = await mount(
-      <TestApp>
-        <NftMedia animationUrl={ null } imageUrl={ null }/>
-      </TestApp>,
-    );
-
+  test('preview +@dark-mode', async({ render }) => {
+    const component = await render(<NftMedia animationUrl={ null } imageUrl={ null }/>);
     await expect(component).toHaveScreenshot();
   });
 
-  test('with fallback', async({ mount, page }) => {
+  test('with fallback', async({ render, mockAssetResponse }) => {
     const IMAGE_URL = 'https://localhost:3000/my-image.jpg';
-
-    await page.route(IMAGE_URL, (route) => {
-      return route.fulfill({
-        status: 200,
-        path: './playwright/mocks/image_long.jpg',
-      });
-    });
-
-    const component = await mount(
-      <TestApp>
-        <NftMedia animationUrl={ null } imageUrl={ IMAGE_URL }/>
-      </TestApp>,
-    );
-
+    await mockAssetResponse(IMAGE_URL, './playwright/mocks/image_long.jpg');
+    const component = await render(<NftMedia animationUrl={ null } imageUrl={ IMAGE_URL }/>);
     await expect(component).toHaveScreenshot();
   });
 
-  test('non-media url and fallback', async({ mount, page }) => {
+  test('non-media url and fallback', async({ render, page, mockAssetResponse }) => {
     const ANIMATION_URL = 'https://localhost:3000/my-animation.m3u8';
     const ANIMATION_MEDIA_TYPE_API_URL = `/node-api/media-type?url=${ encodeURIComponent(ANIMATION_URL) }`;
     const IMAGE_URL = 'https://localhost:3000/my-image.jpg';
@@ -47,88 +30,40 @@ test.describe('no url', () => {
         body: JSON.stringify({ type: undefined }),
       });
     });
+    await mockAssetResponse(IMAGE_URL, './playwright/mocks/image_long.jpg');
 
-    await page.route(IMAGE_URL, (route) => {
-      return route.fulfill({
-        status: 200,
-        path: './playwright/mocks/image_long.jpg',
-      });
-    });
-
-    const component = await mount(
-      <TestApp>
-        <NftMedia animationUrl={ ANIMATION_URL } imageUrl={ IMAGE_URL }/>
-      </TestApp>,
-    );
-
+    const component = await render(<NftMedia animationUrl={ ANIMATION_URL } imageUrl={ IMAGE_URL }/>);
     await expect(component).toHaveScreenshot();
   });
 });
 
 test.describe('image', () => {
-  test.use({ viewport: { width: 250, height: 250 } });
-
   const MEDIA_URL = 'https://localhost:3000/my-image.jpg';
 
-  test.beforeEach(async({ page }) => {
-    await page.route(MEDIA_URL, (route) => {
-      return route.fulfill({
-        status: 200,
-        path: './playwright/mocks/image_long.jpg',
-      });
-    });
+  test.beforeEach(async({ mockAssetResponse }) => {
+    await mockAssetResponse(MEDIA_URL, './playwright/mocks/image_long.jpg');
   });
 
-  test('preview +@dark-mode', async({ mount }) => {
-    const component = await mount(
-      <TestApp>
+  test('preview +@dark-mode', async({ render, page }) => {
+    await render(
+      <Box boxSize="250px">
         <NftMedia animationUrl={ MEDIA_URL } imageUrl={ null }/>
-      </TestApp>,
+      </Box>,
     );
-
-    await expect(component).toHaveScreenshot();
-  });
-});
-
-test('image preview hover', async({ mount, page }) => {
-  const MEDIA_URL = 'https://localhost:3000/my-image.jpg';
-
-  await page.route(MEDIA_URL, (route) => {
-    return route.fulfill({
-      status: 200,
-      path: './playwright/mocks/image_long.jpg',
-    });
+    await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 250, height: 250 } });
   });
 
-  const component = await mount(
-    <TestApp>
-      <NftMedia animationUrl={ MEDIA_URL } imageUrl={ null } w="250px"/>
-    </TestApp>,
-  );
-
-  await component.getByAltText('Token instance image').hover();
-
-  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 250, height: 250 } });
-});
-
-test('image fullscreen +@dark-mode +@mobile', async({ mount, page }) => {
-  const MEDIA_URL = 'https://localhost:3000/my-image.jpg';
-
-  await page.route(MEDIA_URL, (route) => {
-    return route.fulfill({
-      status: 200,
-      path: './playwright/mocks/image_long.jpg',
-    });
+  test('preview hover', async({ render, page }) => {
+    const component = await render(<NftMedia animationUrl={ MEDIA_URL } imageUrl={ null } w="250px"/>);
+    await component.getByAltText('Token instance image').hover();
+    await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 250, height: 250 } });
   });
-  const component = await mount(
-    <TestApp>
-      <NftMedia animationUrl={ MEDIA_URL } imageUrl={ null } withFullscreen w="250px"/>
-    </TestApp>,
-  );
 
-  await component.getByAltText('Token instance image').click();
-
-  await expect(page).toHaveScreenshot();
+  test('fullscreen +@dark-mode +@mobile', async({ render, page }) => {
+    const component = await render(<NftMedia animationUrl={ MEDIA_URL } imageUrl={ null } withFullscreen w="250px"/>);
+    await component.getByAltText('Token instance image').click();
+    await expect(page).toHaveScreenshot();
+  });
 });
 
 test.describe('page', () => {
@@ -137,27 +72,16 @@ test.describe('page', () => {
   const MEDIA_URL = 'https://localhost:3000/page.html';
   const MEDIA_TYPE_API_URL = `/node-api/media-type?url=${ encodeURIComponent(MEDIA_URL) }`;
 
-  test.beforeEach(async({ page }) => {
-
-    await page.route(MEDIA_URL, (route) => {
-      return route.fulfill({
-        status: 200,
-        path: './playwright/mocks/page.html',
-      });
-    });
+  test.beforeEach(async({ page, mockAssetResponse }) => {
+    await mockAssetResponse(MEDIA_URL, './playwright/mocks/page.html');
     await page.route(MEDIA_TYPE_API_URL, (route) => route.fulfill({
       status: 200,
       body: JSON.stringify({ type: 'html' }),
     }));
   });
 
-  test('preview +@dark-mode', async({ mount }) => {
-    const component = await mount(
-      <TestApp>
-        <NftMedia animationUrl={ MEDIA_URL } imageUrl={ null }/>
-      </TestApp>,
-    );
-
+  test('preview +@dark-mode', async({ render }) => {
+    const component = await render(<NftMedia animationUrl={ MEDIA_URL } imageUrl={ null }/>);
     await expect(component).toHaveScreenshot();
   });
 });