feat: add visible, properties, and attributes to waitForElement

puppeteer · Dec 16, 2022 · 9983e5c · 9983e5c
1 parent 4f3e9a6
commit 9983e5c
Show file tree

Hide file tree

Showing 15 changed files with 949 additions and 189 deletions.
diff --git a/__snapshots__/JSONStringifyExtension.test.ts.js b/__snapshots__/JSONStringifyExtension.test.ts.js
@@ -14,7 +14,7 @@ exports['JSONStringifyExtension should print the script for a click step 1'] = `
   ]
 }
 
-`;
+`
 
 exports['JSONStringifyExtension should print an entire script 1'] = `
 {
@@ -52,4 +52,4 @@ exports['JSONStringifyExtension should print an entire script 1'] = `
 }
 //# recorderSourceMap=BDORO
 
-`;
+`
diff --git a/__snapshots__/JSONUtils.test.ts.js b/__snapshots__/JSONUtils.test.ts.js
@@ -39,8 +39,8 @@ exports['JSONUtils should format JSON as JS 1'] = `
   otherTest: 1.234,
   nullTest: null
 }
-`;
+`
 
 exports['JSONUtils should properly escape <script> 1'] = `
 '\\x3Cscript>test\\x3C/script>\\x3Cscript>test\\x3C/script>\\x3Cscript>test\\x3C/script>'
-`;
+`
diff --git a/__snapshots__/LighthouseStringifyExtension.test.ts.js b/__snapshots__/LighthouseStringifyExtension.test.ts.js
@@ -57,7 +57,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');
@@ -127,11 +127,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
 
@@ -193,4 +191,4 @@ const puppeteer = require('puppeteer'); // v13.0.0 or later
   fs.writeFileSync(__dirname + '/flow.report.html', lhFlowReport)
 
   await 
-`;
+`
diff --git a/__snapshots__/PuppeteerReplayStringifyExtension.test.ts.js b/__snapshots__/PuppeteerReplayStringifyExtension.test.ts.js
@@ -1,6 +1,4 @@
-exports[
-  'PuppeteerReplayStringifyExtension should print the script for a click step 1'
-] = `
+exports['PuppeteerReplayStringifyExtension should print the script for a click step 1'] = `
 await runner.runStep({
   type: 'click',
   target: 'main',
@@ -16,7 +14,7 @@ await runner.runStep({
   ]
 });
 
-`;
+`
 
 exports['PuppeteerReplayStringifyExtension should print an entire script 1'] = `
 import url from 'url';
@@ -50,4 +48,4 @@ if (process && import.meta.url === url.pathToFileURL(process.argv[1]).href) {
 }
 //# recorderSourceMap=BIO
 
-`;
+`
diff --git a/__snapshots__/PuppeteerStringifyExtension.test.ts.js b/__snapshots__/PuppeteerStringifyExtension.test.ts.js
@@ -1,6 +1,4 @@
-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([
@@ -17,11 +15,9 @@ 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 = [];
@@ -41,11 +37,9 @@ 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([
@@ -68,11 +62,9 @@ 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([
@@ -100,11 +92,9 @@ 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([
@@ -132,4 +122,4 @@ exports[
   }
 }
 
-`;
+`
diff --git a/__snapshots__/lighthouse.test.ts.js b/__snapshots__/lighthouse.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
 
@@ -164,17 +162,68 @@ const puppeteer = require('puppeteer'); // v13.0.0 or later
   }
 
   async function waitForElement(step, frame, timeout) {
-    const count = step.count || 1;
-    const operator = step.operator || '>=';
-    const comp = {
+    const {
+      count = 1,
+      operator = '>=',
+      visible = true,
+      properties,
+      attributes,
+    } = step;
+    const compFn = {
       '==': (a, b) => a === b,
       '>=': (a, b) => a >= b,
       '<=': (a, b) => a <= b,
-    };
-    const compFn = comp[operator];
+    }[operator];
     await waitForFunction(async () => {
       const elements = await querySelectorsAll(step.selectors, frame);
-      return compFn(elements.length, count);
+      let result = compFn(elements.length, count);
+      const elementsHandle = await frame.evaluateHandle((...elements) => {
+        return elements;
+      }, ...elements);
+      await Promise.all(elements.map((element) => element.dispose()));
+      if (result && (properties || attributes)) {
+        result = await elementsHandle.evaluate(
+          (elements, properties, attributes) => {
+            for (const element of elements) {
+              if (attributes) {
+                for (const [name, value] of Object.entries(attributes)) {
+                  if (element.getAttribute(name) !== value) {
+                    return false;
+                  }
+                }
+              }
+              if (properties) {
+                if (!isDeepMatch(properties, element)) {
+                  return false;
+                }
+              }
+            }
+            return true;
+
+            function isDeepMatch(a, b) {
+              if (a === b) {
+                return true;
+              }
+              if ((a && !b) || (!a && b)) {
+                return false;
+              }
+              if (!(a instanceof Object) || !(b instanceof Object)) {
+                return false;
+              }
+              for (const [key, value] of Object.entries(a)) {
+                if (!isDeepMatch(value, b[key])) {
+                  return false;
+                }
+              }
+              return true;
+            }
+          },
+          properties,
+          attributes
+        );
+      }
+      await elementsHandle.dispose();
+      return result === visible;
     }, timeout);
   }
 
@@ -279,4 +328,4 @@ const puppeteer = require('puppeteer'); // v13.0.0 or later
 });
 //# recorderSourceMap=BRHYGeRvBQ/BV
 
-`;
+`
-Original file line number
+Diff line change
@@ Expand Up @@
       ]
     }
-    `;
+    `
     exports['JSONStringifyExtension should print an entire script 1'] = `
     {
@@ Expand Down Expand Up @@
     }
     //# recorderSourceMap=BDORO
-    `;
+    `