From c357a91ac03e5557cb3627b1fc8624407ef6d218 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominik=20Luba=C5=84ski?= <dominik.lubanski@gmail.com>
Date: Fri, 18 Oct 2024 17:08:15 +0200
Subject: [PATCH] chore(tests): Add  e2e tests for custom filters (#1964)

---
 src/background/adblocker.js                   |  23 +++-
 src/background/helpers.js                     |  11 ++
 src/pages/settings/components/checkbox.js     |  28 +++--
 .../settings/components/custom-filters.js     |   7 +-
 src/pages/settings/settings.js                |   2 +-
 src/pages/settings/views/privacy.js           |   7 +-
 src/store/options.js                          |  18 ++-
 src/utils/engines.js                          |   2 +-
 tests/README.md                               |   4 +-
 tests/e2e/page.html                           |   9 ++
 tests/e2e/spec/_onboarding.spec.js            |  16 +--
 tests/e2e/spec/advanced.spec.js               | 104 ++++++++++++++++++
 tests/e2e/spec/main.spec.js                   |  91 +++++----------
 tests/e2e/utils.js                            |  54 +++++++--
 tests/e2e/wdio.conf.js                        |  59 ++++++----
 tests/e2e/wdio.update.conf.js                 |  95 +++++++++-------
 16 files changed, 358 insertions(+), 172 deletions(-)
 create mode 100644 tests/e2e/spec/advanced.spec.js

diff --git a/src/background/adblocker.js b/src/background/adblocker.js
index 9452ad722..f9e90f368 100644
--- a/src/background/adblocker.js
+++ b/src/background/adblocker.js
@@ -92,11 +92,20 @@ async function updateEngines() {
 
     if (enabledEngines.length) {
       let updated = false;
+
       // Update engines from the list of enabled engines
-      for (const id of enabledEngines) {
-        if (id === engines.CUSTOM_ENGINE) continue;
-        updated = (await engines.update(id).catch(() => false)) || updated;
-      }
+      await Promise.all(
+        enabledEngines
+          .filter((id) => id !== engines.CUSTOM_ENGINE)
+          .map((id) =>
+            engines.update(id).then(
+              (v) => {
+                updated = updated || v;
+              },
+              () => {},
+            ),
+          ),
+      );
 
       // Reload the main engine after all engines are updated
       if (updated) await reloadMainEngine();
@@ -139,14 +148,16 @@ export const setup = asyncSetup([
     }
 
     if (options.filtersUpdatedAt < Date.now() - HOUR_IN_MS) {
-      updateEngines();
+      await updateEngines();
     }
   }),
   observe('experimentalFilters', async (value, lastValue) => {
     engines.setEnv('env_experimental', value);
 
     // Experimental filters changed to enabled
-    if (lastValue !== undefined && value) updateEngines();
+    if (lastValue !== undefined && value) {
+      await updateEngines();
+    }
   }),
 ]);
 
diff --git a/src/background/helpers.js b/src/background/helpers.js
index 060b824a5..68ff0976c 100644
--- a/src/background/helpers.js
+++ b/src/background/helpers.js
@@ -9,6 +9,8 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0
  */
 
+import { idleOptionsObservers } from '/store/options.js';
+
 chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
   switch (msg.action) {
     case 'getCurrentTab':
@@ -31,6 +33,15 @@ chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
     case 'openPrivateWindowWithUrl':
       chrome.windows.create({ url: msg.url, incognito: true });
       break;
+    // This is used only by the e2e tests to detect idle state
+    case 'idleOptionsObservers': {
+      idleOptionsObservers.then(() => {
+        sendResponse('done');
+        console.info('[helpers] "idleOptionsObservers" response...');
+      });
+
+      return true;
+    }
   }
 
   return false;
diff --git a/src/pages/settings/components/checkbox.js b/src/pages/settings/components/checkbox.js
index fe75af8eb..9b7cfa14d 100644
--- a/src/pages/settings/components/checkbox.js
+++ b/src/pages/settings/components/checkbox.js
@@ -11,26 +11,36 @@
 
 import { html } from 'hybrids';
 
