Migrate consent integration tests to playwright from webdriver.io - LIBRARIES-2546

packages/consent/consent-tools-integration-tests/package.json

@@ -10,13 +10,20 @@
     "lint": "yarn concurrently 'yarn:eslint .' 'yarn:tsc --noEmit'",
     "eslint": "yarn run -T eslint",
     "tsc": "tsc",
-    "concurrently": "yarn run -T concurrently --raw"
+    "concurrently": "yarn run -T concurrently --raw",
+    "playwright-test": "playwright test",
+    "playwright-test:headed": "playwright test --headed",
+    "playwright-test:debug": "playwright test --debug",
+    "serve": "http-server public -p 4567",
+    "server": "http-server --port 5432",
+    "browser": "playwright test --debug"
   },
   "installConfig": {
     "hoistingLimits": "workspaces"
   },
   "devDependencies": {
     "@internal/test-helpers": "workspace:^",
+    "@playwright/test": "^1.28.1",
     "@segment/analytics-consent-tools": "workspace:^",
     "@segment/analytics-consent-wrapper-onetrust": "workspace:^",
     "@segment/analytics-next": "workspace:^",
@@ -29,6 +36,7 @@
     "@wdio/types": "8",
     "expect": "^29.4.1",
     "globby": "^11.0.2",
+    "http-server": "14.1.1",
     "wdio-intercept-service": "^4.4.0",
     "webpack": "^5.94.0",
     "webpack-cli": "^4.8.0"

packages/consent/consent-tools-integration-tests/playwright.config.ts

@@ -0,0 +1,56 @@
+import type { PlaywrightTestConfig } from '@playwright/test'
+import { devices } from '@playwright/test'
+import path from 'path'
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+const config: PlaywrightTestConfig = {
+  webServer: {
+    command: 'yarn run server',
+    url: 'http://127.0.0.1:5432',
+    reuseExistingServer: !process.env.CI,
+  },
+  testDir: './src/tests',
+  globalSetup: path.resolve(__dirname, 'playwright.global-setup.ts'),
+  /* Maximum time one test can run for. */
+  timeout: 30 * 1000,
+  expect: {
+    /**
+     * Maximum time expect() should wait for the condition to be met.
+     * For example in `await expect(locator).toHaveText();`
+     */
+    timeout: 5000,
+  },
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: [['html', { open: 'never' }]],
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    baseURL: `http://127.0.0.1:5432`,
+    trace: 'on',
+    launchOptions: {
+      args: ['--enable-precise-memory-info', '--js-flags=--expose-gc'],
+    },
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome'],
+      },
+    },
+  ],
+}
+
+export default config

packages/consent/consent-tools-integration-tests/playwright.global-setup.ts

@@ -0,0 +1,8 @@
+import type { FullConfig } from '@playwright/test'
+import { execSync } from 'child_process'
+
+export default function globalSetup(_cfg: FullConfig) {
+  console.log('Executing global setup...')
+  execSync('yarn build', { stdio: 'inherit' })
+  console.log('Finished global setup.')
+}

packages/consent/consent-tools-integration-tests/public/consent-tools-vanilla-opt-in.html

@@ -5,7 +5,7 @@
   <h1>Hello World - Serving Analytics</h1>
   <h2>Please Check Network tab</h2>
   <p>This page can used as playground or run by webdriver.io</p>
-  <script src="/public/dist/consent-tools-vanilla-opt-in.bundle.js"></script>
+  <script src="dist/consent-tools-vanilla-opt-in.bundle.js"></script>
 </body>
 
 </html>

packages/consent/consent-tools-integration-tests/public/consent-tools-vanilla-opt-out.html

@@ -5,7 +5,7 @@
   <h1>Hello World - Serving Analytics (Consent Tools Vanilla Opt Out)</h1>
   <h2>Please Check Network tab</h2>
   <p>This page can used as playground or run by webdriver.io</p>
-  <script src="/public/dist/consent-tools-vanilla-opt-out.bundle.js"></script>
+  <script src="dist/consent-tools-vanilla-opt-out.bundle.js"></script>
 </body>
 
 </html>

packages/consent/consent-tools-integration-tests/src/page-bundles/consent-tools-vanilla-opt-out/index.ts

