Migrate consent integration tests to Playwright (#1292)

Co-authored-by: Neelkanth Kaushik <[email protected]>

Author: silesky

.buildkite/pipeline.yml

@@ -149,7 +149,21 @@ steps:
     plugins:
       - ssh://[email protected]/segmentio/cache-buildkite-plugin#v2.0.0:
           key: "v1.1-cache-dev-{{ checksum 'yarn.lock' }}"
+          
+  - label: '[Consent] Integration Tests'
+    agents:
+      queue: v1
+    commands:
+      - npm config set "//registry.npmjs.org/:_authToken" $${NPM_TOKEN}
+      - echo "--- Install dependencies"
+      - HUSKY=0 yarn install --immutable
+      - echo "--- Build + Test"
+      - yarn turbo run --filter='./packages/consent/consent-tools-integration-tests' test:int
 
+    plugins:
+      - ssh://[email protected]/segmentio/cache-buildkite-plugin#v2.0.0:
+          key: "v1.1-cache-dev-{{ checksum 'yarn.lock' }}"
+          
   - label: '[Signals] Lint + Test'
     agents:
       queue: v1

.eslintrc.js

@@ -1,7 +1,9 @@
 /** @type { import('eslint').Linter.Config } */
 module.exports = {
   root: true,
-  ignorePatterns: ['node_modules', 'dist'],
+  ignorePatterns: require('eslint-gitignore').readGitignoreFiles({
+    cwd: __dirname,
+  }),
   parserOptions: {
     ecmaVersion: 2020,
   },

.github/workflows/ci.yml

@@ -55,23 +55,3 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-turbo-
       - run: yarn turbo run --filter='./packages/node-integration-tests' test:cloudflare-workers
-  consent-intg-tests:
-    name: Consent Integration Tests
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-
-      - uses: browser-actions/setup-chrome@v1
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 16 # UPDATE TO NODE 20!!!
-          cache: 'yarn'
-      - run: yarn install --immutable
-      - name: Turbo cache
-        uses: actions/cache@v3
-        with:
-          path: node_modules/.cache/turbo
-          key: ${{ runner.os }}-turbo-${{ github.sha }}
-          restore-keys: |
-            ${{ runner.os }}-turbo-
-      - run: yarn turbo run --filter='./packages/consent/consent-tools-integration-tests' test:int

package.json

@@ -50,6 +50,7 @@
     "concurrently": "^7.6.0",
     "eslint": "^8.14.0",
     "eslint-config-prettier": "^8.5.0",
+    "eslint-gitignore": "^0.1.0",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-jest": "^27.2.2",
     "eslint-plugin-prettier": "^4.0.0",

packages/consent/consent-tools-integration-tests/README.md

@@ -1,8 +1,4 @@
-Why is this using wd.io instead of playwright?
-
-- Webdriver.io is committed to the Webdriver Protocol, which is a community-driven spec (as opposed to Chrome Webdriver Protocol.). Playwright uses the Chrome Webdriver protocol for chrome and it's own [custom protocol](https://github.com/microsoft/playwright/issues/4862) for safari / edge.
-- Webdriver.io protocol allows for much better device support-- such as ie11.
-- Webdriver.io has native support for lighthouse and lots of other cool stuff!
+# @internal/consent-tools-integration-tests"
 
 ## Project structure
 - `/public` - Test server root
@@ -18,12 +14,3 @@ Why is this using wd.io instead of playwright?
 ```
 yarn . test:int
 ```
-
-### Debugging Tips:
-- Webdriver.io has the handy `browser.debug()` command.
-
-- You can serve the static pages by themselves (without webdriver.io) with the following:
-```
-yarn webpack -w &
-npx live-server .
-```

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

@@ -3,33 +3,28 @@
   "private": true,
   "scripts": {
     ".": "yarn run -T turbo run --filter=@internal/consent-tools-integration-tests...",
-    "test:int": "yarn wdio:local",
+    "test:int": "playwright test",
+    "test:int-debug": "playwright test --debug",
     "build": "webpack",
     "watch": "yarn build --watch",
-    "wdio:local": "wdio wdio.conf.local.ts",
     "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",
+    "serve": "http-server --port 5432"
   },
   "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:^",
-    "@wdio/cli": "^8.10.6",
-    "@wdio/devtools-service": "^8.10.6",
-    "@wdio/local-runner": "^8.10.6",
-    "@wdio/mocha-framework": "^8.10.6",
-    "@wdio/spec-reporter": "^8.10.6",
-    "@wdio/static-server-service": "^8.10.6",
-    "@wdio/types": "8",
     "expect": "^29.4.1",
     "globby": "^11.0.2",
-    "wdio-intercept-service": "^4.4.0",
+    "http-server": "14.1.1",
     "webpack": "^5.94.0",
     "webpack-cli": "^4.8.0"
   }

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

@@ -0,0 +1,53 @@
+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 serve',
+    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',
+  },
+
+  /* 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/onetrust.html renamed to packages/consent/consent-tools-integration-tests/public/consent-tools-onetrust.html

@@ -5,9 +5,9 @@
   <script src="https://cdn.cookielaw.org/scripttemplates/otSDKStub.js" type="text/javascript" charset="UTF-8"
     data-domain-script="80ca7b5c-e72f-4bd0-972a-b74d052a0820-test"></script>
 
-  <script src="/node_modules/@segment/analytics-consent-wrapper-onetrust/dist/umd/analytics-onetrust.umd.js"></script>
-
-  <script>
+  <!-- <script src="/node_modules/@segment/analytics-consent-wrapper-onetrust/dist/umd/analytics-onetrust.umd.js"></script> -->
+  <script src="dist/onetrust.bundle.js"></script>
+  <!-- <script>
     !(function () {
       var analytics = (window.analytics = window.analytics || [])
       if (!analytics.initialize)
@@ -67,7 +67,7 @@
           analytics.page()
         }
     })()
-  </script>
+  </script> -->
 </head>
 
 <body>
@@ -76,4 +76,4 @@ <h2>Please Check Network tab</h2>
   <p>This page can used as playground or run by webdriver.io</p>
 </body>
 
-</html>
+</html>

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

@@ -4,8 +4,8 @@
 <body>
   <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>
+  <p>This page can used as playground or run by Playwright</p>
+  <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

@@ -4,8 +4,8 @@
 <body>
   <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>
+  <p>This page can used as playground or run by Playwright</p>
+  <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-bundles/onetrust/index.ts

@@ -0,0 +1,12 @@
+import { AnalyticsBrowser } from '@segment/analytics-next'
+import { withOneTrust } from '@segment/analytics-consent-wrapper-onetrust'
+
+const analytics = new AnalyticsBrowser()
+
+withOneTrust(analytics).load(
+  {
+    writeKey: 'foo',
+  },
+  { initialPageview: true }
+)
+;(window as any).analytics = analytics