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
@@ -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;
 

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();

dev-packages/browser-integration-tests/suites/replay/customEvents/template.html

@@ -5,7 +5,7 @@
   </head>
   <body>
     <div role="button" id="error" class="btn btn-error" aria-label="An Error in aria-label">An Error</div>
-    <button title="Button title">
+    <button id="img-button" title="Button title">
       <img id="img" alt="Alt Text" />
     </button>
     <button class="sentry-unmask" aria-label="Unmasked label">Unmasked</button>