chore(tests): Add e2e tests for main privacy features

src/pages/panel/components/pause.js

@@ -77,6 +77,7 @@ export default {
         layout="row center margin:1.5 height:6"
         layout@390px="height:7"
         onclick="${!pauseList && dispatchAction}"
+        data-qa="button:pause"
       >
         <div id="label" layout="grow row center gap shrink overflow">
           <ui-icon name="pause"></ui-icon>

src/pages/panel/views/home.js

@@ -46,10 +46,7 @@ function showAlert(host, message) {
 
 function reloadTab() {
   setTimeout(async () => {
-    const [tab] = await chrome.tabs.query({
-      active: true,
-      currentWindow: true,
-    });
+    const tab = await chrome.runtime.sendMessage({ action: 'getCurrentTab' });
     chrome.tabs.reload(tab.id);
   }, 1000);
 }
@@ -158,6 +155,7 @@ export default {
                 paused="${paused || globalPause}"
                 global="${globalPause}"
                 revokeAt="${globalPause?.revokeAt || paused?.revokeAt}"
+                data-qa="component:pause"
               >
               </panel-pause>
             `

src/store/tab-stats.js

@@ -84,7 +84,7 @@ const Stats = {
         return tabStats;
       }
 
-      const { hostname } = parse(tab.url);
+      const hostname = parse(tab.url).hostname?.replace(/^www\./, '');
       return { hostname };
     },
     observe:

src/ui/components/stats.js

@@ -117,6 +117,7 @@ export default {
                 grouped
                 active="${type === 'list'}"
                 layout="size:30px"
+                data-qa="button:detailed-view"
               >
                 <button onclick="${html.set('type', 'list')}">
                   <ui-icon name="list" color="gray-800"></ui-icon>
@@ -195,6 +196,7 @@ export default {
                                 trackerId: tracker.id,
                               })}"
                               layout="row items:center gap:0.5 padding:0.5:0"
+                              data-qa="button:tracker:${tracker.id}"
                             >
                               <ui-tooltip>
                                 <span slot="content">
@@ -209,11 +211,13 @@ export default {
                               html`<ui-icon
                                 name="block-s"
                                 color="danger-700"
+                                data-qa="icon:tracker:${tracker.id}:blocked"
                               ></ui-icon>`}
                               ${tracker.modified &&
                               html`<ui-icon
                                 name="eye"
                                 color="primary-700"
+                                data-qa="icon:tracker:${tracker.id}:modified"
                               ></ui-icon>`}
                             </a>
                           </ui-text>

tests/README.md

@@ -7,15 +7,16 @@ After passing all the following tests, it can be assumed with a high level of co
 * The tests must be performed in the order given below - some of the tests depend on the results of the previous ones
 * The browser must have cleared cookies and cache before starting the tests
 
-Dictionary:
+### Dictionary
 
 * `TEST PAGE` - The test pages can be adjusted. The examples mentioned in the steps below are those on which the functionality you want to test can be quickly checked.
 * `REGIONAL TEST PAGE` - The regional test page can be changed to a different one. Likewise, the region itself can be changed to any other region.
 * `CUSTOM FILTER` - The custom filter can be changed in any way according to the instruction 'Learn more on supported syntax'.
+* 🤖 - Tests added to end-to-end automation
 
 ## Onboarding
 
-### Disable extension
+### Disable extension 🤖
 
 > On the Onboarding tab, keep Ghostery disabled
 
@@ -27,7 +28,7 @@ Dictionary:
 
 Ghostery is installed but kept disabled.
 
-### Enable extension
+### Enable extension 🤖
 
 > On the Onboarding tab, enable Ghostery to give all necessary permissions
 
@@ -43,7 +44,7 @@ Ghostery is installed and enabled.
 
 ## Main features
 
-### Never-Consent
+### Never-Consent 🤖
 
 > When Never-Consent is run on a test page, cookie pop-ups should be blocked
 
@@ -57,7 +58,7 @@ Ghostery is installed and enabled.
 
 The cookie pop-up is hidden.
 
-### Ad-Blocking
+### Ad-Blocking 🤖
 
 > Ads on the test site must disappear when the Ad-Blocking module is activated
 
@@ -71,7 +72,7 @@ The cookie pop-up is hidden.
 
 Ads on the test site are not visible
 
-### Anti-tracking
+### Anti-tracking 🤖
 
 > When Anti-Tracking is enabled on a test site, URLs for the selected tracker should be blocked
 
@@ -91,7 +92,7 @@ On Safari all of the DNR rules are provided by one combined list (ads), so the t
 
 URLs for the selected tracker are blocked.
 
-### Regional Filters
+### Regional Filters 🤖
 
 > Regional filters should work on a selected region - the test uses Polish region and a Polish website to test this functionality
 
@@ -106,7 +107,7 @@ URLs for the selected tracker are blocked.
 
 Ad on the regional test site is blocked.
 
-### Pause Website
+### Pause Website 🤖
 
 > When Website Pause is enabled, the entire extension should turn off its activity only on the test page
 
@@ -122,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
 

tests/e2e/privacy.spec.js

@@ -85,10 +85,122 @@ describe('Privacy', () => {
     });
   });
 
+  describe('Anti-Tracking', () => {
+    beforeEach(() => updatePrivacySettings('anti-tracking', false));
+
+    const WEBSITE_URL = 'https://www.aarp.org/';
+    const TRACKER_IDS = [
+      'ispot.tv',
+      'facebook_connect',
+      'pinterest_conversion_tracker',
+    ];
+
+    it('does not block tracker requests on the page', async () => {
+      await browser.url(WEBSITE_URL);
+
+      await switchToPanel(async () => {
+        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();
+          }
+        }
+      });
+    });
+
+    it('blocks tracker requests on the page', async () => {
+      await updatePrivacySettings('anti-tracking', true);
+      await browser.url(WEBSITE_URL);
+
+      await switchToPanel(async () => {
+        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();
+          }
+        }
+      });
+    });
+  });
+
+  describe('Regional Filters', () => {
+    beforeEach(() => updatePrivacySettings('regional-filters', false));
+
+    const WEBSITE_URL = 'https://www.cowwilanowie.pl/';
+    const SELECTOR = '.a-slider';
+
+    it('shows the ads on the page', async () => {
+      await browser.url(WEBSITE_URL);
+      await expect($(SELECTOR)).toBeDisplayed();
+    });
+
+    it('hides the ads on the page', async () => {
+      await updatePrivacySettings('regional-filters', true);
+      const checkbox = await getExtensionElement(
+        'checkbox:regional-filters:pl',
+      );
+
+      if (!(await checkbox.getProperty('checked'))) {
+        await checkbox.click();
+        await expect(checkbox.getProperty('checked')).toBe(true);
+      }
+
+      await browser.url(WEBSITE_URL);
+      await expect($(SELECTOR)).not.toBeDisplayed();
+    });
+  });
+
+  describe('Pause Website', () => {
+    const WEBSITE_URL = 'https://www.onet.pl/';
+    const SELECTOR = 'div[class^="AdSlotPlaceholder_"]';
+
+    it("pauses the website's privacy settings", async () => {
+      await browser.url(WEBSITE_URL);
+
+      await switchToPanel(async () => {
+        if (
+          !(await getExtensionElement('component:pause').getProperty('paused'))
+        ) {
+          await getExtensionElement('button:pause').click();
+          await browser.pause(1000); // Pausing triggers the page reload after 1s
+        }
+      });
+      await expect($(SELECTOR)).toBeDisplayed();
+
+      await switchToPanel(async () => {
+        if (
+          await getExtensionElement('component:pause').getProperty('paused')
+        ) {
+          await getExtensionElement('button:pause').click();
+          await browser.pause(1000); // Pausing triggers the page reload after 1s
+        }
+      });
+
+      await expect($(SELECTOR)).not.toBeDisplayed();
+    });
+  });
+
   describe('Global pause', () => {
     const WEBSITE_URL = 'https://www.onet.pl/';
 
-    it("shows blocked trackers in the panel when it's turned off", async () => {
+    it('shows blocked trackers in the panel', async () => {
       await updatePrivacySettings('global-pause', false);
       await browser.url(WEBSITE_URL);
 
@@ -97,7 +209,7 @@ describe('Privacy', () => {
       });
     });
 
-    it("doesn't show blocked trackers in the panel when it's turned on", async () => {
+    it("doesn't show blocked trackers in the panel", async () => {
       await updatePrivacySettings('global-pause', true);
       await browser.url(WEBSITE_URL);
 

tests/e2e/utils.js

@@ -45,7 +45,7 @@ export async function getExtensionPageURL(page, file = 'index.html') {
 }
 
 export function getExtensionElement(id) {
-  return $(`[data-qa="${id}"]`);
+  return $(`>>>[data-qa="${id}"]`);
 }
 
 export async function enableExtension() {
@@ -64,8 +64,12 @@ export async function switchToPanel(fn) {
     await browser.pause(1000);
     // When the panel is not opened yet, the switchWindow will throw
     // so then (for the first time) we need to open the panel in a new window
-    await browser.switchWindow(url).catch(() => browser.newWindow(url));
-    await browser.url(url);
+    try {
+      await browser.switchWindow(url);
+      await browser.url(url);
+    } catch {
+      browser.newWindow(url);
+    }
 
     await fn();
 

tests/wdio.conf.js

@@ -41,7 +41,7 @@ if (process.env.DEBUG) {
 } else {
   config = {
     ...config,
-    specFileRetries: 5,
+    specFileRetries: 2,
     specFileRetriesDelay: 15,
     capabilities: [
       {