fix: ensure the right order of waitForSelector and scrollIntoView

puppeteer · Sep 19, 2022 · cd2266b · cd2266b
1 parent e239650
commit cd2266b
Show file tree

Hide file tree

Showing 8 changed files with 153 additions and 93 deletions.
diff --git a/__snapshots__/LighthouseStringifyExtension.test.ts.js b/__snapshots__/LighthouseStringifyExtension.test.ts.js
@@ -28,8 +28,8 @@ const puppeteer = require('puppeteer'); // v13.0.0 or later
   await lhFlow.startTimespan();
   {
     const targetPage = page;
+    await scrollIntoViewIfNeeded([["#button"]], targetPage, timeout);
     const element = await waitForSelectors([["#button"]], targetPage, { timeout, visible: true });
-    await scrollIntoViewIfNeeded(element, timeout);
     await element.click({
       offset: {
         x: 61,
@@ -42,7 +42,7 @@ const puppeteer = require('puppeteer'); // v13.0.0 or later
   fs.writeFileSync(__dirname + '/flow.report.html', lhFlowReport)
 
   await 
-`;
+`
 
 exports['LighthouseStringifyExtension handles ending navigation 1'] = `
 const fs = require('fs');
@@ -74,8 +74,8 @@ const puppeteer = require('puppeteer'); // v13.0.0 or later
   await lhFlow.startTimespan();
   {
     const targetPage = page;
+    await scrollIntoViewIfNeeded([["#button"]], targetPage, timeout);
     const element = await waitForSelectors([["#button"]], targetPage, { timeout, visible: true });
-    await scrollIntoViewIfNeeded(element, timeout);
     await element.click({
       offset: {
         x: 61,
@@ -97,11 +97,9 @@ const puppeteer = require('puppeteer'); // v13.0.0 or later
   fs.writeFileSync(__dirname + '/flow.report.html', lhFlowReport)
 
   await 
-`;
+`
 
-exports[
-  'LighthouseStringifyExtension handles multiple sequential navigations 1'
-] = `
+exports['LighthouseStringifyExtension handles multiple sequential navigations 1'] = `
 const fs = require('fs');
 const puppeteer = require('puppeteer'); // v13.0.0 or later
 
@@ -133,8 +131,8 @@ const puppeteer = require('puppeteer'); // v13.0.0 or later
     const targetPage = page;
     const promises = [];
     promises.push(targetPage.waitForNavigation());
+    await scrollIntoViewIfNeeded([["#link"]], targetPage, timeout);
     const element = await waitForSelectors([["#link"]], targetPage, { timeout, visible: true });
-    await scrollIntoViewIfNeeded(element, timeout);
     await element.click({
       offset: {
         x: 61,
@@ -148,4 +146,4 @@ const puppeteer = require('puppeteer'); // v13.0.0 or later
   fs.writeFileSync(__dirname + '/flow.report.html', lhFlowReport)
 
   await 
-`;
+`
diff --git a/__snapshots__/PuppeteerStringifyExtension.test.ts.js b/__snapshots__/PuppeteerStringifyExtension.test.ts.js
@@ -1,10 +1,8 @@
-exports[
-  'PuppeteerStringifyExtension should print the correct script for a click step 1'
-] = `
+exports['PuppeteerStringifyExtension should print the correct script for a click step 1'] = `
 {
   const targetPage = page;
+  await scrollIntoViewIfNeeded(["aria/Test"], targetPage, timeout);
   const element = await waitForSelectors(["aria/Test"], targetPage, { timeout, visible: true });
-  await scrollIntoViewIfNeeded(element, timeout);
   await element.click({
     offset: {
       x: 1,
@@ -13,17 +11,15 @@ exports[
   });
 }
 
-`;
+`
 
-exports[
-  'PuppeteerStringifyExtension should print the correct script for asserted events 1'
-] = `
+exports['PuppeteerStringifyExtension should print the correct script for asserted events 1'] = `
 {
   const targetPage = page;
   const promises = [];
   promises.push(targetPage.waitForNavigation());
+  await scrollIntoViewIfNeeded(["aria/Test"], targetPage, timeout);
   const element = await waitForSelectors(["aria/Test"], targetPage, { timeout, visible: true });
-  await scrollIntoViewIfNeeded(element, timeout);
   await element.click({
     offset: {
       x: 1,
@@ -33,15 +29,13 @@ exports[
   await Promise.all(promises);
 }
 
-`;
+`
 
-exports[
-  'PuppeteerStringifyExtension should print the correct script with a chain selector 1'
-] = `
+exports['PuppeteerStringifyExtension should print the correct script with a chain selector 1'] = `
 {
   const targetPage = page;
+  await scrollIntoViewIfNeeded([["aria/Test","aria/Test2"]], targetPage, timeout);
   const element = await waitForSelectors([["aria/Test","aria/Test2"]], targetPage, { timeout, visible: true });
-  await scrollIntoViewIfNeeded(element, timeout);
   await element.click({
     offset: {
       x: 1,
@@ -50,15 +44,13 @@ exports[
   });
 }
 
-`;
+`
 
-exports[
-  'PuppeteerStringifyExtension should print the correct script for a change step 1'
-] = `
+exports['PuppeteerStringifyExtension should print the correct script for a change step 1'] = `
 {
   const targetPage = page;
+  await scrollIntoViewIfNeeded(["aria/Test"], targetPage, timeout);
   const element = await waitForSelectors(["aria/Test"], targetPage, { timeout, visible: true });
-  await scrollIntoViewIfNeeded(element, timeout);
   const type = await element.evaluate(el => el.type);
   if (["select-one"].includes(type)) {
     await element.select("Hello World");
@@ -74,15 +66,13 @@ exports[
   }
 }
 
-`;
+`
 
-exports[
-  'PuppeteerStringifyExtension should print the correct script for a change step for non-text inputs 1'
-] = `
+exports['PuppeteerStringifyExtension should print the correct script for a change step for non-text inputs 1'] = `
 {
   const targetPage = page;
+  await scrollIntoViewIfNeeded(["aria/Test"], targetPage, timeout);
   const element = await waitForSelectors(["aria/Test"], targetPage, { timeout, visible: true });
-  await scrollIntoViewIfNeeded(element, timeout);
   const type = await element.evaluate(el => el.type);
   if (["select-one"].includes(type)) {
     await element.select("#333333");
@@ -98,4 +88,4 @@ exports[
   }
 }
 
-`;
+`
diff --git a/__snapshots__/lighthouse-e2e.test.ts.js b/__snapshots__/lighthouse-e2e.test.ts.js
@@ -1,6 +1,4 @@
-exports[
-  'Lighthouse user flow run via stringify produces a valid desktop flow report 1'
-] = `
+exports['Lighthouse user flow run via stringify produces a valid desktop flow report 1'] = `
 const fs = require('fs');
 const puppeteer = require('puppeteer'); // v13.0.0 or later
 
@@ -27,8 +25,8 @@ const puppeteer = require('puppeteer'); // v13.0.0 or later
   await lhFlow.startTimespan();
   {
     const targetPage = page;
+    await scrollIntoViewIfNeeded(["#test"], targetPage, timeout);
     const element = await waitForSelectors(["#test"], targetPage, { timeout, visible: true });
-    await scrollIntoViewIfNeeded(element, timeout);
     await element.click({
       button: 'left',
       offset: {
@@ -39,8 +37,8 @@ const puppeteer = require('puppeteer'); // v13.0.0 or later
   }
   {
     const targetPage = page;
+    await scrollIntoViewIfNeeded(["#test"], targetPage, timeout);
     const element = await waitForSelectors(["#test"], targetPage, { timeout, visible: true });
-    await scrollIntoViewIfNeeded(element, timeout);
     await element.click({
       button: 'middle',
       offset: {
@@ -55,8 +53,8 @@ const puppeteer = require('puppeteer'); // v13.0.0 or later
     const targetPage = page;
     const promises = [];
     promises.push(targetPage.waitForNavigation());
+    await scrollIntoViewIfNeeded(["a[href=\\"main2.html\\"]"], targetPage, timeout);
     const element = await waitForSelectors(["a[href=\\"main2.html\\"]"], targetPage, { timeout, visible: true });
-    await scrollIntoViewIfNeeded(element, timeout);
     await element.click({
       offset: {
         x: 1,
@@ -69,8 +67,8 @@ const puppeteer = require('puppeteer'); // v13.0.0 or later
   await lhFlow.startTimespan();
   {
     const targetPage = page;
+    await scrollIntoViewIfNeeded(["#test"], targetPage, timeout);
     const element = await waitForSelectors(["#test"], targetPage, { timeout, visible: true });
-    await scrollIntoViewIfNeeded(element, timeout);
     await element.click({
       button: 'left',
       offset: {
@@ -81,8 +79,8 @@ const puppeteer = require('puppeteer'); // v13.0.0 or later
   }
   {
     const targetPage = page;
+    await scrollIntoViewIfNeeded(["#test"], targetPage, timeout);
     const element = await waitForSelectors(["#test"], targetPage, { timeout, visible: true });
-    await scrollIntoViewIfNeeded(element, timeout);
     await element.click({
       button: 'left',
       offset: {
@@ -108,7 +106,13 @@ const puppeteer = require('puppeteer'); // v13.0.0 or later
     throw new Error('Could not find element for selectors: ' + JSON.stringify(selectors));
   }
 
-  async function scrollIntoViewIfNeeded(element, timeout) {
+  async function scrollIntoViewIfNeeded(selectors, frame, timeout) {
+    const element = await waitForSelectors(selectors, frame, { visible: false, timeout });
+    if (!element) {
+      throw new Error(
+        'The element could not be found.'
+      );
+    }
     await waitForConnected(element, timeout);
     const isInViewport = await element.isIntersectingViewport({threshold: 0});
     if (isInViewport) {
@@ -245,4 +249,4 @@ const puppeteer = require('puppeteer'); // v13.0.0 or later
   process.exit(1);
 });
 
-`;
+`