[tests] Wait between long interactions in landing-page.test.ts

I think this may reduce flakiness.

Bug: 415271011
Change-Id: I9f71520816551ef070a5804a38d8ec8de2977f1d
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7242641
Auto-Submit: Connor Clark <cjamcl@chromium.org>
Commit-Queue: Connor Clark <cjamcl@chromium.org>
Reviewed-by: Paul Irish <paulirish@chromium.org>

Author: Connor Clark

test/e2e/performance/landing-page.test.ts

@@ -14,7 +14,7 @@ import {
   takeHeapSnapshot,
   waitForNonEmptyHeapSnapshotData,
 } from '../helpers/memory-helpers.js';
-import {navigateToPerformanceTab} from '../helpers/performance-helpers.js';
+import {increaseTimeoutForPerfPanel, navigateToPerformanceTab} from '../helpers/performance-helpers.js';
 import type {DevToolsPage} from '../shared/frontend-helper.js';
 import type {InspectedPage} from '../shared/target-helper.js';
 
@@ -56,13 +56,11 @@ async function setCruxRawResponse(path: string, devToolsPage: DevToolsPage, insp
 
 describe('The Performance panel landing page', function() {
   setup({dockingMode: 'undocked', panel: 'timeline'});
-  if (this.timeout() > 0) {
-    this.timeout(20000);
-  }
+  increaseTimeoutForPerfPanel(this);
 
   async function doubleRaf(inspectedPage: InspectedPage): Promise<void> {
-    await inspectedPage.evaluate(() => new Promise(r => requestAnimationFrame(r)));
-    await inspectedPage.evaluate(() => new Promise(r => requestAnimationFrame(r)));
+    await inspectedPage.raf();
+    await inspectedPage.raf();
   }
 
   async function prepare(devToolsPage: DevToolsPage, inspectedPage: InspectedPage): Promise<void> {
@@ -71,6 +69,14 @@ describe('The Performance panel landing page', function() {
     await doubleRaf(inspectedPage);  // Without this, even an empty test can fail subsequent tests. Dunno why.
   }
 
+  async function makeTwoLongInteractions(inspectedPage: InspectedPage) {
+    await inspectedPage.page.click('#long-interaction');
+    await doubleRaf(inspectedPage);
+    await doubleRaf(inspectedPage);
+    await inspectedPage.page.click('#long-interaction');
+    await doubleRaf(inspectedPage);
+  }
+
   it('displays live metrics', async ({devToolsPage, inspectedPage}) => {
     await prepare(devToolsPage, inspectedPage);
 
@@ -79,9 +85,7 @@ describe('The Performance panel landing page', function() {
       const waitForLCP = await installLCPListener(inspectedPageSession);
       await inspectedPage.goToResource('performance/fake-website.html');
       await waitForLCP();
-      await inspectedPage.page.click('#long-interaction');
-      await inspectedPage.page.click('#long-interaction');
-      await doubleRaf(inspectedPage);
+      await makeTwoLongInteractions(inspectedPage);
       await devToolsPage.bringToFront();
 
       const [lcpValueElem, clsValueElem, inpValueElem] = await devToolsPage.waitForMany(READY_LOCAL_METRIC_SELECTOR, 3);
@@ -122,9 +126,7 @@ describe('The Performance panel landing page', function() {
       const waitForLCP = await installLCPListener(inspectedPageSession);
       await inspectedPage.goToResource('performance/fake-website.html');
       await waitForLCP();
-      await inspectedPage.page.click('#long-interaction');
-      await inspectedPage.page.click('#long-interaction');
-      await doubleRaf(inspectedPage);
+      await makeTwoLongInteractions(inspectedPage);
 
       await inspectedPageSession.send('Runtime.enable');
       const executionContextPromise = new Promise(r => inspectedPageSession.once('Runtime.executionContextCreated', r));
@@ -167,9 +169,7 @@ describe('The Performance panel landing page', function() {
       await inspectedPage.goToResource('performance/fake-website.html');
       await waitForLCP1();
 
-      await inspectedPage.page.click('#long-interaction');
-      await inspectedPage.page.click('#long-interaction');
-      await doubleRaf(inspectedPage);
+      await makeTwoLongInteractions(inspectedPage);
 
       await devToolsPage.bringToFront();
 
@@ -424,8 +424,7 @@ describe('The Performance panel landing page', function() {
 
       await inspectedPage.page.click('#long-click');
 
-      await inspectedPage.evaluate(() => new Promise(r => requestAnimationFrame(r)));
-      await inspectedPage.evaluate(() => new Promise(r => requestAnimationFrame(r)));
+      await doubleRaf(inspectedPage);
 
       await devToolsPage.bringToFront();
 
@@ -460,8 +459,7 @@ describe('The Performance panel landing page', function() {
       // be detected by the live metrics model in DevTools.
       //
       // If any unnecessary JS references to the node get created they will be created in this time period.
-      await inspectedPage.evaluate(() => new Promise(requestAnimationFrame));
-      await inspectedPage.evaluate(() => new Promise(requestAnimationFrame));
+      await doubleRaf(inspectedPage);
       await devToolsPage.bringToFront();
       await devToolsPage.waitFor(INTERACTION_SELECTOR);
       await inspectedPage.bringToFront();