feat: use locators in Puppeteer extensions (#569)

This PR updates the PuppeteerRunner and PuppeteerStringify extensions to use the [new Locator API](https://pptr.dev/guides/locators) which makes several helpers redundant and make the replay more reliable.
puppeteer · Jul 4, 2023 · 92d7666 · 92d7666
1 parent 243ff1a
commit 92d7666
Show file tree

Hide file tree

Showing 12 changed files with 560 additions and 5,879 deletions.
diff --git a/__snapshots__/LighthouseStringifyExtension.test.ts.js b/__snapshots__/LighthouseStringifyExtension.test.ts.js
@@ -1,6 +1,6 @@
 exports['LighthouseStringifyExtension handles ending timespan 1'] = `
 const fs = require('fs');
-const puppeteer = require('puppeteer'); // v19.11.1 or later
+const puppeteer = require('puppeteer'); // v20.7.4 or later
 
 (async () => {
   const browser = await puppeteer.launch({headless: 'new'});
@@ -27,30 +27,27 @@ const puppeteer = require('puppeteer'); // v19.11.1 or later
   {
     const targetPage = page;
     const promises = [];
-    promises.push(targetPage.waitForNavigation());
+    const startWaitingForEvents = () => {
+      promises.push(targetPage.waitForNavigation());
+    }
+    startWaitingForEvents();
     await targetPage.goto('https://example.com');
     await Promise.all(promises);
   }
   await lhFlow.endNavigation();
   await lhFlow.startTimespan();
   {
     const targetPage = page;
-    await scrollIntoViewIfNeeded([
-      [
-        '#button'
-      ]
-    ], targetPage, timeout);
-    const element = await waitForSelectors([
-      [
-        '#button'
-      ]
-    ], targetPage, { timeout, visible: true });
-    await element.click({
-      offset: {
-        x: 61,
-        y: 13.5625,
-      },
-    });
+    await puppeteer.Locator.race([
+      targetPage.locator('#button')
+    ])
+      .setTimeout(timeout)
+      .click({
+        offset: {
+          x: 61,
+          y: 13.5625,
+        },
+      });
   }
   await lhFlow.endTimespan();
   const lhFlowReport = await lhFlow.generateReport();
@@ -61,7 +58,7 @@ const puppeteer = require('puppeteer'); // v19.11.1 or later
 
 exports['LighthouseStringifyExtension handles ending navigation 1'] = `
 const fs = require('fs');
-const puppeteer = require('puppeteer'); // v19.11.1 or later
+const puppeteer = require('puppeteer'); // v20.7.4 or later
 
 (async () => {
   const browser = await puppeteer.launch({headless: 'new'});
@@ -88,37 +85,37 @@ const puppeteer = require('puppeteer'); // v19.11.1 or later
   {
     const targetPage = page;
     const promises = [];
-    promises.push(targetPage.waitForNavigation());
+    const startWaitingForEvents = () => {
+      promises.push(targetPage.waitForNavigation());
+    }
+    startWaitingForEvents();
     await targetPage.goto('https://example.com');
     await Promise.all(promises);
   }
   await lhFlow.endNavigation();
   await lhFlow.startTimespan();
   {
     const targetPage = page;
-    await scrollIntoViewIfNeeded([
-      [
-        '#button'
-      ]
-    ], targetPage, timeout);
-    const element = await waitForSelectors([
-      [
-        '#button'
-      ]
-    ], targetPage, { timeout, visible: true });
-    await element.click({
-      offset: {
-        x: 61,
-        y: 13.5625,
-      },
-    });
+    await puppeteer.Locator.race([
+      targetPage.locator('#button')
+    ])
+      .setTimeout(timeout)
+      .click({
+        offset: {
+          x: 61,
+          y: 13.5625,
+        },
+      });
   }
   await lhFlow.endTimespan();
   await lhFlow.startNavigation();
   {
     const targetPage = page;
     const promises = [];
-    promises.push(targetPage.waitForNavigation());
+    const startWaitingForEvents = () => {
+      promises.push(targetPage.waitForNavigation());
+    }
+    startWaitingForEvents();
     await targetPage.goto('https://example.com/page/');
     await Promise.all(promises);
   }
@@ -133,7 +130,7 @@ exports[
   'LighthouseStringifyExtension handles multiple sequential navigations 1'
 ] = `
 const fs = require('fs');
-const puppeteer = require('puppeteer'); // v19.11.1 or later
+const puppeteer = require('puppeteer'); // v20.7.4 or later
 
 (async () => {
   const browser = await puppeteer.launch({headless: 'new'});
@@ -160,7 +157,10 @@ const puppeteer = require('puppeteer'); // v19.11.1 or later
   {
     const targetPage = page;
     const promises = [];
-    promises.push(targetPage.waitForNavigation());
+    const startWaitingForEvents = () => {
+      promises.push(targetPage.waitForNavigation());
+    }
+    startWaitingForEvents();
     await targetPage.goto('https://example.com');
     await Promise.all(promises);
   }
@@ -169,23 +169,20 @@ const puppeteer = require('puppeteer'); // v19.11.1 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 element.click({
-      offset: {
-        x: 61,
-        y: 13.5625,
-      },
-    });
+    const startWaitingForEvents = () => {
+      promises.push(targetPage.waitForNavigation());
+    }
+    await puppeteer.Locator.race([
+      targetPage.locator('#link')
+    ])
+      .setTimeout(timeout)
+      .on('action', () => startWaitingForEvents())
+      .click({
+        offset: {
+          x: 61,
+          y: 13.5625,
+        },
+      });
     await Promise.all(promises);
   }
   await lhFlow.endNavigation();

diff --git a/__snapshots__/PuppeteerStringifyExtension.test.ts.js b/__snapshots__/PuppeteerStringifyExtension.test.ts.js
@@ -3,18 +3,16 @@ exports[
 ] = `
 {
   const targetPage = page;
-  await scrollIntoViewIfNeeded([
-    'aria/Test'
-  ], targetPage, timeout);
-  const element = await waitForSelectors([
-    'aria/Test'
-  ], targetPage, { timeout, visible: true });
-  await element.click({
-    offset: {
-      x: 1,
-      y: 1,
-    },
-  });
+  await puppeteer.Locator.race([
+    targetPage.locator('::-p-aria(Test)')
+  ])
+    .setTimeout(timeout)
+    .click({
+      offset: {
+        x: 1,
+        y: 1,
+      },
+    });
 }
 
 `;
@@ -25,19 +23,20 @@ exports[
 {
   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 element.click({
-    offset: {
-      x: 1,
-      y: 1,
-    },
-  });
+  const startWaitingForEvents = () => {
+    promises.push(targetPage.waitForNavigation());
+  }
+  await puppeteer.Locator.race([
+    targetPage.locator('::-p-aria(Test)')
+  ])
+    .setTimeout(timeout)
+    .on('action', () => startWaitingForEvents())
+    .click({
+      offset: {
+        x: 1,
+        y: 1,
+      },
+    });
   await Promise.all(promises);
 }
 
@@ -48,24 +47,16 @@ exports[
 ] = `
 {
   const targetPage = page;
-  await scrollIntoViewIfNeeded([
-    [
-      'aria/Test',
-      'aria/Test2'
-    ]
-  ], targetPage, timeout);
-  const element = await waitForSelectors([
-    [
-      'aria/Test',
-      'aria/Test2'
-    ]
-  ], targetPage, { timeout, visible: true });
-  await element.click({
-    offset: {
-      x: 1,
-      y: 1,
-    },
-  });
+  await puppeteer.Locator.race([
+    targetPage.locator('::-p-aria(Test) >>>> ::-p-aria(Test2)')
+  ])
+    .setTimeout(timeout)
+    .click({
+      offset: {
+        x: 1,
+        y: 1,
+      },
+    });
 }
 
 `;
@@ -75,29 +66,11 @@ exports[
 ] = `
 {
   const targetPage = page;
-  await scrollIntoViewIfNeeded([
-    'aria/Test'
-  ], targetPage, timeout);
-  const element = await waitForSelectors([
-    'aria/Test'
-  ], targetPage, { timeout, visible: true });
-  const inputType = await element.evaluate(el => el.type);
-  if (inputType === 'select-one') {
-    await changeSelectElement(element, 'Hello World')
-  } else if ([
-    'textarea',
-    'text',
-    'url',
-    'tel',
-    'search',
-    'password',
-    'number',
-    'email'
-  ].includes(inputType)) {
-    await typeIntoElement(element, 'Hello World');
-  } else {
-    await changeElementValue(element, 'Hello World');
-  }
+  await puppeteer.Locator.race([
+    targetPage.locator('::-p-aria(Test)')
+  ])
+    .setTimeout(timeout)
+    .fill('Hello World');
 }
 
 `;
@@ -107,29 +80,11 @@ exports[
 ] = `
 {
   const targetPage = page;
-  await scrollIntoViewIfNeeded([
-    'aria/Test'
-  ], targetPage, timeout);
-  const element = await waitForSelectors([
-    'aria/Test'
-  ], targetPage, { timeout, visible: true });
-  const inputType = await element.evaluate(el => el.type);
-  if (inputType === 'select-one') {
-    await changeSelectElement(element, '#333333')
-  } else if ([
-    'textarea',
-    'text',
-    'url',
-    'tel',
-    'search',
-    'password',
-    'number',
-    'email'
-  ].includes(inputType)) {
-    await typeIntoElement(element, '#333333');
-  } else {
-    await changeElementValue(element, '#333333');
-  }
+  await puppeteer.Locator.race([
+    targetPage.locator('::-p-aria(Test)')
+  ])
+    .setTimeout(timeout)
+    .fill('#333333');
 }
 
 `;
diff --git a/__snapshots__/SchemaUtils.test.ts.js b/__snapshots__/SchemaUtils.test.ts.js
@@ -0,0 +1,53 @@
+exports[
+  'SchemaUtils Selectors selectorToPElementSelector should convert .cls > div #id 1'
+] = `
+.cls > div #id
+`;
+
+exports[
+  'SchemaUtils Selectors selectorToPElementSelector should convert .cls > div #id,.cls > div #id 1'
+] = `
+.cls > div #id >>>> .cls > div #id
+`;
+
+exports[
+  'SchemaUtils Selectors selectorToPElementSelector should convert text/my text ("my text") 1'
+] = `
+::-p-text(my\\ text\\ \\(\\"my\\ text\\"\\))
+`;
+
+exports[
+  'SchemaUtils Selectors selectorToPElementSelector should convert text/my text ("my text"),aria/Test my test[role="button"] 1'
+] = `
+::-p-text(my\\ text\\ \\(\\"my\\ text\\"\\)) >>>> ::-p-aria(Test\\ my\\ test\\[role\\=\\"button\\"\\])
+`;
+
+exports[
+  'SchemaUtils Selectors selectorToPElementSelector should convert text/my) 1'
+] = `
+::-p-text(my\\))
+`;
+
+exports[
+  'SchemaUtils Selectors selectorToPElementSelector should convert text/my() 1'
+] = `
+::-p-text(my\\(\\))
+`;
+
+exports[
+  'SchemaUtils Selectors selectorToPElementSelector should convert text/" 1'
+] = `
+::-p-text(\\")
+`;
+
+exports[
+  "SchemaUtils Selectors selectorToPElementSelector should convert text/' 1"
+] = `
+::-p-text(\\')
+`;
+
+exports[
+  'SchemaUtils Selectors selectorToPElementSelector should convert xpath///*[@id="id"] 1'
+] = `
+::-p-xpath(\\/\\/\\*\\[\\@id\\=\\"id\\"\\])
+`;