Replaced One Test Case from WebDriver.IO to Playwright: consent-tools-vanilla-opt-in.test.ts and Removed all WebDriver.IO Test Cases

Author: neelkanth-kaushik

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

@@ -2,7 +2,7 @@ import type { PlaywrightTestConfig } from '@playwright/test'
 
 const PORT = 4567
 const config: PlaywrightTestConfig = {
-  testDir: './src/playwright/tests',
+  testDir: './src/tests',
   timeout: 30000,
   retries: 2,
   webServer: {

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()

packages/consent/consent-tools-integration-tests/src/playwright/playwright-logger.ts

@@ -1,82 +1,94 @@
 /**
- * Tests targeting @segment/analytics-consent-tools
+ * Playwright Tests targeting @segment/analytics-consent-tools
+ *
+ * This test verifies that:
+ *  - Tracking events do not go through before explicit consent.
+ *  - After giving consent, appropriate events are sent with the correct consent context.
  */
 
 import { ConsentToolsVanillaOptIn } from '../page-objects/consent-tools-vanilla'
-import { expect } from 'expect'
+import { test, expect } from '@playwright/test'
 
-const page = new ConsentToolsVanillaOptIn()
+let pageObject: ConsentToolsVanillaOptIn
 
-afterEach(async () => {
-  await page.cleanup()
+test.beforeEach(async ({ page }) => {
+  // Initialize the test page object and load the test HTML fixture
+  pageObject = new ConsentToolsVanillaOptIn(page)
+  await pageObject.load()
 })
 
-it('should send a track call after waiting for explicit consent', async () => {
-  await page.load()
+test.afterEach(async () => {
+  // Cleanup local/session storage and reset intercepted requests after each test
+  await pageObject.cleanup()
+})
 
-  void browser.execute(() => {
-    return window.analytics.track('buffered')
+test('should send a track call after waiting for explicit consent', async ({
+  page,
+}) => {
+  // Attempt to track an event before consent is given — this should be buffered/blocked
+  await page.evaluate(() => {
+    void window.analytics.track('buffered')
   })
 
-  try {
-    // we don't expect any tracking events to go through yet
-    await browser.waitUntil(() => page.getAllTrackingEvents().length, {
-      timeout: 7000,
-    })
-    throw new Error('Expected no track calls to be made')
-  } catch (err) {
-    // expected to fail
-  }
+  // Optional delay to let the network pipeline settle (useful in debugging)
+  await page.waitForTimeout(2000)
 
-  await page.clickGiveConsent()
+  // Assert that no events have been tracked yet
+  await expect.poll(() => pageObject.getAllTrackingEvents().length).toBe(0)
 
-  await browser.waitUntil(() => page.getConsentChangedEvents().length, {
-    timeout: 20000,
-    timeoutMsg: 'Expected a consent change call to be made',
-  })
+  // Ensure analytics is loaded before interacting
+  await page.waitForFunction(() => typeof window.analytics !== 'undefined')
 
-  const consentChangeEvents = page.getConsentChangedEvents()
-  expect(consentChangeEvents.length).toBe(1)
-  expect(consentChangeEvents[0].event).toEqual(
-    'Segment Consent Preference Updated'
-  )
+  // Simulate user giving consent
+  await pageObject.clickGiveConsent()
 
-  await browser.waitUntil(() => page.fetchIntegrationReqs.length, {
-    timeout: 20000,
-    timeoutMsg: 'Expected integrations/destinations to be fetched',
-  })
+  // Wait until the consent change event is tracked
+  await expect
+    .poll(() => pageObject.getConsentChangedEvents().length, {
+      timeout: 10_000,
+    })
+    .toBeGreaterThan(0)
 
-  await browser.execute(() => {
-    return window.analytics.track('hello')
+  // Validate that the expected consent change event was emitted
+  const events = pageObject.getConsentChangedEvents()
+  expect(events.length).toBe(1)
+  expect(events[0].event).toBe('Segment Consent Preference Updated')
+
+  // Now track a new event "hello" after consent has been given
+  await page.evaluate(() => {
+    void window.analytics.track('hello')
   })
 
-  const getHelloTrackEvents = () =>
-    page.getAllTrackingEvents().find((el) => el.event === 'hello')
+  // Helper to retrieve the "hello" tracking event
+  const getHelloEvent = () =>
+    pageObject.getAllTrackingEvents().find((e) => e.event === 'hello')
 
-  await browser.waitUntil(() => getHelloTrackEvents(), {
-    timeout: 20000,
-    timeoutMsg: 'Expected a hello track call to be made',
-  })
+  // Wait until "hello" event is tracked
+  await expect.poll(getHelloEvent).not.toBe(undefined)
 
-  expect(getHelloTrackEvents()!.context?.consent).toEqual({
+  // Validate that the "hello" event includes the correct consent context
+  expect((await getHelloEvent())?.context?.consent).toEqual({
     categoryPreferences: {
       FooCategory1: true,
       FooCategory2: true,
     },
   })
 
-  const getBufferTrackEvents = () =>
-    page.getAllTrackingEvents().find((el) => el.event === 'buffered')
+  // Now re-check the previously buffered event "buffered"
+  const getBufferedEvent = () =>
+    pageObject.getAllTrackingEvents().find((e) => e.event === 'buffered')
 
-  await browser.waitUntil(() => getBufferTrackEvents(), {
-    timeout: 20000,
-    timeoutMsg: 'Expected a "BUFFER" track call to be made',
-  })
+  // Wait until the "buffered" event is finally flushed and sent
+  await expect.poll(getBufferedEvent).not.toBe(undefined)
 
-  expect(getBufferTrackEvents()!.context?.consent).toEqual({
+  // Assert that the flushed "buffered" event also includes the consent context
+  expect((await getBufferedEvent())?.context?.consent).toEqual({
     categoryPreferences: {
       FooCategory1: true,
       FooCategory2: true,
     },
   })
+
+  // Optional: print all tracking events for debug purposes
+  //console.log('All tracking events so far:', pageObject.getAllTrackingEvents())
 })

packages/consent/consent-tools-integration-tests/src/playwright/tests/consent-tools-vanilla-opt-in.test.ts

@@ -1,6 +1,6 @@
 import { test, expect } from '@playwright/test'
 
-test('Homepage has welcome message', async ({ page }) => {
+test('Example Test Case to check playwright is installed', async ({ page }) => {
   await page.goto('https://www.example.com/')
   await expect(page.locator('text=Example Domain')).toBeVisible()
 })