-function clickSlottedElement(host, event) {
-  const target = host.render().querySelector('slot').assignedElements()[0];
-  if (event.target !== target) {
-    target.click();
+function clickInput(host, event) {
+  if (host.input && event.target !== host.input) {
+    event.stopPropagation();
+    host.input.click();
   }
 }
 
 export default {
   disabled: { value: false, reflect: true },
+  input: (host) => host.querySelector('input'),
+  checked: {
+    value: (host) => host.input?.checked ?? false,
+    connect: (host, key, invalidate) => {
+      host.input?.addEventListener('change', invalidate);
+      return () => {
+        host.input?.removeEventListener('change', invalidate);
+      };
+    },
+  },
   render: () => html`
-    <template layout="contents">
-      <label layout="row gap:0.5 items:center" onclick="${clickSlottedElement}">
+    <template layout="column">
+      <div layout="row items:center" onclick="${clickInput}">
         <slot></slot>
-        <ui-text type="body-s" color="gray-600">
+        <ui-text type="body-s" color="gray-600" layout="padding:left:0.5">
           <slot name="label"></slot>
         </ui-text>
-      </label>
+      </div>
     </template>
   `.css`
-    :host {
+    :host, ::slotted(*) {
       cursor: pointer;
       user-select: none;
     }
diff --git a/src/pages/settings/components/custom-filters.js b/src/pages/settings/components/custom-filters.js
index b9fc48395..f685edca8 100644
--- a/src/pages/settings/components/custom-filters.js
+++ b/src/pages/settings/components/custom-filters.js
@@ -48,7 +48,7 @@ export default {
             oninput="${html.set(input, 'text')}"
             disabled="${!store.ready(input) || disabled}"
             defaultValue="${store.ready(input) ? input.text : ''}"
-            data-qa="textarea:custom-filters"
+            data-qa="input:custom-filters"
           ></textarea>
         </settings-input>
 
@@ -62,7 +62,10 @@ export default {
         </ui-button>
         ${result &&
         html`
-          <div layout="column gap margin:top">
+          <div
+            layout="column gap margin:top"
+            data-qa="component:custom-filters:result"
+          >
             <div layout="column gap:0.5">
               <ui-text type="label-s" color="gray-600">
                 Custom filters has been updated
diff --git a/src/pages/settings/settings.js b/src/pages/settings/settings.js
index f22117fa3..64ac2ed95 100644
--- a/src/pages/settings/settings.js
+++ b/src/pages/settings/settings.js
@@ -29,7 +29,7 @@ export default {
   session: store(Session),
   render: ({ stack, session }) => html`
     <template layout="contents">
-      <settings-layout>
+      <settings-layout data-qa="page:settings">
         <a
           href="${router.url(Privacy)}"
           class="${{ active: router.active(Privacy) }}"
diff --git a/src/pages/settings/views/privacy.js b/src/pages/settings/views/privacy.js
index 4d22d1dfe..f978094d1 100644
--- a/src/pages/settings/views/privacy.js
+++ b/src/pages/settings/views/privacy.js
@@ -212,6 +212,7 @@ export default {
                         disabled="${globalPause ||
                         !options.regionalFilters.enabled}"
                         layout="grow"
+                        data-qa="checkbox:regional-filters:${id}"
                       >
                         <input
                           type="checkbox"
@@ -220,7 +221,6 @@ export default {
                             id,
                           )}"
                           onchange="${setRegion(id)}"
-                          data-qa="checkbox:regional-filters:${id}"
                         />
                         <span slot="label">
                           ${labels.languages.of(id.toUpperCase())} (${id})
@@ -335,7 +335,10 @@ export default {
                   html`
                     <div layout="column gap">
                       <div layout="self:start margin:bottom">
-                        <settings-checkbox disabled="${globalPause}">
+                        <settings-checkbox
+                          disabled="${globalPause}"
+                          data-qa="checkbox:custom-filters:trusted-scriptlets"
+                        >
                           <input
                             type="checkbox"
                             disabled="${globalPause}"
diff --git a/src/store/options.js b/src/store/options.js
index e9ee5b760..1c1784d70 100644
--- a/src/store/options.js
+++ b/src/store/options.js
@@ -24,6 +24,10 @@ export const GLOBAL_PAUSE_ID = '<all_urls>';
 
 const observers = new Set();
 
+// The promise is resolved when all observers executed.
+// This is used by the e2e tests to detect idle state.
+export let idleOptionsObservers = Promise.resolve();
+
 export const SYNC_OPTIONS = [
   'blockAds',
   'blockTrackers',
@@ -178,13 +182,15 @@ const Options = {
       // Sync if the current memory context get options for the first time
       if (!prevOptions) sync(options);
 
-      observers.forEach(async (fn) => {
-        try {
-          await fn(options, prevOptions);
-        } catch (e) {
-          console.error(`[options] Error while observing options: `, e);
+      idleOptionsObservers = (async () => {
+        for (const fn of observers) {
+          try {
+            await fn(options, prevOptions);
+          } catch (e) {
+            console.error(`[options] Error while observing options: `, e);
+          }
         }
-      });
+      })();
     },
   },
 };
diff --git a/src/utils/engines.js b/src/utils/engines.js
index b5d1b2028..b151a6092 100644
--- a/src/utils/engines.js
+++ b/src/utils/engines.js
@@ -249,7 +249,7 @@ export async function update(name) {
 
     const listURL = `https://${CDN_HOSTNAME}/adblocker/configs/${urlName}/allowed-lists.json`;
 
-    console.info(`[engines] Updating engine "${name}...`);
+    console.info(`[engines] Updating engine "${name}"...`);
 
     const data = await fetch(listURL)
       .then(check)
diff --git a/tests/README.md b/tests/README.md
index c511833f9..b0817b1fc 100644
--- a/tests/README.md
+++ b/tests/README.md
@@ -123,7 +123,7 @@ On Safari reloading the DNR rules may take up to a few minutes, so after pausing
 
 On the test page, trackers are not blocked or modified, ads are visible.
 
-### Global Pause  🤖
+### Global Pause 🤖
 
 > When Global Pause is enabled, the entire extension should turn off its blocking activity on all pages
 
@@ -143,7 +143,7 @@ On the test pages, trackers are not blocked or modified, ads are visible.
 
 ## Advanced features
 
-### Custom Filters
+### Custom Filters 🤖
 
 > Check whether it is possible to add a simple custom filter
 
diff --git a/tests/e2e/page.html b/tests/e2e/page.html
index 0e971757b..5b87e61f5 100644
--- a/tests/e2e/page.html
+++ b/tests/e2e/page.html
@@ -6,10 +6,19 @@
     <title>E2E Test Page</title>
   </head>
   <body>
+    <h1>Test Page</h1>
     <!-- Ad-Blocking CSS container -->
     <ad-slot style="display: block; height: 100px; background: red"></ad-slot>
+
     <!-- Anti-tracking tracking requests -->
     <script src="https://connect.facebook.net/en_US/fbevents.js"></script>
     <script src="https://s.pinimg.com/ct/core.js"></script>
+
+    <!-- Custom Filters -->
+    <script src="https://www.exmaple.com/track.js"></script>
+    <div
+      id="custom-filter"
+      style="display: block; height: 100px; background: blue"
+    ></div>
   </body>
 </html>
diff --git a/tests/e2e/spec/_onboarding.spec.js b/tests/e2e/spec/_onboarding.spec.js
index 7d4ffa3a6..ee63b1903 100644
--- a/tests/e2e/spec/_onboarding.spec.js
+++ b/tests/e2e/spec/_onboarding.spec.js
@@ -14,32 +14,32 @@ import {
   getExtensionElement,
   getExtensionPageURL,
   switchToPanel,
+  waitForIdleBackgroundTasks,
 } from '../utils.js';
 
 describe('Onboarding', function () {
-  beforeEach(async function () {
-    await browser.url(await getExtensionPageURL('onboarding'));
-  });
-
-  afterEach(async function () {
-    await browser.url('about:blank');
-  });
-
   it('keeps ghostery disabled', async function () {
+    await browser.url(await getExtensionPageURL('onboarding'));
     await getExtensionElement('button:skip').click();
     await expect(getExtensionElement('view:skip')).toBeDisplayed();
 
     await switchToPanel(async function () {
       await expect(getExtensionElement('button:enable')).toBeDisplayed();
     });
+
+    await browser.url('about:blank');
   });
 
   it('enables ghostery', async function () {
+    await browser.url(await getExtensionPageURL('onboarding'));
     await getExtensionElement('button:enable').click();
     await expect(getExtensionElement('view:success')).toBeDisplayed();
 
     await switchToPanel(async function () {
       await expect(getExtensionElement('button:enable')).not.toBeDisplayed();
+      await waitForIdleBackgroundTasks();
     });
+
+    await browser.url('about:blank');
   });
 });
diff --git a/tests/e2e/spec/advanced.spec.js b/tests/e2e/spec/advanced.spec.js
new file mode 100644
index 000000000..1fb77bab4
--- /dev/null
+++ b/tests/e2e/spec/advanced.spec.js
@@ -0,0 +1,104 @@
+/**
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2017-present Ghostery GmbH. All rights reserved.
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0
+ */
+import { browser, expect, $ } from '@wdio/globals';
+import {
+  enableExtension,
+  getExtensionElement,
+  setPrivacyToggle,
+  switchToPanel,
+} from '../utils.js';
+
+import { PAGE_DOMAIN, PAGE_URL } from '../wdio.conf.js';
+
+async function setCustomFilters(filters) {
+  await setPrivacyToggle('custom-filters', true);
+
+  const checkbox = await getExtensionElement(
+    'checkbox:custom-filters:trusted-scriptlets',
+  );
+
+  if (!(await checkbox.getProperty('checked'))) {
+    await checkbox.click();
+    await expect(checkbox).toHaveElementProperty('checked', true);
+  }
+
+  const input = await getExtensionElement('input:custom-filters');
+  await input.setValue(filters.join('\n'));
+
+  await getExtensionElement('button:custom-filters:save').click();
+
+  await expect(
+    getExtensionElement('component:custom-filters:result'),
+  ).toBeDisplayed();
+}
+
+describe('Advanced Features', function () {
+  before(enableExtension);
+
+  describe('Custom Filters', function () {
+    it('adds custom filters in settings page', async function () {
+      await setCustomFilters([
+        `@@connect.facebook.net^`,
+        `${PAGE_DOMAIN}###custom-filter`,
+        `${PAGE_DOMAIN}##+js(rpnt, h1, Test Page, "Hello world")`,
+      ]);
+    });
+
+    it('adds custom network filter', async function () {
+      await browser.url(PAGE_URL);
+
+      await switchToPanel(async () => {
+        await getExtensionElement('button:detailed-view').click();
+
+        await expect(
+          getExtensionElement(`icon:tracker:facebook_connect:blocked`),
+        ).not.toBeDisplayed();
+        await expect(
+          getExtensionElement(`icon:tracker:facebook_connect:modified`),
+        ).not.toBeDisplayed();
+      });
+    });
+
+    it('adds custom cosmetic filter', async function () {
+      await browser.url(PAGE_URL);
+      await expect($('#custom-filter')).not.toBeDisplayed();
+    });
+
+    it('adds custom scriptlet filter', async function () {
+      await browser.url(PAGE_URL);
+      await expect($('h1')).toHaveText('Hello world');
+    });
+
+    it('disables custom filters', async function () {
+      // Switching off custom filters requires rebuilding main engine
+      // and it slows down the update of the DNR rules (it goes after the main engine)
+      await setPrivacyToggle('custom-filters', false, 5);
+
+      await browser.url(PAGE_URL);
+
+      await expect($('#custom-filter')).toBeDisplayed();
+      await expect($('h1')).toHaveText('Test Page');
+
+      await switchToPanel(async () => {
+        await getExtensionElement('button:detailed-view').click();
+
+        await expect(
+          getExtensionElement('icon:tracker:facebook_connect:blocked'),
+        ).toBeDisplayed();
+      });
+    });
+
+    it('removes custom filters in settings page', async function () {
+      await setCustomFilters([]);
+      await setPrivacyToggle('custom-filters', false);
+    });
+  });
+});
diff --git a/tests/e2e/spec/main.spec.js b/tests/e2e/spec/main.spec.js
index 8ea20461d..8b73c6ed1 100644
--- a/tests/e2e/spec/main.spec.js
+++ b/tests/e2e/spec/main.spec.js
@@ -8,49 +8,34 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0
  */
+
 import { browser, expect, $ } from '@wdio/globals';
 import {
-  disableCache,
   enableExtension,
   getExtensionElement,
-  getExtensionPageURL,
+  setPrivacyToggle,
   switchToPanel,
+  waitForIdleBackgroundTasks,
 } from '../utils.js';
 
 import { PAGE_URL } from '../wdio.conf.js';
 
-async function updatePrivacySettings(name, value) {
-  await browser.url(await getExtensionPageURL('settings'));
-
-  const toggle = await getExtensionElement(`toggle:${name}`);
-  if ((await toggle.getProperty('value')) !== value) {
-    await toggle.click();
-  }
-
-  await expect(toggle).toHaveElementProperty('value', value);
-
-  // Allow background process to update the settings
-  // E.g. reload engines / DNR rules
-  await browser.pause(2000);
-}
-
 describe('Main Features', function () {
   before(enableExtension);
 
   describe('Never-consent', function () {
-    beforeEach(() => updatePrivacySettings('never-consent', false));
-
     const WEBSITE_URL = 'https://stackoverflow.com/';
     const SELECTOR = '#onetrust-consent-sdk';
 
     it('displays consent popup', async function () {
+      await setPrivacyToggle('never-consent', false);
       await browser.url(WEBSITE_URL);
 
       await expect($(SELECTOR)).toBeDisplayed();
     });
 
     it('closes the consent popup', async function () {
-      await updatePrivacySettings('never-consent', true);
+      await setPrivacyToggle('never-consent', true);
 
       await browser.url(WEBSITE_URL);
       // Let the never-consent take effect
@@ -64,17 +49,16 @@ describe('Main Features', function () {
   });
 
   describe('Ad-Blocking', function () {
-    beforeEach(() => updatePrivacySettings('ad-blocking', false));
-
     const SELECTOR = 'ad-slot';
 
     it('does not block ads on a page', async function () {
+      await setPrivacyToggle('ad-blocking', false);
       await browser.url(PAGE_URL);
       await expect($(SELECTOR)).toBeDisplayed();
     });
 
     it('blocks ads on a page', async function () {
-      await updatePrivacySettings('ad-blocking', true);
+      await setPrivacyToggle('ad-blocking', true);
 
       await browser.url(PAGE_URL);
       await expect($(SELECTOR)).not.toBeDisplayed();
@@ -82,88 +66,76 @@ describe('Main Features', function () {
   });
 
   describe('Anti-Tracking', function () {
-    beforeEach(() => updatePrivacySettings('anti-tracking', false));
-
     const TRACKER_IDS = ['facebook_connect', 'pinterest_conversion_tracker'];
 
     it('does not block tracker requests on the page', async function () {
-      await disableCache();
+      await setPrivacyToggle('anti-tracking', false);
       await browser.url(PAGE_URL);
 
       await switchToPanel(async function () {
         await getExtensionElement('button:detailed-view').click();
 
         for (const trackerId of TRACKER_IDS) {
-          const trackerEl = await getExtensionElement(
-            `button:tracker:${trackerId}`,
-          );
-
-          if (trackerEl.isDisplayed()) {
-            await expect(
-              getExtensionElement(`icon:tracker:${trackerId}:blocked`),
-            ).not.toBeDisplayed();
-            await expect(
-              getExtensionElement(`icon:tracker:${trackerId}:modified`),
-            ).not.toBeDisplayed();
-          }
+          await expect(
+            getExtensionElement(`icon:tracker:${trackerId}:blocked`),
+          ).not.toBeDisplayed();
+          await expect(
+            getExtensionElement(`icon:tracker:${trackerId}:modified`),
+          ).not.toBeDisplayed();
         }
       });
     });
 
     it('blocks tracker requests on the page', async function () {
-      await updatePrivacySettings('anti-tracking', true);
+      await setPrivacyToggle('anti-tracking', true);
 
-      await disableCache();
       await browser.url(PAGE_URL);
 
       await switchToPanel(async function () {
         await getExtensionElement('button:detailed-view').click();
 
         for (const trackerId of TRACKER_IDS) {
-          const trackerEl = await getExtensionElement(
-            `button:tracker:${trackerId}`,
-          );
-
-          if (trackerEl.isDisplayed()) {
-            await expect(
-              getExtensionElement(`icon:tracker:${trackerId}:blocked`),
-            ).toBeDisplayed();
-          }
+          await expect(
+            getExtensionElement(`icon:tracker:${trackerId}:blocked`),
+          ).toBeDisplayed();
         }
       });
     });
   });
 
   describe('Regional Filters', function () {
-    beforeEach(() => updatePrivacySettings('regional-filters', false));
-
     const WEBSITE_URL = 'https://www.cowwilanowie.pl/';
     const SELECTOR = '.a-slider';
 
     it('shows the ads on the page', async function () {
+      await setPrivacyToggle('regional-filters', false);
       await browser.url(WEBSITE_URL);
       await expect($(SELECTOR)).toBeDisplayed();
     });
 
     it('hides the ads on the page', async function () {
-      await updatePrivacySettings('regional-filters', true);
+      await setPrivacyToggle('regional-filters', true);
       const checkbox = await getExtensionElement(
         'checkbox:regional-filters:pl',
       );
 
       if (!(await checkbox.getProperty('checked'))) {
         await checkbox.click();
-        await expect(checkbox).toBeChecked();
+        await expect(checkbox).toHaveElementProperty('checked', true);
       }
 
+      // Allow engines to reload
+      await waitForIdleBackgroundTasks();
+
       await browser.url(WEBSITE_URL);
       await expect($(SELECTOR)).not.toBeDisplayed();
+      await setPrivacyToggle('regional-filters', false);
     });
   });
 
   describe('Global Pause', function () {
     it('shows blocked trackers in the panel', async function () {
-      await updatePrivacySettings('global-pause', false);
+      await setPrivacyToggle('global-pause', false);
       await browser.url(PAGE_URL);
 
       await switchToPanel(async function () {
@@ -172,7 +144,7 @@ describe('Main Features', function () {
     });
 
     it("doesn't show blocked trackers in the panel", async function () {
-      await updatePrivacySettings('global-pause', true);
+      await setPrivacyToggle('global-pause', true);
       await browser.url(PAGE_URL);
 
       await switchToPanel(async function () {
@@ -180,6 +152,8 @@ describe('Main Features', function () {
           getExtensionElement('component:feedback'),
         ).not.toBeDisplayed();
       });
+
+      await setPrivacyToggle('global-pause', false);
     });
   });
 
@@ -188,14 +162,9 @@ describe('Main Features', function () {
       await browser.url(PAGE_URL);
 
       await switchToPanel(async function () {
-        const pauseComponent = await getExtensionElement('component:pause');
         const pauseButton = await getExtensionElement('button:pause');
-
-        if (await pauseComponent.getProperty('paused')) {
-          await pauseButton.click();
-        }
-
         await pauseButton.click();
+
         await expect(
           getExtensionElement('component:feedback'),
         ).not.toBeDisplayed();
diff --git a/tests/e2e/utils.js b/tests/e2e/utils.js
index 0585021db..632598d48 100644
--- a/tests/e2e/utils.js
+++ b/tests/e2e/utils.js
@@ -11,12 +11,8 @@
 
 import { browser, expect, $ } from '@wdio/globals';
 
-export async function disableCache() {
-  if (browser.isChromium) {
-    await browser.sendCommand('Network.setCacheDisabled', {
-      cacheDisabled: true,
-    });
-  }
+function getProtocol() {
+  return browser.isChromium ? 'chrome-extension' : 'moz-extension';
 }
 
 let extensionId = '';
@@ -45,13 +41,32 @@ async function getExtensionId() {
 }
 
 export async function getExtensionPageURL(page, file = 'index.html') {
-  return `${browser.isChromium ? 'chrome-extension' : 'moz-extension'}://${await getExtensionId()}/pages/${page}/${file}`;
+  return `${getProtocol()}://${await getExtensionId()}/pages/${page}/${file}`;
 }
 
 export function getExtensionElement(id) {
   return $(`>>>[data-qa="${id}"]`);
 }
 
+export async function waitForIdleBackgroundTasks() {
+  if (!(await browser.getUrl()).startsWith(getProtocol())) {
+    throw new Error(
+      'Background idle state must be checked from the extension context',
+    );
+  }
+
+  // Wait for the 'idleOptionsObservers' response
+  const result = await browser.execute(
+    browser.isChromium
+      ? () => chrome.runtime.sendMessage({ action: 'idleOptionsObservers' })
+      : () => browser.runtime.sendMessage({ action: 'idleOptionsObservers' }),
+  );
+
+  if (result !== 'done') {
+    throw new Error(`Background tasks did not respond with "done": ${result}`);
+  }
+}
+
 export async function enableExtension() {
   const isDisabled = await switchToPanel(async function () {
     return await getExtensionElement('button:enable').isDisplayed();
@@ -63,11 +78,28 @@ export async function enableExtension() {
     await getExtensionElement('button:enable').click();
     await expect(getExtensionElement('view:success')).toBeDisplayed();
 
-    // Give the extension some time to initialize (updating the engines in the background)
-    await browser.pause(2000);
+    await waitForIdleBackgroundTasks();
   }
 }
 
+export async function setToggle(name, value) {
+  const toggle = await getExtensionElement(`toggle:${name}`);
+
+  if ((await toggle.getProperty('value')) !== value) {
+    await toggle.click();
+
+    // Allow background process to update the settings
+    await waitForIdleBackgroundTasks();
+  }
+
+  await expect(toggle).toHaveElementProperty('value', value);
+}
+
+export async function setPrivacyToggle(name, value) {
+  await browser.url(await getExtensionPageURL('settings'));
+  await setToggle(name, value);
+}
+
 export async function switchToPanel(fn) {
   const context = await browser.getTitle();
   const url = await getExtensionPageURL('panel');
@@ -82,7 +114,9 @@ export async function switchToPanel(fn) {
       await browser.newWindow(url);
     }
 
-    await browser.pause(1000);
+    await browser.waitUntil(
+      async () => (await browser.getTitle()) === 'Ghostery panel',
+    );
 
     const result = await fn();
 
diff --git a/tests/e2e/wdio.conf.js b/tests/e2e/wdio.conf.js
index 2ac853a0c..f9b08cffd 100644
--- a/tests/e2e/wdio.conf.js
+++ b/tests/e2e/wdio.conf.js
@@ -31,7 +31,8 @@ export const FIREFOX_PATH = path.join(WEB_EXT_PATH, 'ghostery-firefox.zip');
 export const CHROME_PATH = path.join(WEB_EXT_PATH, 'ghostery-chromium');
 
 const PAGE_PORT = 6789;
-export const PAGE_URL = `http://page.localhost:${PAGE_PORT}/`;
+export const PAGE_DOMAIN = `page.localhost`;
+export const PAGE_URL = `http://${PAGE_DOMAIN}:${PAGE_PORT}/`;
 
 // Generate arguments from command line
 export const argv = process.argv.slice(2).reduce(
@@ -85,14 +86,14 @@ export function buildForChrome() {
 }
 
 export const config = {
-  specs: argv.debug ? [['**/*.spec.js']] : ['**/*.spec.js'],
-  specFileRetries: 2,
-  reporters: argv.debug ? ['spec'] : [],
+  specs: [['**/*.spec.js']],
+  reporters: [['spec', { showPreface: false, onlyFailures: true }]],
   logLevel: argv.debug ? 'error' : 'silent',
   mochaOpts: {
-    retries: 2,
     timeout: argv.debug ? 24 * 60 * 60 * 1000 : 60 * 1000,
+    retries: 2,
   },
+  maxInstances: process.env.GITHUB_ACTIONS ? 1 : 2,
   capabilities: [
     {
       browserName: 'firefox',
@@ -143,27 +144,39 @@ export const config = {
     }
   },
   before: async (capabilities, specs, browser) => {
-    if (capabilities.browserName === 'firefox') {
-      const extension = readFileSync(FIREFOX_PATH);
-      await browser.installAddOn(extension.toString('base64'), true);
-    }
+    try {
+      if (capabilities.browserName === 'firefox') {
+        const extension = readFileSync(FIREFOX_PATH);
+        await browser.installAddOn(extension.toString('base64'), true);
+      }
 
-    // Waits and closes the onboarding page opened by the extension
-    // This is necessary to avoid the onboarding page opened in
-    // random moment from clashing with the tests
+      // Disable cache for Chrome to avoid caching issues
+      if (capabilities.browserName === 'chrome') {
+        await browser.sendCommand('Network.setCacheDisabled', {
+          cacheDisabled: true,
+        });
+      }
 
-    const currentUrl = await browser.getUrl();
+      // Waits and closes the onboarding page opened by the extension
+      // This is necessary to avoid the onboarding page opened in
+      // random moment from clashing with the tests
 
-    await browser.waitUntil(async function () {
-      try {
-        await browser.switchWindow('Welcome to Ghostery');
-        return true;
-      } catch {
-        return false;
-      }
-    });
+      const currentUrl = await browser.getUrl();
+
+      await browser.waitUntil(async function () {
+        try {
+          await browser.switchWindow('Welcome to Ghostery');
+          return true;
+        } catch {
+          return false;
+        }
+      });
 
-    await browser.closeWindow();
-    await browser.switchWindow(currentUrl);
+      await browser.closeWindow();
+      await browser.switchWindow(currentUrl);
+    } catch (e) {
+      console.error('Error while setting up test environment', e);
+      process.exit(1);
+    }
   },
 };
diff --git a/tests/e2e/wdio.update.conf.js b/tests/e2e/wdio.update.conf.js
index 7476b0292..b0838b4aa 100644
--- a/tests/e2e/wdio.update.conf.js
+++ b/tests/e2e/wdio.update.conf.js
@@ -20,7 +20,7 @@ import {
 import { execSync } from 'node:child_process';
 import { $, expect } from '@wdio/globals';
 
-import { getExtensionPageURL } from './utils.js';
+import { getExtensionPageURL, waitForIdleBackgroundTasks } from './utils.js';
 import * as wdio from './wdio.conf.js';
 
 /*
@@ -30,7 +30,7 @@ import * as wdio from './wdio.conf.js';
  */
 export const config = {
   ...wdio.config,
-  specs: ['**/*.spec.js'],
+  specs: [['**/*.spec.js']],
   exclude: ['spec/_onboarding.spec.js'],
   onPrepare: async (config, capabilities) => {
     if (wdio.argv.clean) {
@@ -97,51 +97,64 @@ export const config = {
   before: async (capabilities, specs, browser) => {
     await wdio.config.before(capabilities, specs, browser);
 
-    const onboardingUrl = await getExtensionPageURL('onboarding');
-    const currentUrl = await browser.getUrl();
-
-    await browser.newWindow(onboardingUrl);
+    try {
+      const onboardingUrl = await getExtensionPageURL('onboarding');
+      const currentUrl = await browser.getUrl();
 
-    // Get element by common selector, as the `data-qa` attribute was introduced in v10.4.9
-    await $('ui-button[type=success]').click();
-    await expect($('ui-button[type=success]')).not.toBeDisplayed();
+      await browser.newWindow(onboardingUrl);
 
-    // Reload extension with the source
-    switch (capabilities.browserName) {
-      case 'chrome': {
-        renameSync(wdio.CHROME_PATH, `${wdio.CHROME_PATH}-old`);
-        cpSync(`${wdio.CHROME_PATH}-source`, wdio.CHROME_PATH, {
-          recursive: true,
-        });
-        rmSync(`${wdio.CHROME_PATH}-old`, { recursive: true, force: true });
+      // Get element by common selector, as the `data-qa` attribute was introduced in v10.4.9
+      await $('>>>ui-button[type=success]').click();
+      await expect($('>>>ui-button[type=success]')).not.toBeDisplayed();
 
-        browser.execute('chrome.runtime.reload()');
+      // Reload extension with the source
+      switch (capabilities.browserName) {
+        case 'chrome': {
+          renameSync(wdio.CHROME_PATH, `${wdio.CHROME_PATH}-old`);
+          cpSync(`${wdio.CHROME_PATH}-source`, wdio.CHROME_PATH, {
+            recursive: true,
+          });
+          rmSync(`${wdio.CHROME_PATH}-old`, { recursive: true, force: true });
 
-        await browser.switchWindow(currentUrl);
-        await expect($('extensions-review-panel')).toBeDisplayed();
+          browser.execute(() => chrome.runtime.reload());
 
-        break;
-      }
-      case 'firefox': {
-        const extension = readFileSync(
-          `${wdio.FIREFOX_PATH.replace('.zip', '')}-source.zip`,
-        );
-        browser.installAddOn(extension.toString('base64'), true);
-
-        await browser.switchWindow(currentUrl);
-
-        await expect(
-          $('.extension-backgroundscript__status'),
-        ).toHaveElementClass(
-          expect.stringContaining(
-            'extension-backgroundscript__status--running',
-          ),
-        );
-
-        break;
+          await browser.switchWindow(currentUrl);
+          await expect($('extensions-review-panel')).toBeDisplayed();
+          break;
+        }
+        case 'firefox': {
+          const extension = readFileSync(
+            `${wdio.FIREFOX_PATH.replace('.zip', '')}-source.zip`,
+          );
+          browser.installAddOn(extension.toString('base64'), true);
+
+          await browser.switchWindow(currentUrl);
+
+          await expect(
+            $('.extension-backgroundscript__status'),
+          ).toHaveElementClass(
+            expect.stringContaining(
+              'extension-backgroundscript__status--running',
+            ),
+          );
+
+          // Without the pase, Firefox throws sometimes web-driver exceptions
+          // It must be related to the extension reloading process.
+          // As there is no way to wait for the extension to be reloaded
+          // better than above check, we just wait for a few seconds.
+          browser.pause(5000);
+
+          break;
+        }
       }
-    }
 
-    console.log('Extension reloaded...');
+      await browser.url(await getExtensionPageURL('settings'));
+      await waitForIdleBackgroundTasks();
+
+      console.log('Extension reloaded...');
+    } catch (e) {
+      console.error('Error while preparing test environment', e);
+      process.exit(1);
+    }
   },
 };