puppeteer for ati

cypress.config.ts

@@ -3,6 +3,7 @@ import { defineConfig } from 'cypress';
 import webpackPreprocessor from '@cypress/webpack-preprocessor';
 import fs from 'fs';
 import path from 'path';
+import { setup, Browser as PuppeteerBrowser } from '@cypress/puppeteer';
 import MomentTimezoneInclude from './src/app/legacy/psammead/moment-timezone-include/src';
 import { webpackDirAlias } from './dirAlias';
 
@@ -113,7 +114,15 @@ export default defineConfig({
           return null;
         },
       });
-
+      setup({
+        on,
+        onMessage: {
+          async openTab(browser: PuppeteerBrowser, url: string) {
+            global.page = await browser.newPage();
+            await global.page.goto(url);
+          },
+        },
+      });
       return config;
     },
     env: {

cypress/e2e/specialFeatures/atiAnalytics/assertions/billboard.js

@@ -1,4 +1,8 @@
-import { interceptATIAnalyticsBeacons, COMPONENTS } from '../helpers';
+import {
+  interceptATIAnalyticsBeacons,
+  COMPONENTS,
+  visitPageInNewTab,
+} from '../helpers';
 import { assertATIComponentClickEvent, assertATIComponentViewEvent } from '.';
 
 const { BILLBOARD } = COMPONENTS;
@@ -11,7 +15,7 @@ export const assertBillboardComponentView = ({
   it('should send a view event for the Billboard component', () => {
     cy.url().then(url => {
       interceptATIAnalyticsBeacons();
-      cy.visit(url);
+      visitPageInNewTab(url);
 
       cy.get('[data-testid="billboard-1"]').scrollIntoView({
         duration: 1000,
@@ -35,7 +39,7 @@ export const assertBillboardComponentClick = ({
   it('should send a click event for the Billboard component', () => {
     cy.url().then(url => {
       interceptATIAnalyticsBeacons();
-      cy.visit(url);
+      visitPageInNewTab(url);
 
       cy.get('[data-testid="billboard-1"]').scrollIntoView({
         duration: 1000,
@@ -52,7 +56,7 @@ export const assertBillboardComponentClick = ({
       });
 
       // return to previous page
-      cy.visit(url);
+      visitPageInNewTab(url);
     });
   });
 };

cypress/e2e/specialFeatures/atiAnalytics/assertions/featuresAnalysis.js

@@ -1,4 +1,8 @@
-import { interceptATIAnalyticsBeacons, COMPONENTS } from '../helpers';
+import {
+  interceptATIAnalyticsBeacons,
+  COMPONENTS,
+  visitPageInNewTab,
+} from '../helpers';
 import { assertATIComponentClickEvent, assertATIComponentViewEvent } from '.';
 
 const { FEATURES } = COMPONENTS;
@@ -11,7 +15,7 @@ export const assertFeaturesAnalysisComponentView = ({
   it('should send a view event for the Features & Analysis component', () => {
     cy.url().then(url => {
       interceptATIAnalyticsBeacons();
-      cy.visit(url);
+      visitPageInNewTab(url);
 
       cy.get('[data-testid="features"]').scrollIntoView({ duration: 1000 });
 
@@ -33,7 +37,7 @@ export const assertFeaturesAnalysisComponentClick = ({
   it.skip('should send a click event for the Features & Analysis component', () => {
     cy.url().then(url => {
       interceptATIAnalyticsBeacons();
-      cy.visit(url);
+      visitPageInNewTab(url);
 
       cy.get('[data-testid="features"]').scrollIntoView({ duration: 1000 });
 
@@ -51,7 +55,7 @@ export const assertFeaturesAnalysisComponentClick = ({
       });
 
       // return to previous page
-      cy.visit(url);
+      visitPageInNewTab(url);
     });
   });
 };

cypress/e2e/specialFeatures/atiAnalytics/assertions/index.js

@@ -3,6 +3,7 @@
   ATI_PAGE_VIEW_REVERB,
   getATIParamsFromURL,
   interceptATIAnalyticsBeacons,
+  visitPageInNewTab,
 } from '../helpers';
 
 const assertATIPageViewEventParamsExist = ({
@@ -73,9 +74,9 @@
   it(`should send a page view event with service = ${service}, page identifier = ${pageIdentifier}, application type = ${applicationType} and content type = ${contentType}`, () => {
     cy.url().then(url => {
       interceptATIAnalyticsBeacons();
-      cy.visit(url);
+      visitPageInNewTab(url);
 
       console.log(
         'url in assertPageView just after cy.visit in assertPageView',
         url,
       );
@@ -84,7 +85,7 @@
 
       cy.wait(`@${atiPageViewAlias}`).then(({ request }) => {
         const params = getATIParamsFromURL(request.url);
         console.log(
           'p param from getATIParamsFromUrl assertPageView',
           params.p,
           'for URL',

cypress/e2e/specialFeatures/atiAnalytics/assertions/latestMedia.js

@@ -1,4 +1,8 @@
-import { interceptATIAnalyticsBeacons, COMPONENTS } from '../helpers';
+import {
+  interceptATIAnalyticsBeacons,
+  COMPONENTS,
+  visitPageInNewTab,
+} from '../helpers';
 import { assertATIComponentClickEvent, assertATIComponentViewEvent } from '.';
 
 const { LATEST_MEDIA } = COMPONENTS;
@@ -11,7 +15,7 @@ export const assertLatestMediaComponentView = ({
   it('should send a view event for the Latest Media component', () => {
     cy.url().then(url => {
       interceptATIAnalyticsBeacons();
-      cy.visit(url);
+      visitPageInNewTab(url);
 
       cy.get('[data-testid="latest-media"]').scrollIntoView({ duration: 1000 });
 
@@ -33,7 +37,7 @@ export const assertLatestMediaComponentClick = ({
   it('should send a click event for the Latest Media component', () => {
     cy.url().then(url => {
       interceptATIAnalyticsBeacons();
-      cy.visit(url);
+      visitPageInNewTab(url);
 
       cy.get('[data-testid="latest-media"]').scrollIntoView({
         duration: 1000,
@@ -50,7 +54,7 @@ export const assertLatestMediaComponentClick = ({
       });
 
       // return to previous page
-      cy.visit(url);
+      visitPageInNewTab(url);
     });
   });
 };

cypress/e2e/specialFeatures/atiAnalytics/assertions/liteSiteCta.js

@@ -1,4 +1,8 @@
-import { COMPONENTS, interceptATIAnalyticsBeacons } from '../helpers';
+import {
+  COMPONENTS,
+  interceptATIAnalyticsBeacons,
+  visitPageInNewTab,
+} from '../helpers';
 import { assertATIComponentClickEvent } from '.';
 
 const { LITE_SITE_CTA } = COMPONENTS;
@@ -11,7 +15,7 @@ export const assertLiteSiteCTAComponentClick = ({
   it('should send a click event for the Lite Site CTA component', () => {
     cy.url().then(url => {
       interceptATIAnalyticsBeacons();
-      cy.visit(url);
+      visitPageInNewTab(url);
 
       cy.get('[data-e2e="to-main-site"]').scrollIntoView({
         duration: 1000,
@@ -27,7 +31,7 @@ export const assertLiteSiteCTAComponentClick = ({
       });
 
       // return to previous page
-      cy.visit(url);
+      visitPageInNewTab(url);
     });
   });
 };

cypress/e2e/specialFeatures/atiAnalytics/assertions/messageBanner.js

@@ -1,4 +1,8 @@
-import { interceptATIAnalyticsBeacons, COMPONENTS } from '../helpers';
+import {
+  interceptATIAnalyticsBeacons,
+  COMPONENTS,
+  visitPageInNewTab,
+} from '../helpers';
 import { assertATIComponentClickEvent, assertATIComponentViewEvent } from '.';
 
 const { MESSAGE_BANNER } = COMPONENTS;
@@ -11,7 +15,7 @@ export const assertMessageBannerComponentView = ({
   it('should send a view event for the Message Banner component', () => {
     cy.url().then(url => {
       interceptATIAnalyticsBeacons();
-      cy.visit(url);
+      visitPageInNewTab(url);
 
       cy.get('[data-testid="message-banner-1"]').scrollIntoView({
         duration: 1000,
@@ -35,7 +39,7 @@ export const assertMessageBannerComponentClick = ({
   it('should send a click event for the Message Banner component', () => {
     cy.url().then(url => {
       interceptATIAnalyticsBeacons();
-      cy.visit(url);
+      visitPageInNewTab(url);
 
       cy.get('[data-testid="message-banner-1"]').scrollIntoView({
         duration: 1000,
@@ -52,7 +56,7 @@ export const assertMessageBannerComponentClick = ({
       });
 
       // return to previous page
-      cy.visit(url);
+      visitPageInNewTab(url);
     });
   });
 };

cypress/e2e/specialFeatures/atiAnalytics/assertions/mostRead.js

@@ -1,4 +1,8 @@
-import { interceptATIAnalyticsBeacons, COMPONENTS } from '../helpers';
+import {
+  interceptATIAnalyticsBeacons,
+  COMPONENTS,
+  visitPageInNewTab,
+} from '../helpers';
 import { assertATIComponentClickEvent, assertATIComponentViewEvent } from '.';
 
 const { MOST_READ } = COMPONENTS;
@@ -11,7 +15,7 @@ export const assertMostReadComponentView = ({
   it('should send a view event for the Most Read component', () => {
     cy.url().then(url => {
       interceptATIAnalyticsBeacons();
-      cy.visit(url);
+      visitPageInNewTab(url);
 
       cy.get('[data-e2e="most-read"]').scrollIntoView({ duration: 1000 });
 
@@ -33,7 +37,7 @@ export const assertMostReadComponentClick = ({
   it('should send a click event for the Most Read component', () => {
     cy.url().then(url => {
       interceptATIAnalyticsBeacons();
-      cy.visit(url);
+      visitPageInNewTab(url);
 
       cy.get('[data-e2e="most-read"]').scrollIntoView({ duration: 1000 });
 
@@ -48,7 +52,7 @@ export const assertMostReadComponentClick = ({
       });
 
       // return to previous page
-      cy.visit(url);
+      visitPageInNewTab(url);
     });
   });
 };

cypress/e2e/specialFeatures/atiAnalytics/assertions/navigation.js

@@ -1,4 +1,8 @@
-import { interceptATIAnalyticsBeacons, COMPONENTS } from '../helpers';
+import {
+  interceptATIAnalyticsBeacons,
+  COMPONENTS,
+  visitPageInNewTab,
+} from '../helpers';
 import { assertATIComponentClickEvent, assertATIComponentViewEvent } from '.';
 
 const { SCROLLABLE_NAVIGATION, DROPDOWN_NAVIGATION } = COMPONENTS;
@@ -12,7 +16,7 @@ export const assertScrollableNavigationComponentView = ({
   it('should send a view event for the Scrollable Navigation component', () => {
     cy.url().then(url => {
       interceptATIAnalyticsBeacons();
-      cy.visit(url);
+      visitPageInNewTab(url);
 
       cy.get('[data-e2e="scrollable-nav"]').scrollIntoView({
         duration: 1000,
@@ -37,7 +41,7 @@ export const assertScrollableNavigationComponentClick = ({
   it('should send a click event for the Scrollable Navigation component', () => {
     cy.url().then(url => {
       interceptATIAnalyticsBeacons();
-      cy.visit(url);
+      visitPageInNewTab(url);
 
       cy.get('[data-e2e="scrollable-nav"]').scrollIntoView({
         duration: 1000,
@@ -54,7 +58,7 @@ export const assertScrollableNavigationComponentClick = ({
       });
 
       // return to previous page
-      cy.visit(url);
+      visitPageInNewTab(url);
     });
   });
 };
@@ -69,7 +73,7 @@ export const assertDropdownNavigationComponentView = ({
   it('should send a view event for the Dropdown Navigation component', () => {
     cy.url().then(url => {
       interceptATIAnalyticsBeacons();
-      cy.visit(url);
+      visitPageInNewTab(url);
 
       cy.viewport(320, 480);
       cy.get('nav button').click();
@@ -93,7 +97,7 @@ export const assertDropdownNavigationComponentClick = ({
   it('should send a click event for the Dropdown Navigation component', () => {
     cy.url().then(url => {
       interceptATIAnalyticsBeacons();
-      cy.visit(url);
+      visitPageInNewTab(url);
 
       cy.viewport(320, 480);
       cy.get('nav button').click();
@@ -109,7 +113,7 @@ export const assertDropdownNavigationComponentClick = ({
       });
 
       // Return to previous page
-      cy.visit(url);
+      visitPageInNewTab(url);
     });
   });
 };

cypress/e2e/specialFeatures/atiAnalytics/assertions/podcastLinks.js

@@ -1,4 +1,8 @@
-import { interceptATIAnalyticsBeacons, COMPONENTS } from '../helpers';
+import {
+  interceptATIAnalyticsBeacons,
+  COMPONENTS,
+  visitPageInNewTab,
+} from '../helpers';
 import { assertATIComponentClickEvent, assertATIComponentViewEvent } from '.';
 
 const { PODCAST_LINKS } = COMPONENTS;
@@ -11,7 +15,7 @@ export const assertPodcastLinksComponentView = ({
   it('should send a view event for the Podcast Links component', () => {
     cy.url().then(url => {
       interceptATIAnalyticsBeacons();
-      cy.visit(url);
+      visitPageInNewTab(url);
 
       cy.get('[data-e2e="podcast-links"]').scrollIntoView({
         duration: 1000,
@@ -35,7 +39,7 @@ export const assertPodcastLinksComponentClick = ({
   it('should send a click event for the Podcast Links component', () => {
     cy.url().then(url => {
       interceptATIAnalyticsBeacons();
-      cy.visit(url);
+      visitPageInNewTab(url);
 
       cy.get('[data-e2e="podcast-links"]').scrollIntoView({
         duration: 1000,
@@ -52,7 +56,7 @@ export const assertPodcastLinksComponentClick = ({
       });
 
       // return to previous page
-      cy.visit(url);
+      visitPageInNewTab(url);
     });
   });
 };

cypress/e2e/specialFeatures/atiAnalytics/assertions/podcastPromo.js

@@ -1,4 +1,8 @@
-import { interceptATIAnalyticsBeacons, COMPONENTS } from '../helpers';
+import {
+  interceptATIAnalyticsBeacons,
+  COMPONENTS,
+  visitPageInNewTab,
+} from '../helpers';
 import { assertATIComponentClickEvent, assertATIComponentViewEvent } from '.';
 
 const { PODCAST_PROMO } = COMPONENTS;
@@ -11,7 +15,7 @@ export const assertPodcastPromoComponentView = ({
   it('should send a view event for the Podcast Promo component', () => {
     cy.url().then(url => {
       interceptATIAnalyticsBeacons();
-      cy.visit(url);
+      visitPageInNewTab(url);
 
       cy.get('[data-e2e="podcast-promo"]').scrollIntoView({
         duration: 1000,
@@ -35,7 +39,7 @@ export const assertPodcastPromoComponentClick = ({
   it('should send a click event for the Podcast Promo component', () => {
     cy.url().then(url => {
       interceptATIAnalyticsBeacons();
-      cy.visit(url);
+      visitPageInNewTab(url);
 
       cy.get('[data-e2e="podcast-promo"]').scrollIntoView({
         duration: 1000,
@@ -52,7 +56,7 @@ export const assertPodcastPromoComponentClick = ({
       });
 
       // return to previous page
-      cy.visit(url);
+      visitPageInNewTab(url);
     });
   });
 };