♻️ use playwright for e2e

.gitignore

@@ -17,3 +17,7 @@ browserstack.err
 !.yarn/releases
 !.yarn/sdks
 !.yarn/versions
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

.gitlab-ci.yml

@@ -219,24 +219,17 @@ e2e:
   interruptible: true
   artifacts:
     when: always
-    paths: ['test-report/e2e/specs.log']
     reports:
       junit: test-report/e2e/*.xml
   script:
     - yarn
+    - yarn build
+    - yarn build:app
+    - yarn playwright install chromium --with-deps
     - FORCE_COLOR=1 yarn test:e2e
   after_script:
     - node ./scripts/test/export-test-result.js e2e
 
-e2e-developer-extension:
-  extends:
-    - .base-configuration
-    - .test-allowed-branches
-  interruptible: true
-  script:
-    - yarn
-    - yarn test:e2e:developer-extension
-
 check-licenses:
   extends:
     - .base-configuration
@@ -267,6 +260,7 @@ check-schemas:
 
 unit-bs:
   stage: browserstack
+  needs: ['unit']
   extends:
     - .base-configuration
     - .bs-allowed-branches
@@ -283,6 +277,7 @@ unit-bs:
 
 e2e-bs:
   stage: browserstack
+  needs: ['e2e']
   extends:
     - .base-configuration
     - .bs-allowed-branches
@@ -292,11 +287,12 @@ e2e-bs:
   timeout: 35 minutes
   artifacts:
     when: always
-    paths: ['test-report/e2e-bs/specs.log']
     reports:
       junit: test-report/e2e-bs/*.xml
   script:
     - yarn
+    - yarn build
+    - yarn build:app
     - FORCE_COLOR=1 ./scripts/test/ci-bs.sh test:e2e
   after_script:
     - node ./scripts/test/export-test-result.js e2e-bs

LICENSE-3rdparty.csv

@@ -12,6 +12,7 @@ prod,react,MIT,Copyright (c) Facebook, Inc. and its affiliates.
 prod,react-dom,MIT,Copyright (c) Facebook, Inc. and its affiliates.
 dev,@eslint/js,MIT,Copyright OpenJS Foundation and other contributors, <www.openjsf.org>
 dev,@jsdevtools/coverage-istanbul-loader,MIT,Copyright (c) 2015 James Messinger
+dev,@playwright/test,Apache-2.0,Copyright Microsoft Corporation
 dev,@types/chrome,MIT,Copyright Microsoft Corporation
 dev,@types/connect-busboy,MIT,Copyright Microsoft Corporation
 dev,@types/cors,MIT,Copyright Microsoft Corporation
@@ -22,12 +23,6 @@ dev,@types/node-forge,MIT,Copyright Microsoft Corporation
 dev,@types/pako,MIT,Copyright Microsoft Corporation
 dev,@types/react,MIT,Copyright Microsoft Corporation
 dev,@types/react-dom,MIT,Copyright Microsoft Corporation
-dev,@wdio/browserstack-service,MIT,Copyright JS Foundation and other contributors
-dev,@wdio/cli,MIT,Copyright JS Foundation and other contributors
-dev,@wdio/jasmine-framework,MIT,Copyright JS Foundation and other contributors
-dev,@wdio/junit-reporter,MIT,Copyright (c) OpenJS Foundation and other contributors
-dev,@wdio/local-runner,MIT,Copyright JS Foundation and other contributors
-dev,@wdio/spec-reporter,MIT,Copyright JS Foundation and other contributors
 dev,@webextension-toolbox/webpack-webextension-plugin,MIT,Copyright 2018 Henrik Wenz ([email protected])
 dev,ajv,MIT,Copyright 2015-2017 Evgeny Poberezkin
 dev,browserstack-local,MIT,Copyright 2016 BrowserStack

package.json

@@ -11,6 +11,7 @@
     "postinstall": "scripts/cli init_submodule",
     "build": "lerna run build --stream",
     "build:bundle": "lerna run build:bundle --stream",
+    "build:app": "cd test/app && rm -rf node_modules && yarn && yarn build",
     "format": "prettier --check .",
     "lint": "scripts/cli lint .",
     "typecheck": "scripts/cli typecheck . && scripts/cli typecheck developer-extension",
@@ -22,9 +23,8 @@
     "test:script": "node --test --experimental-test-module-mocks './scripts/**/*.spec.*'",
     "test:unit:watch": "yarn test:unit --no-single-run",
     "test:unit:bs": "node ./scripts/test/bs-wrapper.js karma start test/unit/karma.bs.conf.js",
