tests

playwright/scripts/insertAdPlaceholder.ts

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

playwright/scripts/insertAdText.ts

-export default async function insertAdText() {
-  const ad = document.getElementsByClassName('coinzilla');
-  ad[0].textContent = 'coinzilla banner!';
-}

ui/pages/Home.pw.tsx

@@ -5,7 +5,7 @@ import * as blockMock from 'mocks/blocks/block';
 import * as dailyTxsMock from 'mocks/stats/daily_txs';
 import * as statsMock from 'mocks/stats/index';
 import * as txMock from 'mocks/txs/tx';
-import insertAdText from 'playwright/scripts/insertAdText';
+import insertAdPlaceholder from 'playwright/scripts/insertAdPlaceholder';
 import TestApp from 'playwright/TestApp';
 import buildApiUrl from 'playwright/utils/buildApiUrl';
 
@@ -42,7 +42,7 @@ test('default view -@default +@desktop-xl +@mobile +@dark-mode', async({ mount,
     </TestApp>,
   );
 
-  await page.evaluate(insertAdText);
+  await insertAdPlaceholder(page);
 
   await expect(component.locator('main')).toHaveScreenshot();
 });

ui/shared/ad/AdbutlerBanner.tsx

@@ -22,7 +22,7 @@ var AdButler = AdButler || {}; AdButler.ads = AdButler.ads || [];
 
 const AdbutlerBanner = ({ className }: { className?: string }) => {
   return (
-    <Flex className={ className }>
+    <Flex className={ className } id="adBanner">
       <div id="ad-banner"></div>
       <Script id="ad-butler-1">{ scriptText1 }</Script>
       <Script id="ad-butler-2">{ scriptText2 }</Script>

ui/tx/TxDetails.pw.tsx

@@ -2,6 +2,7 @@ import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as txMock from 'mocks/txs/tx';
+import insertAdPlaceholder from 'playwright/scripts/insertAdPlaceholder';
 import TestApp from 'playwright/TestApp';
 import buildApiUrl from 'playwright/utils/buildApiUrl';
 
@@ -28,6 +29,7 @@ test('between addresses +@mobile +@dark-mode', async({ mount, page }) => {
   );
 
   await page.getByText('View details').click();
+  await insertAdPlaceholder(page);
 
   await expect(component).toHaveScreenshot();
 });
@@ -45,6 +47,8 @@ test('creating contact', async({ mount, page }) => {
     { hooksConfig },
   );
 
+  await insertAdPlaceholder(page);
+
   await expect(component).toHaveScreenshot();
 });
 
@@ -61,6 +65,8 @@ test('with token transfer +@mobile', async({ mount, page }) => {
     { hooksConfig },
   );
 
+  await insertAdPlaceholder(page);
+
   await expect(component).toHaveScreenshot();
 });
 
@@ -77,6 +83,8 @@ test('with decoded revert reason', async({ mount, page }) => {
     { hooksConfig },
   );
 
+  await insertAdPlaceholder(page);
+
   await expect(component).toHaveScreenshot();
 });
 
@@ -93,6 +101,8 @@ test('with decoded raw reason', async({ mount, page }) => {
     { hooksConfig },
   );
 
+  await insertAdPlaceholder(page);
+
   await expect(component).toHaveScreenshot();
 });
 
@@ -110,6 +120,7 @@ test('pending', async({ mount, page }) => {
   );
 
   await page.getByText('View details').click();
+  await insertAdPlaceholder(page);
 
   await expect(component).toHaveScreenshot();
 });

ui/tx/TxDetails.tsx

@@ -164,7 +164,7 @@ const TxDetails = () => {
           <GridItem
             colSpan={{ base: undefined, lg: 2 }}
           >
-            <AdBanner/>
+            <AdBanner justifyContent="center"/>
           </GridItem>
         ) :
         (