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

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.9.0",
     "@sentry/browser": "7.95.0",
     "@sentry/tracing": "7.95.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,58 @@ 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.locator('#button1').click();
+
+  // not debounced because other target
+  await page.locator('#button2').click();
+  // This should be debounced
+  await page.locator('#button2').click();
+
+  // Wait a second for the debounce to finish
+  await page.waitForTimeout(1000);
+  await page.locator('#button2').click();
+
+  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',
@@ -81,7 +77,7 @@ sentryTest(
     const promise = getFirstSentryEnvelopeRequest<Event>(page);
 
     await page.goto(url);
-    await page.click('#annotated-button');
+    await page.locator('#annotated-button').click();
     await page.evaluate('Sentry.captureException("test exception")');
 
     const eventData = await promise;

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

@@ -23,17 +23,18 @@ sentryTest('captures Breadcrumb for events on inputs & debounced them', async ({
 
   await page.goto(url);
 
-  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")');
 
@@ -42,11 +43,6 @@ sentryTest('captures Breadcrumb for events on inputs & debounced them', async ({
   expect(eventData.exception?.values).toHaveLength(1);
 
   expect(eventData.breadcrumbs).toEqual([
-    {
-      timestamp: expect.any(Number),
-      category: 'ui.click',
-      message: 'body > input#input1[type="text"]',
-    },
     {
       timestamp: expect.any(Number),
       category: 'ui.input',
@@ -86,20 +82,13 @@ 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;
     expect(eventData.exception?.values).toHaveLength(1);
 
     expect(eventData.breadcrumbs).toEqual([
-      {
-        timestamp: expect.any(Number),
-        category: 'ui.click',
-        message: 'body > AnnotatedInput',
-        data: { 'ui.component_name': 'AnnotatedInput' },
-      },
       {
         timestamp: expect.any(Number),
         category: 'ui.input',

dev-packages/browser-integration-tests/suites/integrations/ContextLines/inline/test.ts

@@ -19,7 +19,7 @@ sentryTest(
 
     const eventReqPromise = waitForErrorRequestOnUrl(page, url);
 
-    const clickPromise = page.click('#inline-error-btn');
+    const clickPromise = page.locator('#inline-error-btn').click();
 
     const [req] = await Promise.all([eventReqPromise, clickPromise]);
 

dev-packages/browser-integration-tests/suites/integrations/ContextLines/noAddedLines/test.ts

@@ -8,7 +8,7 @@ sentryTest('should not add source context lines to errors from script files', as
 
   const eventReqPromise = waitForErrorRequestOnUrl(page, url);
 
-  const clickPromise = page.click('#script-error-btn');
+  const clickPromise = page.locator('#script-error-btn').click();
 
   const [req] = await Promise.all([eventReqPromise, clickPromise]);
 

dev-packages/browser-integration-tests/suites/integrations/ContextLines/scriptTag/test.ts

@@ -19,7 +19,7 @@ sentryTest(
 
     const eventReqPromise = waitForErrorRequestOnUrl(page, url);
 
-    const clickPromise = page.click('#inline-error-btn');
+    const clickPromise = page.locator('#inline-error-btn').click();
 
     const [req] = await Promise.all([eventReqPromise, clickPromise]);
 

dev-packages/browser-integration-tests/suites/replay/bufferMode/test.ts

@@ -48,8 +48,8 @@ sentryTest(
     const url = await getLocalTestPath({ testDir: __dirname });
 
     await page.goto(url);
-    await page.click('#go-background');
-    await page.click('#error');
+    await page.locator('#go-background').click();
+    await page.locator('#error').click();
     await new Promise(resolve => setTimeout(resolve, 1000));
 
     // error, no replays
@@ -76,9 +76,9 @@ sentryTest(
       }),
     ).toBe(true);
 
-    await page.click('#log');
-    await page.click('#go-background');
-    await page.click('#error2');
+    await page.locator('#log').click();
+    await page.locator('#go-background').click();
+    await page.locator('#error2').click();
     await new Promise(resolve => setTimeout(resolve, 1000));
 
     // 2 errors
@@ -98,8 +98,8 @@ sentryTest(
     await reqErrorPromise;
     expect(callsToSentry).toBeGreaterThanOrEqual(3);
 
-    await page.click('#log');
-    await page.click('#go-background');
+    await page.locator('#log').click();
+    await page.locator('#go-background').click();
 
     // Switches to session mode and then goes to background
     const req1 = await reqPromise1;
@@ -193,8 +193,8 @@ sentryTest(
     const url = await getLocalTestPath({ testDir: __dirname });
 
     await page.goto(url);
-    await page.click('#go-background');
-    await page.click('#error');
+    await page.locator('#go-background').click();
+    await page.locator('#error').click();
     await new Promise(resolve => setTimeout(resolve, 1000));
 
     // error, no replays
@@ -221,9 +221,9 @@ sentryTest(
       }),
     ).toBe(true);
 
-    await page.click('#log');
-    await page.click('#go-background');
-    await page.click('#error2');
+    await page.locator('#log').click();
+    await page.locator('#go-background').click();
+    await page.locator('#error2').click();
     await new Promise(resolve => setTimeout(resolve, 1000));
 
     // 2 errors
@@ -243,8 +243,8 @@ sentryTest(
     await reqErrorPromise;
     expect(callsToSentry).toEqual(3);
 
-    await page.click('#log');
-    await page.click('#go-background');
+    await page.locator('#log').click();
+    await page.locator('#go-background').click();
 
     // Has stopped recording, should make no more calls to Sentry
     expect(callsToSentry).toEqual(3);
@@ -336,8 +336,8 @@ sentryTest(
       }),
     ).toBe(true);
 
-    await page.click('#go-background');
-    await page.click('#error');
+    await page.locator('#go-background').click();
+    await page.locator('#error').click();
     await new Promise(resolve => setTimeout(resolve, 1000));
 
     // 1 unsampled error, no replay
@@ -357,7 +357,7 @@ sentryTest(
     const [req0] = await Promise.all([
       // 1 unsampled error, 1 sampled error -> 1 flush
       reqPromise0,
-      page.click('#error2'),
+      page.locator('#error2').click(),
     ]);
 
     const reqError1 = await reqErrorPromise1;

dev-packages/browser-integration-tests/suites/replay/bufferModeReload/test.ts

@@ -28,7 +28,7 @@ sentryTest('continues buffer session in session mode after error & reload', asyn
   await page.goto(url);
 
   // buffer session captures an error & switches to session mode
-  await page.click('#buttonError');
+  await page.locator('#buttonError').click();
   await new Promise(resolve => setTimeout(resolve, 300));
   await reqPromise1;