Use locator instead of page.click.

Author: onurtemizkan

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

@@ -21,17 +21,16 @@ sentryTest('captures Breadcrumb for clicks & debounces them for a second', async
 
   const promise = getFirstSentryEnvelopeRequest<Event>(page);
 
-  await page.goto(url);
+  await Promise.all([page.goto(url), page.locator('#button1').click()]);
 
-  await page.click('#button1');
   // 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 +75,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();

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>

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

@@ -47,7 +47,7 @@ sentryTest(
 
     expect(replayEvent0).toEqual(getExpectedReplayEvent({ segment_id: 0 }));
 
-    await page.click('button');
+    await page.locator('#img-button').click();
 
     const replayEvent1 = getReplayEvent(await reqPromise1);
     const { performanceSpans: performanceSpans1 } = getCustomRecordingEvents(await reqPromise1);
@@ -104,7 +104,7 @@ sentryTest(
     await page.goto(url);
     await reqPromise0;
 
-    await page.click('#error');
+    await page.locator('#error').click();
     await forceFlushReplay();
     const req1 = await reqPromise1;
     const content1 = getReplayRecordingContent(req1);
@@ -131,19 +131,20 @@ sentryTest(
       ]),
     );
 
-    await page.click('#img');
+    await page.locator('#img').click();
     await forceFlushReplay();
     const req2 = await reqPromise2;
     const content2 = getReplayRecordingContent(req2);
     expect(content2.breadcrumbs).toEqual(
       expect.arrayContaining([
         {
           ...expectedClickBreadcrumb,
-          message: 'body > button[title="Button title"]',
+          message: 'body > button#img-button[title="Button title"]',
           data: {
             nodeId: expect.any(Number),
             node: {
               attributes: {
+                id: 'img-button',
                 title: '****** *****',
               },
               id: expect.any(Number),
@@ -155,7 +156,7 @@ sentryTest(
       ]),
     );
 
-    await page.click('.sentry-unmask');
+    await page.locator('.sentry-unmask').click();
     await forceFlushReplay();
     const req3 = await reqPromise3;
     const content3 = getReplayRecordingContent(req3);
@@ -206,7 +207,7 @@ sentryTest(
     await page.goto(url);
     await forceFlushReplay();
 
-    await page.click('#error');
+    await page.locator('#error').click();
     await forceFlushReplay();
 
     const req0 = await reqPromise0;

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

@@ -26,7 +26,7 @@ sentryTest('should stop recording after receiving an error response', async ({ g
   await page.goto(url);
 
   await waitForReplayRequest(page);
-  await page.click('button');
+  await page.locator('button').click();
 
   expect(called).toBe(1);
 

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

@@ -24,7 +24,7 @@ sentryTest(
     await page.goto(url);
     await waitForReplayRunning(page);
 
-    await page.click('#drop');
+    await page.locator('#drop').click();
     await forceFlushReplay();
 
     expect(await getReplaySnapshot(page)).toEqual(

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

@@ -34,9 +34,9 @@ sentryTest(
     await forceFlushReplay();
     expect(callsToSentry).toEqual(0);
 
-    await page.click('#error');
+    await page.locator('#error').click();
 
-    await page.click('#log');
+    await page.locator('#log').click();
     await forceFlushReplay();
 
     expect(callsToSentry).toEqual(0);

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

@@ -52,23 +52,23 @@ sentryTest(
 
     await Promise.all([
       page.goto(url),
-      page.click('#go-background'),
+      page.locator('#go-background').click(),
       new Promise(resolve => setTimeout(resolve, 1000)),
     ]);
 
     expect(callsToSentry).toEqual(0);
 
-    const [req0] = await Promise.all([reqPromise0, page.click('#error')]);
+    const [req0] = await Promise.all([reqPromise0, page.locator('#error').click()]);
 
     expect(callsToSentry).toEqual(2); // 1 error, 1 replay event
 
-    const [req1] = await Promise.all([reqPromise1, page.click('#go-background'), reqErrorPromise]);
+    const [req1] = await Promise.all([reqPromise1, page.locator('#go-background').click(), reqErrorPromise]);
 
     expect(callsToSentry).toEqual(3); // 1 error, 2 replay events
 
-    await page.click('#log');
+    await page.locator('#log').click();
 
-    const [req2] = await Promise.all([reqPromise2, page.click('#go-background')]);
+    const [req2] = await Promise.all([reqPromise2, page.locator('#go-background').click()]);
 
     const event0 = getReplayEvent(req0);
     const content0 = getReplayRecordingContent(req0);

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

@@ -30,7 +30,7 @@ sentryTest(
     await forceFlushReplay();
     expect(callsToSentry).toEqual(0);
 
-    await page.click('#error');
+    await page.locator('#error').click();
     await promiseReq0;
 
     await forceFlushReplay();

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

@@ -27,9 +27,9 @@ sentryTest(
     await forceFlushReplay();
     expect(callsToSentry).toEqual(0);
 
-    await page.click('#error');
+    await page.locator('#error').click();
 
-    await page.click('#log');
+    await page.locator('#log').click();
     await forceFlushReplay();
 
     // Only sent once, but since API failed we do not go into session mode

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

@@ -42,7 +42,7 @@ sentryTest(
     await page.goto(url);
     const req0 = await reqPromise0;
 
-    await page.click('#error');
+    await page.locator('#error').click();
     await forceFlushReplay();
     const req1 = await reqPromise1;
 
@@ -107,7 +107,7 @@ sentryTest(
     await page.goto(url);
     await reqPromise0;
 
-    await page.click('#drop');
+    await page.locator('#drop').click();
     await forceFlushReplay();
     const req1 = await reqPromise1;
 

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

@@ -73,8 +73,8 @@ window.Replay._replay.eventBuffer.addEvent = (...args) => {
 };
 `);
 
-    void page.click('#button1');
-    void page.click('#button2');
+    void page.locator('#button1').click();
+    void page.locator('#button2').click();
 
     // Should immediately skip retrying and just cancel, no backoff
     // This waitForTimeout call should be okay, as we're not checking for any