Update JS examples for async page

grafana · May 28, 2024 · fad336e · fad336e
1 parent 5c37319
commit fad336e
Show file tree

Hide file tree

Showing 22 changed files with 64 additions and 46 deletions.
diff --git a/examples/colorscheme.js b/examples/colorscheme.js
@@ -31,7 +31,7 @@ export default async function() {
       'https://googlechromelabs.github.io/dark-mode-toggle/demo/',
       { waitUntil: 'load' },
     )
-    const colorScheme = page.evaluate(() => {
+    const colorScheme = await page.evaluate(() => {
       return {
         isDarkColorScheme: window.matchMedia('(prefers-color-scheme: dark)').matches
       };
@@ -40,6 +40,6 @@ export default async function() {
       'isDarkColorScheme': cs => cs.isDarkColorScheme
     });
   } finally {
-    page.close();
+    await page.close();
   }
 }
diff --git a/examples/cookies.js b/examples/cookies.js
@@ -122,6 +122,6 @@ export default async function () {
       'number of cookies should be zero': n => n === 0,
     });
   } finally {
-    page.close();
+    await page.close();
   }
 }
diff --git a/examples/device_emulation.js b/examples/device_emulation.js
@@ -28,7 +28,7 @@ export default async function() {
 
   try {
     await page.goto('https://k6.io/', { waitUntil: 'networkidle' });
-    const dimensions = page.evaluate(() => {
+    const dimensions = await page.evaluate(() => {
       return {
         width: document.documentElement.clientWidth,
         height: document.documentElement.clientHeight,
@@ -46,6 +46,6 @@ export default async function() {
       sleep(10);
     }
   } finally {
-    page.close();
+    await page.close();
   }
 }
diff --git a/examples/dispatch.js b/examples/dispatch.js
@@ -31,6 +31,6 @@ export default async function() {
     const ok = await h3.textContent() == "Contact us";
     check(ok, { "header": ok });
   } finally {
-    page.close();
+    await page.close();
   }
 }
diff --git a/examples/elementstate.js b/examples/elementstate.js
@@ -22,7 +22,7 @@ export default async function() {
   const page = await context.newPage();
 
   // Inject page content
-  page.setContent(`
+  await page.setContent(`
     <div class="visible">Hello world</div>
     <div style="display:none" class="hidden"></div>
     <div class="editable" editable>Edit me</div>
@@ -33,13 +33,27 @@ export default async function() {
   `);
 
   // Check state
-  const isVisible = await page.$('.visible').isVisible();
-  const isHidden = await page.$('.hidden').isHidden();
-  const isEditable = await page.$('.editable').isEditable();
-  const isEnabled = await page.$('.enabled').isEnabled();
-  const isDisabled = await page.$('.disabled').isDisabled();
-  const isChecked = await page.$('.checked').isChecked();
-  const isUnchecked = await page.$('.unchecked').isChecked() === false;
+  let el = await page.$('.visible');
+  const isVisible = await el.isVisible();
+
+  el = await page.$('.hidden');
+  const isHidden = await el.isHidden();
+
+  el = await page.$('.editable');
+  const isEditable = await el.isEditable();
+
+  el = await page.$('.enabled');
+  const isEnabled = await el.isEnabled();
+
+  el = await page.$('.disabled');
+  const isDisabled = await el.isDisabled();
+
+  el = await page.$('.checked');
+  const isChecked = await el.isChecked();
+
+  el = await page.$('.unchecked');
+  const isUnchecked = await el.isChecked() === false;
+
   check(page, {
     'visible': isVisible,
     'hidden': isHidden,
@@ -50,5 +64,5 @@ export default async function() {
     'unchecked': isUnchecked,
   });
 
-  page.close();
+  await page.close();
 }
diff --git a/examples/evaluate.js b/examples/evaluate.js
@@ -25,22 +25,22 @@ export default async function() {
     await page.goto("https://test.k6.io/", { waitUntil: "load" });
 
     // calling evaluate without arguments
-    let result = page.evaluate(() => {
+    let result = await page.evaluate(() => {
         return Promise.resolve(5 * 42);
     });
     check(result, {
       "result should be 210": (result) => result == 210,
     });
 
     // calling evaluate with arguments
-    result = page.evaluate(([x, y]) => {
+    result = await page.evaluate(([x, y]) => {
         return Promise.resolve(x * y);
       }, [5, 5]
     );
     check(result, {
       "result should be 25": (result) => result == 25,
     });
   } finally {
-    page.close();
+    await page.close();
   }
 }
diff --git a/examples/fillform.js b/examples/fillform.js
@@ -53,6 +53,6 @@ export default async function() {
       }
     })
   } finally {
-    page.close();
+    await page.close();
   }
 }
diff --git a/examples/getattribute.js b/examples/getattribute.js
@@ -25,12 +25,12 @@ export default async function() {
     await page.goto('https://googlechromelabs.github.io/dark-mode-toggle/demo/', {
       waitUntil: 'load',
     });
-    let el = page.$('#dark-mode-toggle-3');
+    let el = await page.$('#dark-mode-toggle-3');
     const mode = await el.getAttribute('mode');
     check(mode, {
       "GetAttribute('mode')": mode === 'light',
     });
   } finally {
-    page.close();
+    await page.close();
   }
 }
diff --git a/examples/grant_permission.js b/examples/grant_permission.js
@@ -27,9 +27,9 @@ export default async function() {
 
   try {
     await page.goto('https://test.k6.io/');
-    page.screenshot({ path: `example-chromium.png` });
+    await page.screenshot({ path: `example-chromium.png` });
     await context.clearPermissions();
   } finally {
-    page.close();
+    await page.close();
   }
 }
diff --git a/examples/hosts.js b/examples/hosts.js
@@ -28,6 +28,6 @@ export default async function() {
       'null response': r => r === null,
     });
   } finally {
-    page.close();
+    await page.close();
   }
 }
diff --git a/examples/keyboard.js b/examples/keyboard.js
@@ -29,5 +29,5 @@ export default async function () {
   await page.keyboard.press('Enter'); // submit
   await page.waitForNavigation();
 
-  page.close();
+  await page.close();
 }
diff --git a/examples/locator.js b/examples/locator.js
@@ -69,6 +69,6 @@ export default async function() {
     ]);
     console.log(await currentBet.innerText());
   } finally {
-    page.close();
+    await page.close();
   }
 }
diff --git a/examples/locator_pom.js b/examples/locator_pom.js
@@ -72,6 +72,6 @@ export default async function() {
     await bet.heads();
     console.log("Current bet:", await bet.current());
   } finally {
-    page.close();
+    await page.close();
   }
 }
diff --git a/examples/multiple-scenario.js b/examples/multiple-scenario.js
@@ -38,7 +38,7 @@ export async function messages() {
   try {
     await page.goto('https://test.k6.io/my_messages.php', { waitUntil: 'networkidle' });
   } finally {
-    page.close();
+    await page.close();
   }
 }
 
@@ -48,6 +48,6 @@ export async function news() {
   try {
     await page.goto('https://test.k6.io/news.php', { waitUntil: 'networkidle' });
   } finally {
-    page.close();
+    await page.close();
   }
 }
diff --git a/examples/pageon.js b/examples/pageon.js
@@ -32,8 +32,8 @@ export default async function() {
         });
     });
 
-    page.evaluate(() => console.log('this is a console.log message', 42));
+    await page.evaluate(() => console.log('this is a console.log message', 42));
   } finally {
-    page.close();
+    await page.close();
   }
 }
diff --git a/examples/querying.js b/examples/querying.js
@@ -32,6 +32,6 @@ export default async function() {
       'Title with XPath selector': titleWithXPath == 'test.k6.io',
     });
   } finally {
-    page.close();
+    await page.close();
   }
 }
diff --git a/examples/screenshot.js b/examples/screenshot.js
@@ -22,10 +22,10 @@ export default async function() {
 
   try {
     await page.goto('https://test.k6.io/');
-    page.screenshot({ path: 'screenshot.png' });
+    await page.screenshot({ path: 'screenshot.png' });
     // TODO: Assert this somehow. Upload as CI artifact or just an external `ls`?
     // Maybe even do a fuzzy image comparison against a preset known good screenshot?
   } finally {
-    page.close();
+    await page.close();
   }
 }
diff --git a/examples/shadowdom.js b/examples/shadowdom.js
@@ -19,19 +19,23 @@ export const options = {
 
 export default async function() {
   const page = await browser.newPage();
-  page.setContent("<html><head><style></style></head><body>hello!</body></html>")
+
+  await page.setContent("<html><head><style></style></head><body>hello!</body></html>")
+
   await page.evaluate(() => {
     const shadowRoot = document.createElement('div');
     shadowRoot.id = 'shadow-root';
     shadowRoot.attachShadow({mode: 'open'});
     shadowRoot.shadowRoot.innerHTML = '<p id="find">Shadow DOM</p>';
     document.body.appendChild(shadowRoot);
   });
+
   const shadowEl = page.locator("#find");
   const ok = await shadowEl.innerText() === "Shadow DOM";
   check(shadowEl, {
     "shadow element exists": (e) => e !== null,
     "shadow element text is correct": () => ok,
   });
-  page.close();
+
+  await page.close();
 }
diff --git a/examples/throttle.js b/examples/throttle.js
@@ -45,7 +45,7 @@ export async function normal() {
   try {
     await page.goto('https://test.k6.io/', { waitUntil: 'networkidle' });
   } finally {
-    page.close();
+    await page.close();
   }
 }
 
@@ -54,11 +54,11 @@ export async function networkThrottled() {
   const page = await context.newPage();
 
   try {
-    page.throttleNetwork(networkProfiles['Slow 3G']);
+    await page.throttleNetwork(networkProfiles["Slow 3G"]);
 
     await page.goto('https://test.k6.io/', { waitUntil: 'networkidle' });
   } finally {
-    page.close();
+    await page.close();
   }
 }
 
@@ -67,10 +67,10 @@ export async function cpuThrottled() {
   const page = await context.newPage();
 
   try {
-    page.throttleCPU({ rate: 4 });
+    await page.throttleCPU({ rate: 4 });
 
     await page.goto('https://test.k6.io/', { waitUntil: 'networkidle' });
   } finally {
-    page.close();
+    await page.close();
   }
 }
diff --git a/examples/touchscreen.js b/examples/touchscreen.js
@@ -30,5 +30,5 @@ export default async function () {
     page.touchscreen.tap(newsLinkBox.x + newsLinkBox.width / 2, newsLinkBox.y),
   ]);
 
-  page.close();
+  await page.close();
 }
diff --git a/examples/waitForEvent.js b/examples/waitForEvent.js
@@ -34,6 +34,6 @@ export default async function() {
   await promise
   console.log('predicate passed')
 
-  page.close()
-  page2.close()
+  await page.close()
+  await page2.close();
 };
diff --git a/examples/waitforfunction.js b/examples/waitforfunction.js
@@ -22,7 +22,7 @@ export default async function() {
   const page = await context.newPage();
 
   try {
-    page.evaluate(() => {
+    await page.evaluate(() => {
       setTimeout(() => {
         const el = document.createElement('h1');
         el.innerHTML = 'Hello';
@@ -36,6 +36,6 @@ export default async function() {
     });
     check(ok, { 'waitForFunction successfully resolved': ok.innerHTML() == 'Hello' });
   } finally {
-    page.close();
+    await page.close();
   }
 }