-    "test:e2e": "yarn build && (cd test/app && rm -rf node_modules && yarn && yarn build) && wdio test/e2e/wdio.local.conf.ts",
-    "test:e2e:bs": "yarn build && (cd test/app && rm -rf node_modules && yarn && yarn build) && node ./scripts/test/bs-wrapper.js wdio test/e2e/wdio.bs.conf.ts",
-    "test:e2e:developer-extension": "yarn build && wdio test/e2e/wdio.developer-extension.conf.ts",
+    "test:e2e": "playwright test --config test/e2e/playwright.local.config.ts --project chromium",
+    "test:e2e:bs": "node ./scripts/test/bs-wrapper.js playwright test --config test/e2e/playwright.bs.config.ts",
     "test:compat:tsc": "scripts/cli check_typescript_compatibility",
     "test:compat:ssr": "scripts/cli check_server_side_rendering_compatibility",
     "rum-events-format:sync": "scripts/cli update_submodule && scripts/cli build_json2type && node scripts/generate-schema-types.js",
@@ -33,17 +33,13 @@
   "devDependencies": {
     "@eslint/js": "9.19.0",
     "@jsdevtools/coverage-istanbul-loader": "3.0.5",
+    "@playwright/test": "1.49.0",
     "@types/chrome": "0.0.301",
     "@types/connect-busboy": "1.0.3",
     "@types/cors": "2.8.17",
     "@types/express": "4.17.21",
     "@types/jasmine": "3.10.18",
-    "@wdio/browserstack-service": "8.41.0",
-    "@wdio/cli": "8.41.0",
-    "@wdio/jasmine-framework": "8.41.0",
-    "@wdio/junit-reporter": "8.41.0",
-    "@wdio/local-runner": "8.41.0",
-    "@wdio/spec-reporter": "8.41.0",
+    "@types/node": "22.10.2",
     "ajv": "6.12.6",
     "browserstack-local": "1.5.6",
     "chrome-webstore-upload": "3.1.4",

packages/rum/test/mutationPayloadValidator.ts

@@ -1,3 +1,4 @@
+import { getGlobalObject } from '@datadog/browser-core'
 import { NodeType, IncrementalSource } from '../src/types'
 import type {
   SerializedNodeWithId,
@@ -12,6 +13,9 @@ import type {
 import { findAllIncrementalSnapshots, findFullSnapshot } from './segments'
 import { findTextNode, findElementWithTagName, findElementWithIdAttribute } from './nodes'
 
+// Should match both jasmine and playwright 'expect' functions
+type Expect = (actual: any) => { toEqual(expected: any): void }
+
 interface NodeSelector {
   // Select the first node with the given tag name from the initial full snapshot
   tag?: string
@@ -121,7 +125,11 @@ export function createMutationPayloadValidator(initialDocument: SerializedNodeWi
     /**
      * Validates the mutation payload against the expected text, attribute, add and remove mutations.
      */
-    validate: (payload: BrowserMutationPayload, expected: ExpectedMutationsPayload) => {
+    validate: (
+      payload: BrowserMutationPayload,
+      expected: ExpectedMutationsPayload,
+      { expect = getGlobalObject().expect }: { expect?: Expect } = {}
+    ) => {
       payload = removeUndefinedValues(payload)
 
       expect(payload.adds).toEqual(
@@ -201,18 +209,23 @@ export function createMutationPayloadValidator(initialDocument: SerializedNodeWi
  * Validate the first and only mutation record of a segment against the expected text, attribute,
  * add and remove mutations.
  */
-export function createMutationPayloadValidatorFromSegment(segment: BrowserSegment) {
+export function createMutationPayloadValidatorFromSegment(segment: BrowserSegment, options?: { expect?: Expect }) {
   const fullSnapshot = findFullSnapshot(segment)!
-  expect(fullSnapshot).toBeTruthy()
+  if (!fullSnapshot) {
+    throw new Error('Full snapshot not found')
+  }
 
   const mutations = findAllIncrementalSnapshots(segment, IncrementalSource.Mutation) as Array<{
     data: BrowserMutationData
   }>
-  expect(mutations.length).toBe(1)
+  if (mutations.length !== 1) {
+    throw new Error(`Expected 1 mutation, found ${mutations.length}`)
+  }
 
   const mutationPayloadValidator = createMutationPayloadValidator(fullSnapshot.data.node)
   return {
     ...mutationPayloadValidator,
-    validate: (expected: ExpectedMutationsPayload) => mutationPayloadValidator.validate(mutations[0].data, expected),
+    validate: (expected: ExpectedMutationsPayload) =>
+      mutationPayloadValidator.validate(mutations[0].data, expected, options),
   }
 }

scripts/test/bs-wrapper.js

@@ -15,6 +15,7 @@
 // to in the future.
 
 const spawn = require('child_process').spawn
+const browserStack = require('browserstack-local')
 const { printLog, runMain, timeout, printError } = require('../lib/executionUtils')
 const { command } = require('../lib/command')
 const { browserStackRequest } = require('../lib/bsUtils')
@@ -23,13 +24,23 @@ const AVAILABILITY_CHECK_DELAY = 30_000
 const NO_OUTPUT_TIMEOUT = 5 * 60_000
 const BS_BUILD_URL = 'https://api.browserstack.com/automate/builds.json?status=running'
 
+const bsLocal = new browserStack.Local()
+
 runMain(async () => {
   if (command`git tag --points-at HEAD`.run()) {
     printLog('Skip bs execution on tags')
     return
   }
+
+  if (!process.env.BS_USERNAME || !process.env.BS_ACCESS_KEY) {
+    printError('Missing Browserstack credentials (BS_ACCESS_KEY and BS_USERNAME env variables)')
+    return
+  }
+
   await waitForAvailability()
+  await startBsLocal()
   const isSuccess = await runTests()
+  await stopBsLocal()
   process.exit(isSuccess ? 0 : 1)
 })
 
@@ -44,6 +55,38 @@ async function hasRunningBuild() {
   return (await browserStackRequest(BS_BUILD_URL)).length > 0
 }
 
+function startBsLocal() {
+  printLog('Starting BrowserStackLocal...')
+
+  return new Promise((resolve) => {
+    bsLocal.start(
+      {
+        key: process.env.BS_ACCESS_KEY,
+        forceLocal: true,
+        forceKill: true,
+        onlyAutomate: true,
+      },
+      (error) => {
+        if (error) {
+          printError('Failed to start BrowserStackLocal:', error)
+          process.exit(1)
+        }
+        printLog('BrowserStackLocal started', bsLocal.isRunning())
+        resolve()
+      }
+    )
+  })
+}
+
+function stopBsLocal() {
+  return new Promise((resolve) => {
+    bsLocal.stop(() => {
+      printLog('BrowserStackLocal stopped')
+      resolve()
+    })
+  })
+}
+
 function runTests() {
   return new Promise((resolve) => {
     const [command, ...args] = process.argv.slice(2)

test/browsers.conf.d.ts

@@ -1,8 +1,8 @@
-export type BrowserConfigurations = Array<{
+export type BrowserConfiguration = {
   sessionName: string
   name: string
   version?: string
   os: string
   osVersion: string
   device?: string
-}>
+}

test/e2e/browsers.conf.js

@@ -1,37 +1,30 @@
 // Capabilities: https://www.browserstack.com/automate/capabilities
 
 /**
- * @type {import('../browsers.conf').BrowserConfigurations}
+ * @type {Array<import('../browsers.conf').BrowserConfiguration>}
  */
 const browserConfigurations = [
   {
     sessionName: 'Edge',
-    name: 'Edge',
+    name: 'edge',
     version: '100.0',
     os: 'Windows',
     osVersion: '11',
   },
   {
     sessionName: 'Firefox',
-    name: 'Firefox',
-    version: '91.0',
+    name: 'playwright-firefox',
+    version: '119',
     os: 'Windows',
     osVersion: '11',
   },
   {
     sessionName: 'Safari desktop',
-    name: 'Safari',
-    version: '14.1',
+    name: 'playwright-webkit',
+    version: '17.4',
     os: 'OS X',
     osVersion: 'Big Sur',
   },
-  {
-    sessionName: 'Chrome mobile',
-    name: 'chrome',
-    os: 'android',
-    osVersion: '12.0',
-    device: 'Google Pixel 6 Pro',
-  },
 ]
 
 module.exports = {