Use locator instead of page.click.

Author: onurtemizkan

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

@@ -23,15 +23,16 @@ sentryTest('captures Breadcrumb for clicks & debounces them for a second', async
 
   await page.goto(url);
 
-  await page.click('#button1');
+  await page.locator('#button1').click();
+
   // not debounced because other target
-  await page.click('#button2');
+  await page.locator('#button2').click();
   // This should be debounced
-  await page.click('#button2');
+  await page.locator('#button2').click();
 
   // Wait a second for the debounce to finish
   await page.waitForTimeout(1000);
-  await page.click('#button2');
+  await page.locator('#button2').click();
 
   const [eventData] = await Promise.all([promise, page.evaluate('Sentry.captureException("test exception")')]);
 
@@ -76,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,7 +23,7 @@ sentryTest('captures Breadcrumb for events on inputs & debounced them', async ({
 
   await page.goto(url);
 
-  await page.click('#input1');
+  await page.locator('#input1').click();
   // Not debounced because other event type
   await page.locator('#input1').pressSequentially('John', { delay: 1 });
 
@@ -88,7 +88,7 @@ sentryTest(
 
     await page.goto(url);
 
-    await page.click('#annotated-input');
+    await page.locator('#annotated-input').click();
     await page.locator('#annotated-input').pressSequentially('John', { delay: 1 });
 
     await page.evaluate('Sentry.captureException("test exception")');

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
@@ -75,9 +75,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
@@ -96,8 +96,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;
@@ -191,8 +191,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
@@ -218,9 +218,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
@@ -239,8 +239,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);
@@ -331,8 +331,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
@@ -351,7 +351,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;
 

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

@@ -24,7 +24,7 @@ sentryTest('can record canvas', async ({ getLocalTestUrl, page, browserName }) =
 
   await page.goto(url);
   await reqPromise0;
-  await Promise.all([page.click('#draw'), reqPromise1]);
+  await Promise.all([page.locator('#draw').click(), reqPromise1]);
 
   const { incrementalSnapshots } = getReplayRecordingContent(await reqPromise2);
   expect(incrementalSnapshots).toEqual(

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

@@ -34,10 +34,10 @@ sentryTest('should capture console messages in replay', async ({ getLocalTestPat
     5_000,
   );
 
-  await page.click('[data-log]');
+  await page.locator('[data-log]').click();
 
   // Sometimes this doesn't seem to trigger, so we trigger it twice to be sure...
-  const [req1] = await Promise.all([reqPromise1, page.click('[data-log]')]);
+  const [req1] = await Promise.all([reqPromise1, page.locator('[data-log]').click()]);
   await forceFlushReplay();
 
   const { breadcrumbs } = getCustomRecordingEvents(req1);
@@ -87,7 +87,7 @@ sentryTest('should capture very large console logs', async ({ getLocalTestPath,
     5_000,
   );
 
-  const [req1] = await Promise.all([reqPromise1, page.click('[data-log-large]')]);
+  const [req1] = await Promise.all([reqPromise1, page.locator('[data-log-large]').click()]);
   await forceFlushReplay();
 
   const { breadcrumbs } = getCustomRecordingEvents(req1);

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

@@ -25,7 +25,7 @@ sentryTest('should capture replays (@sentry/browser export)', async ({ getLocalT
   await page.goto(url);
   const replayEvent0 = getReplayEvent(await reqPromise0);
 
-  await page.click('button');
+  await page.locator('button').click();
   const replayEvent1 = getReplayEvent(await reqPromise1);
 
   expect(replayEvent0).toBeDefined();