fix recaptcha and ads banners in pw tests (#997)

* fix recaptcha in pw tests

* change ads banner placeholder for pw

configs/envs/.env.pw

@@ -23,7 +23,7 @@ NEXT_PUBLIC_NETWORK_RPC_URL=https://localhost:1111
 NEXT_PUBLIC_IS_TESTNET=true
 NEXT_PUBLIC_MARKETPLACE_CONFIG_URL=https://localhost:3000/marketplace-config.json
 NEXT_PUBLIC_IS_L2_NETWORK=false
-NEXT_PUBLIC_AD_BANNER_PROVIDER=coinzilla
+NEXT_PUBLIC_AD_BANNER_PROVIDER=slise
 
 # network config
 NEXT_PUBLIC_NETWORK_NAME=Blockscout

playwright/utils/configs.ts

@@ -4,3 +4,7 @@ export const viewport = {
   mobile: devices['iPhone 13 Pro'].viewport,
   xl: { width: 1600, height: 1000 },
 };
+
+export const maskColor = '#4299E1'; // blue.400
+
+export const adsBannerSelector = '.adsbyslise';

playwright/utils/insertAdPlaceholder.ts

-import type { Page } from 'playwright-core';
-
-export default async function insertAdPlaceholder(page: Page) {
-  await page.waitForSelector('#adBanner', { state: 'attached' });
-  await page.evaluate(() => {
-    const adContainer = document.getElementById('adBanner');
-    const adReplacer = document.createElement('div');
-    adReplacer.style.width = '200px';
-    adReplacer.style.height = '100%';
-    adReplacer.style.background = '#f00';
-    adContainer?.replaceChildren(adReplacer);
-  });
-}

ui/address/AddressDetails.pw.tsx

@@ -11,7 +11,7 @@ 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 insertAdPlaceholder from 'playwright/utils/insertAdPlaceholder';
+import * as configs from 'playwright/utils/configs';
 
 import AddressDetails from './AddressDetails';
 import MockAddressPage from './testUtils/MockAddressPage';
@@ -45,9 +45,10 @@ test('contract +@mobile', async({ mount, page }) => {
     { hooksConfig },
   );
 
-  await insertAdPlaceholder(page);
-
-  await expect(component).toHaveScreenshot();
+  await expect(component).toHaveScreenshot({
+    mask: [ page.locator(configs.adsBannerSelector) ],
+    maskColor: configs.maskColor,
+  });
 });
 
 test('token', async({ mount, page }) => {
@@ -87,9 +88,10 @@ test('token', async({ mount, page }) => {
     { hooksConfig },
   );
 
-  await insertAdPlaceholder(page);
-
-  await expect(component).toHaveScreenshot();
+  await expect(component).toHaveScreenshot({
+    mask: [ page.locator(configs.adsBannerSelector) ],
+    maskColor: configs.maskColor,
+  });
 });
 
 test('validator +@mobile', async({ mount, page }) => {
@@ -109,7 +111,8 @@ test('validator +@mobile', async({ mount, page }) => {
     { hooksConfig },
   );
 
-  await insertAdPlaceholder(page);
-
-  await expect(component).toHaveScreenshot();
+  await expect(component).toHaveScreenshot({
+    mask: [ page.locator(configs.adsBannerSelector) ],
+    maskColor: configs.maskColor,
+  });
 });

ui/csvExport/CsvExportForm.tsx

@@ -81,7 +81,7 @@ const CsvExportForm = ({ hash, resource, filterType, filterValue, fileNameTempla
         noValidate
         onSubmit={ handleSubmit(onFormSubmit) }
       >
-        <Flex columnGap={ 5 } rowGap={ 3 } flexDir={{ base: 'column', lg: 'row' }} alignItems={{ base: 'flex-start', lg: 'center' }}>
+        <Flex columnGap={ 5 } rowGap={ 3 } flexDir={{ base: 'column', lg: 'row' }} alignItems={{ base: 'flex-start', lg: 'center' }} flexWrap="wrap">
           <CsvExportFormField name="from" formApi={ formApi }/>
           <CsvExportFormField name="to" formApi={ formApi }/>
           <CsvExportFormReCaptcha formApi={ formApi }/>

ui/csvExport/CsvExportFormReCaptcha.tsx

+import { Alert } from '@chakra-ui/react';
 import React from 'react';
 import ReCaptcha from 'react-google-recaptcha';
 import type { UseFormReturn } from 'react-hook-form';
@@ -41,8 +42,18 @@ const CsvExportFormReCaptcha = ({ formApi }: Props) => {
     formApi.setError('reCaptcha', { type: 'required' });
   }, [ formApi ]);
 
+  if (!appConfig.reCaptcha.siteKey) {
+    return (
+      <Alert status="error">
+        CSV export is not available at the moment since reCaptcha is not configured for this application.
+        Please contact the service maintainer to make necessary changes in the service configuration.
+      </Alert>
+    );
+  }
+
   return (
     <ReCaptcha
+      className="recaptcha"
       ref={ ref }
       sitekey={ appConfig.reCaptcha.siteKey }
       onChange={ handleReCaptchaChange }

ui/pages/CsvExport.pw.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import * as addressMock from 'mocks/address/address';
 import TestApp from 'playwright/TestApp';
 import buildApiUrl from 'playwright/utils/buildApiUrl';
+import * as configs from 'playwright/utils/configs';
 
 import CsvExport from './CsvExport';
 
@@ -22,7 +23,7 @@ test.beforeEach(async({ page }) => {
   }));
 });
 
-test('base view +@mobile +@dark-mode', async({ mount }) => {
+test('base view +@mobile +@dark-mode', async({ mount, page }) => {
 
   const component = await mount(
     <TestApp>
@@ -31,5 +32,10 @@ test('base view +@mobile +@dark-mode', async({ mount }) => {
     { hooksConfig },
   );
 
-  await expect(component).toHaveScreenshot();
+  await page.waitForResponse('https://www.google.com/recaptcha/api2/**');
+
+  await expect(component).toHaveScreenshot({
+    mask: [ page.locator('.recaptcha') ],
+    maskColor: configs.maskColor,
+  });
 });

ui/pages/Home.pw.tsx

@@ -10,7 +10,6 @@ import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
 import TestApp from 'playwright/TestApp';
 import buildApiUrl from 'playwright/utils/buildApiUrl';
 import * as configs from 'playwright/utils/configs';
-import insertAdPlaceholder from 'playwright/utils/insertAdPlaceholder';
 
 import Home from './Home';
 
@@ -47,19 +46,23 @@ test.describe('default view', () => {
         <Home/>
       </TestApp>,
     );
-
-    await insertAdPlaceholder(page);
   });
 
-  test('-@default +@dark-mode', async() => {
-    await expect(component.locator('main')).toHaveScreenshot();
+  test('-@default +@dark-mode', async({ page }) => {
+    await expect(component.locator('main')).toHaveScreenshot({
+      mask: [ page.locator(configs.adsBannerSelector) ],
+      maskColor: configs.maskColor,
+    });
   });
 
   test.describe('screen xl', () => {
     test.use({ viewport: configs.viewport.xl });
 
-    test('', async() => {
-      await expect(component.locator('main')).toHaveScreenshot();
+    test('', async({ page }) => {
+      await expect(component.locator('main')).toHaveScreenshot({
+        mask: [ page.locator(configs.adsBannerSelector) ],
+        maskColor: configs.maskColor,
+      });
     });
   });
 });
@@ -89,7 +92,10 @@ test.describe('custom hero plate background', () => {
 
     const heroPlate = component.locator('div[data-label="hero plate"]');
 
-    await expect(heroPlate).toHaveScreenshot();
+    await expect(heroPlate).toHaveScreenshot({
+      mask: [ page.locator(configs.adsBannerSelector) ],
+      maskColor: configs.maskColor,
+    });
   });
 });
 
@@ -128,8 +134,9 @@ test.describe('mobile', () => {
       </TestApp>,
     );
 
-    await insertAdPlaceholder(page);
-
-    await expect(component.locator('main')).toHaveScreenshot();
+    await expect(component.locator('main')).toHaveScreenshot({
+      mask: [ page.locator(configs.adsBannerSelector) ],
+      maskColor: configs.maskColor,
+    });
   });
 });

ui/pages/Token.pw.tsx

@@ -7,7 +7,7 @@ import { tokenInfo, tokenCounters } from 'mocks/tokens/tokenInfo';
 import * as socketServer from 'playwright/fixtures/socketServer';
 import TestApp from 'playwright/TestApp';
 import buildApiUrl from 'playwright/utils/buildApiUrl';
-import insertAdPlaceholder from 'playwright/utils/insertAdPlaceholder';
+import * as configs from 'playwright/utils/configs';
 
 import Token from './Token';
 
@@ -66,9 +66,10 @@ test('base view', async({ mount, page, createSocket }) => {
   const channel = await socketServer.joinChannel(socket, 'tokens:1');
   socketServer.sendMessage(socket, channel, 'total_supply', { total_supply: 10 ** 20 });
 
-  await insertAdPlaceholder(page);
-
-  await expect(component).toHaveScreenshot();
+  await expect(component).toHaveScreenshot({
+    mask: [ page.locator(configs.adsBannerSelector) ],
+    maskColor: configs.maskColor,
+  });
 });
 
 test('with verified info', async({ mount, page, createSocket }) => {
@@ -94,11 +95,12 @@ test('with verified info', async({ mount, page, createSocket }) => {
   const channel = await socketServer.joinChannel(socket, 'tokens:1');
   socketServer.sendMessage(socket, channel, 'total_supply', { total_supply: 10 ** 20 });
 
-  await insertAdPlaceholder(page);
-
   await page.getByRole('button', { name: /project info/i }).click();
 
-  await expect(component).toHaveScreenshot();
+  await expect(component).toHaveScreenshot({
+    mask: [ page.locator(configs.adsBannerSelector) ],
+    maskColor: configs.maskColor,
+  });
 });
 
 test.describe('mobile', () => {
@@ -115,9 +117,10 @@ test.describe('mobile', () => {
     const channel = await socketServer.joinChannel(socket, 'tokens:1');
     socketServer.sendMessage(socket, channel, 'total_supply', { total_supply: 10 ** 20 });
 
-    await insertAdPlaceholder(page);
-
-    await expect(component).toHaveScreenshot();
+    await expect(component).toHaveScreenshot({
+      mask: [ page.locator(configs.adsBannerSelector) ],
+      maskColor: configs.maskColor,
+    });
   });
 
   test('with verified info', async({ mount, page, createSocket }) => {
@@ -143,8 +146,9 @@ test.describe('mobile', () => {
     const channel = await socketServer.joinChannel(socket, 'tokens:1');
     socketServer.sendMessage(socket, channel, 'total_supply', { total_supply: 10 ** 20 });
 
-    await insertAdPlaceholder(page);
-
-    await expect(component).toHaveScreenshot();
+    await expect(component).toHaveScreenshot({
+      mask: [ page.locator(configs.adsBannerSelector) ],
+      maskColor: configs.maskColor,
+    });
   });
 });

ui/tokenInstance/TokenInstanceDetails.pw.tsx

@@ -5,7 +5,7 @@ import * as addressMock from 'mocks/address/address';
 import * as tokenInstanceMock from 'mocks/tokens/tokenInstance';
 import TestApp from 'playwright/TestApp';
 import buildApiUrl from 'playwright/utils/buildApiUrl';
-import insertAdPlaceholder from 'playwright/utils/insertAdPlaceholder';
+import * as configs from 'playwright/utils/configs';
 
 import TokenInstanceDetails from './TokenInstanceDetails';
 
@@ -31,7 +31,8 @@ test('base view +@dark-mode +@mobile', async({ mount, page }) => {
     </TestApp>,
   );
 
-  await insertAdPlaceholder(page);
-
-  await expect(component).toHaveScreenshot();
+  await expect(component).toHaveScreenshot({
+    mask: [ page.locator(configs.adsBannerSelector) ],
+    maskColor: configs.maskColor,
+  });
 });

ui/tx/TxDetails.pw.tsx

@@ -5,7 +5,7 @@ import * as txMock from 'mocks/txs/tx';
 import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
 import TestApp from 'playwright/TestApp';
 import buildApiUrl from 'playwright/utils/buildApiUrl';
-import insertAdPlaceholder from 'playwright/utils/insertAdPlaceholder';
+import * as configs from 'playwright/utils/configs';
 
 import TxDetails from './TxDetails';
 
@@ -30,9 +30,11 @@ test('between addresses +@mobile +@dark-mode', async({ mount, page }) => {
   );
 
   await page.getByText('View details').click();
-  await insertAdPlaceholder(page);
 
-  await expect(component).toHaveScreenshot();
+  await expect(component).toHaveScreenshot({
+    mask: [ page.locator(configs.adsBannerSelector) ],
+    maskColor: configs.maskColor,
+  });
 });
 
 test('creating contact', async({ mount, page }) => {
@@ -48,9 +50,10 @@ test('creating contact', async({ mount, page }) => {
     { hooksConfig },
   );
 
-  await insertAdPlaceholder(page);
-
-  await expect(component).toHaveScreenshot();
+  await expect(component).toHaveScreenshot({
+    mask: [ page.locator(configs.adsBannerSelector) ],
+    maskColor: configs.maskColor,
+  });
 });
 
 test('with token transfer +@mobile', async({ mount, page }) => {
@@ -66,9 +69,10 @@ test('with token transfer +@mobile', async({ mount, page }) => {
     { hooksConfig },
   );
 
-  await insertAdPlaceholder(page);
-
-  await expect(component).toHaveScreenshot();
+  await expect(component).toHaveScreenshot({
+    mask: [ page.locator(configs.adsBannerSelector) ],
+    maskColor: configs.maskColor,
+  });
 });
 
 test('with decoded revert reason', async({ mount, page }) => {
@@ -84,9 +88,10 @@ test('with decoded revert reason', async({ mount, page }) => {
     { hooksConfig },
   );
 
-  await insertAdPlaceholder(page);
-
-  await expect(component).toHaveScreenshot();
+  await expect(component).toHaveScreenshot({
+    mask: [ page.locator(configs.adsBannerSelector) ],
+    maskColor: configs.maskColor,
+  });
 });
 
 test('with decoded raw reason', async({ mount, page }) => {
@@ -102,9 +107,10 @@ test('with decoded raw reason', async({ mount, page }) => {
     { hooksConfig },
   );
 
-  await insertAdPlaceholder(page);
-
-  await expect(component).toHaveScreenshot();
+  await expect(component).toHaveScreenshot({
+    mask: [ page.locator(configs.adsBannerSelector) ],
+    maskColor: configs.maskColor,
+  });
 });
 
 test('pending', async({ mount, page }) => {
@@ -121,9 +127,11 @@ test('pending', async({ mount, page }) => {
   );
 
   await page.getByText('View details').click();
-  await insertAdPlaceholder(page);
 
-  await expect(component).toHaveScreenshot();
+  await expect(component).toHaveScreenshot({
+    mask: [ page.locator(configs.adsBannerSelector) ],
+    maskColor: configs.maskColor,
+  });
 });
 
 test('with actions uniswap +@mobile +@dark-mode', async({ mount, page }) => {
@@ -139,8 +147,10 @@ test('with actions uniswap +@mobile +@dark-mode', async({ mount, page }) => {
     { hooksConfig },
   );
 
-  await insertAdPlaceholder(page);
-  await expect(component).toHaveScreenshot();
+  await expect(component).toHaveScreenshot({
+    mask: [ page.locator(configs.adsBannerSelector) ],
+    maskColor: configs.maskColor,
+  });
 });
 
 const l2Test = test.extend({
@@ -163,9 +173,10 @@ l2Test('l2', async({ mount, page }) => {
     { hooksConfig },
   );
 
-  await insertAdPlaceholder(page);
-
-  await expect(component).toHaveScreenshot();
+  await expect(component).toHaveScreenshot({
+    mask: [ page.locator(configs.adsBannerSelector) ],
+    maskColor: configs.maskColor,
+  });
 });
 
 const mainnetTest = test.extend({
@@ -188,7 +199,8 @@ mainnetTest('without testnet warning', async({ mount, page }) => {
     { hooksConfig },
   );
 
-  await insertAdPlaceholder(page);
-
-  await expect(component).toHaveScreenshot();
+  await expect(component).toHaveScreenshot({
+    mask: [ page.locator(configs.adsBannerSelector) ],
+    maskColor: configs.maskColor,
+  });
 });