@@ -10,7 +10,7 @@ const analytics = new AnalyticsBrowser()
 
 withMockCMP(analytics).load(
   {
-    writeKey: '9lSrez3BlfLAJ7NOChrqWtILiATiycoc',
+    writeKey: 'foo',
   },
   { initialPageview: true }
 )

packages/consent/consent-tools-integration-tests/src/page-objects/base-page.ts

@@ -1,124 +1,115 @@
-import { CDNSettingsBuilder } from '@internal/test-helpers'
-import type { SegmentEvent } from '@segment/analytics-next'
-import assert from 'assert'
-import type { Matches } from 'webdriverio'
-
-const waitUntilReady = () =>
-  browser.waitUntil(
-    () => browser.execute(() => document.readyState === 'complete'),
-    {
-      timeout: 10000,
-    }
-  )
+import { Page, Route, Request } from '@playwright/test'
 
 export abstract class BasePage {
-  constructor(protected page: string) {}
+  protected page: Page
+  protected pageFile: string
+
+  segmentTrackingApiReqs: any[] = []
+  fetchIntegrationReqs: any[] = []
 
-  segmentTrackingApiReqs: Matches[] = []
-  fetchIntegrationReqs: Matches[] = []
+  constructor(page: Page, pageFile: string) {
+    this.page = page
+    this.pageFile = pageFile
+  }
 
   async load(): Promise<void> {
-    const baseURL = browser.options.baseUrl
-    assert(baseURL)
     await this.mockAPIs()
-    await browser.url(baseURL + '/public/' + this.page)
-    await waitUntilReady()
+    await this.page.goto(`/${this.pageFile}`)
+    await this.page.waitForLoadState('load')
   }
 
   async clearStorage() {
-    await browser.deleteAllCookies()
-    await browser.execute(() => window.localStorage.clear())
+    await this.page.context().clearCookies()
+    await this.page.evaluate(() => {
+      window.localStorage.clear()
+      window.sessionStorage.clear()
+    })
   }
 
-  getAllTrackingEvents(): SegmentEvent[] {
-    const reqBodies = this.segmentTrackingApiReqs.map((el) =>
-      JSON.parse(el.postData!)
-    )
-    return reqBodies
+  async cleanup() {
+    this.segmentTrackingApiReqs = []
+    this.fetchIntegrationReqs = []
+    await this.clearStorage()
+  }
+
+  getAllTrackingEvents(): any[] {
+    return this.segmentTrackingApiReqs
   }
 
-  getConsentChangedEvents(): SegmentEvent[] {
-    const reqBodies = this.getAllTrackingEvents()
-    const consentEvents = reqBodies.filter(
+  getConsentChangedEvents(): any[] {
+    return this.getAllTrackingEvents().filter(
       (el) => el.event === 'Segment Consent Preference Updated'
     )
-    return consentEvents
   }
 
-  async cleanup() {
-    this.segmentTrackingApiReqs = []
-    this.fetchIntegrationReqs = []
-    await this.clearStorage()
+  get fetchIntegrationReqsData(): any[] {
+    return this.fetchIntegrationReqs
   }
 
-  async mockAPIs() {
+  private async mockAPIs() {
     await this.mockSegmentTrackingAPI()
     await this.mockCDNSettingsAPI()
     await this.mockNextIntegrationsAPI()
   }
 
-  private async mockSegmentTrackingAPI(): Promise<void> {
-    const mock = await browser.mock('https://api.segment.io/v1/t', {
-      method: 'post',
-    })
-    mock.respond((mock) => {
-      this.segmentTrackingApiReqs.push(mock)
-      // response with status 200
-      return Promise.resolve({
-        statusCode: 200,
-        body: JSON.stringify({ success: true }),
-      })
-    })
+  private async mockSegmentTrackingAPI() {
+    await this.page.route(
+      'https://api.segment.io/v1/t',
+      async (route: Route, request: Request) => {
+        const postData = await request.postData()
+        const parsed = JSON.parse(postData || '{}')
+        this.segmentTrackingApiReqs.push(parsed) // store the parsed event object directly
+
+        await route.fulfill({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify({ success: true }),
+        })
+      }
+    )
   }
 
-  private async mockNextIntegrationsAPI(): Promise<void> {
-    const mock = await browser.mock('**/next-integrations/**')
-    mock.respond((mock) => {
-      this.fetchIntegrationReqs.push(mock)
-      return Promise.resolve({
-        statusCode: 200,
-        body: 'console.log("mocking action and classic destinations")',
-      })
-    })
+  private async mockNextIntegrationsAPI() {
+    await this.page.route(
+      '**/next-integrations/**',
+      async (route: Route, request: Request) => {
+        this.fetchIntegrationReqs.push({ url: request.url() })
+        await route.fulfill({
+          status: 200,
+          body: 'console.log("mocking action and classic destinations")',
+          contentType: 'application/javascript',
+        })
+      }
+    )
   }
 
-  /**   * Mock the CDN Settings endpoint so that this can run offline
-   */
-  private async mockCDNSettingsAPI(): Promise<void> {
-    const settings = new CDNSettingsBuilder({
-      writeKey: 'something',
-    })
-      .addActionDestinationSettings(
-        {
+  private async mockCDNSettingsAPI() {
+    const settings = {
+      integrations: {
+        FullStory: {
           url: 'https://cdn.segment.com/next-integrations/actions/fullstory-plugins/foo.js',
-          creationName: 'FullStory',
           consentSettings: {
             categories: ['FooCategory2'],
           },
         },
-        {
+        'Actions Amplitude': {
           url: 'https://cdn.segment.com/next-integrations/actions/amplitude-plugins/foo.js',
-          creationName: 'Actions Amplitude',
           consentSettings: {
             categories: ['FooCategory1'],
           },
-        }
-      )
-      .build()
-
-    const mock = await browser.mock('**/settings')
-    mock.respond(settings, {
-      statusCode: 200,
-      headers: {
-        'Content-Type': 'application/json',
+        },
       },
+    }
+
+    await this.page.route('**/settings', async (route: Route) => {
+      await route.fulfill({
+        status: 200,
+        body: JSON.stringify(settings),
+      })
     })
   }
 
-  /**
-   * Hard reload the page
-   */
-  reload() {
-    return browser.execute(() => window.location.reload())
+  async reload() {
+    await this.page.reload()
   }
 }

packages/consent/consent-tools-integration-tests/src/page-objects/consent-tools-vanilla.ts

@@ -1,24 +1,28 @@
+import { Page } from '@playwright/test'
 import { BasePage } from './base-page'
 
 export class ConsentToolsVanilla extends BasePage {
+  constructor(page: Page, file: string) {
+    super(page, file)
+  }
+
   async clickGiveConsent() {
-    const button = await $('#give-consent')
-    return button.click()
+    await this.page.locator('#give-consent').click()
   }
+
   async clickDenyConsent() {
-    const button = await $('#give-consent')
-    return button.click()
+    await this.page.locator('#deny-consent').click()
   }
 }
 
 export class ConsentToolsVanillaOptOut extends ConsentToolsVanilla {
-  constructor() {
-    super('consent-tools-vanilla-opt-out.html')
+  constructor(page: Page) {
+    super(page, 'consent-tools-vanilla-opt-out.html')
   }
 }
 
 export class ConsentToolsVanillaOptIn extends ConsentToolsVanilla {
-  constructor() {
-    super('consent-tools-vanilla-opt-in.html')
+  constructor(page: Page) {
+    super(page, 'consent-tools-vanilla-opt-in.html')
   }
 }

packages/consent/consent-tools-integration-tests/src/page-objects/onetrust.ts

@@ -1,18 +1,18 @@
+import { Page } from '@playwright/test'
 import { BasePage } from './base-page'
 
-class OneTrustPage extends BasePage {
-  constructor() {
-    super('onetrust.html')
+export class OneTrustPage extends BasePage {
+  constructor(page: Page) {
+    super(page, 'onetrust.html')
   }
 
-  get isOneTrustLoaded(): Promise<void> {
-    // @ts-ignore
-    return window.isOneTrustLoaded
+  // Check if OneTrust is loaded by evaluating a global variable on the page
+  async isOneTrustLoaded() {
+    // To Do
   }
 
-  clickAcceptButtonAndClosePopup() {
-    return $('#onetrust-accept-btn-handler').click()
+  //Click the OneTrust accept button
+  async clickAcceptButtonAndClosePopup() {
+    // To Do
   }
 }
-
-export default new OneTrustPage()