chore(tests): Update Playwright to latest in browser integration tests

Author: onurtemizkan

dev-packages/browser-integration-tests/package.json

@@ -9,13 +9,14 @@
   "private": true,
   "scripts": {
     "clean": "rimraf -g suites/**/dist loader-suites/**/dist tmp",
-    "install-browsers": "playwright install --with-deps",
+    "install-browsers": "npx playwright install --with-deps",
     "lint": "eslint . --format stylish",
     "fix": "eslint . --format stylish --fix",
     "type-check": "tsc",
+    "postinstall": "yarn install-browsers",
     "pretest": "yarn clean && yarn type-check",
-    "test": "playwright test ./suites --project='chromium'",
-    "test:all": "playwright test ./suites",
+    "test": "yarn test:all --project='chromium'",
+    "test:all": "npx playwright test -c playwright.browser.config.ts",
     "test:bundle:es5": "PW_BUNDLE=bundle_es5 yarn test",
     "test:bundle:es5:min": "PW_BUNDLE=bundle_es5_min yarn test",
     "test:bundle:es6": "PW_BUNDLE=bundle_es6 yarn test",
@@ -30,29 +31,28 @@
     "test:bundle:tracing:replay:es6:min": "PW_BUNDLE=bundle_tracing_replay_es6_min yarn test",
     "test:cjs": "PW_BUNDLE=cjs yarn test",
     "test:esm": "PW_BUNDLE=esm yarn test",
-    "test:loader": "playwright test ./loader-suites --project='chromium'",
+    "test:loader": "npx playwright test  -c playwright.loader.config.ts --project='chromium'",
     "test:loader:base": "PW_BUNDLE=loader_base yarn test:loader",
     "test:loader:eager": "PW_BUNDLE=loader_eager yarn test:loader",
     "test:loader:tracing": "PW_BUNDLE=loader_tracing yarn test:loader",
     "test:loader:replay": "PW_BUNDLE=loader_replay yarn test:loader",
     "test:loader:full": "PW_BUNDLE=loader_tracing_replay yarn test:loader",
     "test:loader:debug": "PW_BUNDLE=loader_debug yarn test:loader",
-    "test:ci": "playwright test ./suites --reporter='line'",
+    "test:ci": "yarn test:all --reporter='line'",
     "test:update-snapshots": "yarn test:all --update-snapshots",
     "test:detect-flaky": "ts-node scripts/detectFlakyTests.ts",
     "validate:es5": "es-check es5 'fixtures/loader.js'"
   },
   "dependencies": {
     "@babel/preset-typescript": "^7.16.7",
-    "@playwright/test": "^1.31.1",
+    "@playwright/test": "^1.40.1",
     "@sentry-internal/rrweb": "2.7.3",
     "@sentry/browser": "7.93.0",
     "@sentry/tracing": "7.93.0",
     "axios": "1.6.0",
     "babel-loader": "^8.2.2",
     "html-webpack-plugin": "^5.5.0",
     "pako": "^2.1.0",
-    "playwright": "^1.31.1",
     "webpack": "^5.52.0"
   },
   "devDependencies": {

dev-packages/browser-integration-tests/playwright.browser.config.ts

@@ -0,0 +1,9 @@
+import type { PlaywrightTestConfig } from '@playwright/test';
+import CorePlaywrightConfig from './playwright.config';
+
+const config: PlaywrightTestConfig = {
+  ...CorePlaywrightConfig,
+  testDir: './suites',
+};
+
+export default config;

dev-packages/browser-integration-tests/playwright.config.ts

@@ -8,6 +8,7 @@ const config: PlaywrightTestConfig = {
   // Use 3 workers on CI, else use defaults (based on available CPU cores)
   // Note that 3 is a random number selected to work well with our CI setup
   workers: process.env.CI ? 3 : undefined,
+  testMatch: /test.ts/,
 
   projects: [
     {

dev-packages/browser-integration-tests/playwright.loader.config.ts

@@ -0,0 +1,9 @@
+import type { PlaywrightTestConfig } from '@playwright/test';
+import CorePlaywrightConfig from './playwright.config';
+
+const config: PlaywrightTestConfig = {
+  ...CorePlaywrightConfig,
+  testDir: './loader-suites',
+};
+
+export default config;

dev-packages/browser-integration-tests/scripts/detectFlakyTests.ts

@@ -43,7 +43,7 @@ ${changedPaths.join('\n')}
   try {
     await new Promise<void>((resolve, reject) => {
       const cp = childProcess.spawn(
-        `yarn playwright test ${
+        `npx playwright test ${
           testPaths.length ? testPaths.join(' ') : './suites'
         } --reporter='line' --repeat-each ${runCount}`,
         { shell: true, cwd },

dev-packages/browser-integration-tests/suites/integrations/Breadcrumbs/dom/click/test.ts

@@ -4,62 +4,57 @@ import type { Event } from '@sentry/types';
 import { sentryTest } from '../../../../../utils/fixtures';
 import { getFirstSentryEnvelopeRequest } from '../../../../../utils/helpers';
 
-sentryTest(
-  'captures Breadcrumb for clicks & debounces them for a second',
-  async ({ getLocalTestUrl, page, browserName }) => {
-    sentryTest.skip(browserName === 'chromium', 'This consistently flakes on chrome.');
-
-    const url = await getLocalTestUrl({ testDir: __dirname });
-
-    await page.route('**/foo', route => {
-      return route.fulfill({
-        status: 200,
-        body: JSON.stringify({
-          userNames: ['John', 'Jane'],
-        }),
-        headers: {
-          'Content-Type': 'application/json',
-        },
-      });
-    });
-
-    const promise = getFirstSentryEnvelopeRequest<Event>(page);
-
-    await page.goto(url);
-
-    await page.click('#button1');
-    // not debounced because other target
-    await page.click('#button2');
-    // This should be debounced
-    await page.click('#button2');
-
-    // Wait a second for the debounce to finish
-    await page.waitForTimeout(1000);
-    await page.click('#button2');
-
-    const [eventData] = await Promise.all([promise, page.evaluate('Sentry.captureException("test exception")')]);
-
-    expect(eventData.exception?.values).toHaveLength(1);
-
-    expect(eventData.breadcrumbs).toEqual([
-      {
-        timestamp: expect.any(Number),
-        category: 'ui.click',
-        message: 'body > button#button1[type="button"]',
-      },
-      {
-        timestamp: expect.any(Number),
-        category: 'ui.click',
-        message: 'body > button#button2[type="button"]',
-      },
-      {
-        timestamp: expect.any(Number),
-        category: 'ui.click',
-        message: 'body > button#button2[type="button"]',
+sentryTest('captures Breadcrumb for clicks & debounces them for a second', async ({ getLocalTestUrl, page }) => {
+  const url = await getLocalTestUrl({ testDir: __dirname });
+
+  await page.route('**/foo', route => {
+    return route.fulfill({
+      status: 200,
+      body: JSON.stringify({
+        userNames: ['John', 'Jane'],
+      }),
+      headers: {
+        'Content-Type': 'application/json',
       },
-    ]);
-  },
-);
+    });
+  });
+
+  const promise = getFirstSentryEnvelopeRequest<Event>(page);
+
+  await page.goto(url);
+
+  await page.click('#button1');
+  // not debounced because other target
+  await page.click('#button2');
+  // This should be debounced
+  await page.click('#button2');
+
+  // Wait a second for the debounce to finish
+  await page.waitForTimeout(1000);
+  await page.click('#button2');
+
+  const [eventData] = await Promise.all([promise, page.evaluate('Sentry.captureException("test exception")')]);
+
+  expect(eventData.exception?.values).toHaveLength(1);
+
+  expect(eventData.breadcrumbs).toEqual([
+    {
+      timestamp: expect.any(Number),
+      category: 'ui.click',
+      message: 'body > button#button1[type="button"]',
+    },
+    {
+      timestamp: expect.any(Number),
+      category: 'ui.click',
+      message: 'body > button#button2[type="button"]',
+    },
+    {
+      timestamp: expect.any(Number),
+      category: 'ui.click',
+      message: 'body > button#button2[type="button"]',
+    },
+  ]);
+});
 
 sentryTest(
   'uses the annotated component name in the breadcrumb messages and adds it to the data object',

dev-packages/browser-integration-tests/suites/integrations/Breadcrumbs/dom/textInput/test.ts

@@ -25,15 +25,17 @@ sentryTest('captures Breadcrumb for events on inputs & debounced them', async ({
 
   await page.click('#input1');
   // Not debounced because other event type
-  await page.type('#input1', 'John', { delay: 1 });
+  await page.locator('#input1').pressSequentially('John', { delay: 1 });
+
   // This should be debounced
-  await page.type('#input1', 'Abby', { delay: 1 });
+  await page.locator('#input1').pressSequentially('Abby', { delay: 1 });
+
   // not debounced because other target
-  await page.type('#input2', 'Anne', { delay: 1 });
+  await page.locator('#input2').pressSequentially('Anne', { delay: 1 });
 
   // Wait a second for the debounce to finish
   await page.waitForTimeout(1000);
-  await page.type('#input2', 'John', { delay: 1 });
+  await page.locator('#input2').pressSequentially('John', { delay: 1 });
 
   await page.evaluate('Sentry.captureException("test exception")');
 
@@ -87,7 +89,7 @@ sentryTest(
     await page.goto(url);
 
     await page.click('#annotated-input');
-    await page.type('#annotated-input', 'John', { delay: 1 });
+    await page.locator('#annotated-input').pressSequentially('John', { delay: 1 });
 
     await page.evaluate('Sentry.captureException("test exception")');
     const eventData = await promise;

dev-packages/browser-integration-tests/suites/tracing/browsertracing/tracePropagationTargets/customTargets/test.ts

@@ -1,4 +1,3 @@
-import type { Request } from '@playwright/test';
 import { expect } from '@playwright/test';
 
 import { sentryTest } from '../../../../../utils/fixtures';
@@ -22,12 +21,13 @@ sentryTest(
 
     expect(requests).toHaveLength(3);
 
-    requests?.forEach(async (request: Request) => {
-      const requestHeaders = await request.allHeaders();
+    for (const request of requests) {
+      const requestHeaders = request.headers();
+
       expect(requestHeaders).toMatchObject({
         'sentry-trace': expect.any(String),
         baggage: expect.any(String),
       });
-    });
+    }
   },
 );

dev-packages/browser-integration-tests/suites/tracing/browsertracing/tracePropagationTargets/customTargetsAndOrigins/test.ts

@@ -1,4 +1,3 @@
-import type { Request } from '@playwright/test';
 import { expect } from '@playwright/test';
 
 import { sentryTest } from '../../../../../utils/fixtures';
@@ -22,12 +21,12 @@ sentryTest(
 
     expect(requests).toHaveLength(3);
 
-    requests?.forEach(async (request: Request) => {
-      const requestHeaders = await request.allHeaders();
+    for (const request of requests) {
+      const requestHeaders = request.headers();
       expect(requestHeaders).not.toMatchObject({
         'sentry-trace': expect.any(String),
         baggage: expect.any(String),
       });
-    });
+    }
   },
 );

dev-packages/browser-integration-tests/suites/tracing/browsertracing/tracePropagationTargets/customTracingOrigins/test.ts

@@ -1,4 +1,3 @@
-import type { Request } from '@playwright/test';
 import { expect } from '@playwright/test';
 
 import { sentryTest } from '../../../../../utils/fixtures';
@@ -22,12 +21,12 @@ sentryTest(
 
     expect(requests).toHaveLength(3);
 
-    requests?.forEach(async (request: Request) => {
-      const requestHeaders = await request.allHeaders();
+    for (const request of requests) {
+      const requestHeaders = request.headers();
       expect(requestHeaders).toMatchObject({
         'sentry-trace': expect.any(String),
         baggage: expect.any(String),
       });
-    });
+    }
   },
 );