Update examples to use Promise.all

We can now use Promise.all when we interact with an element that causes
a navigation to occur, and so we need to also use waitForNavigation
before carrying on to the next steps in the tests. This helps prevent
race conditions between clicking and waiting.

Resolves: #467 (comment)

README.md

@@ -357,24 +357,32 @@ export default function () {
 
   const currentBet = page.locator("//p[starts-with(text(),'Your bet: ')]");
 
-  // the tails locator clicks on the tails button by using the
-  // locator's selector.
-  tails.click();
+  // In the following Promise.all the tails locator clicks
+  // on the tails button by using the locator's selector.
   // Since clicking on each button causes page navigation,
-  // waitForNavigation is needed. It's because the page
+  // waitForNavigation is needed -- this is because the page
   // won't be ready until the navigation completes.
-  page.waitForNavigation().then(() => {
+  // Setting up the waitForNavigation first before the click
+  // is important to avoid race conditions.
+  Promise.all([
+    page.waitForNavigation(),
+    tails.click(),
+  ]).then(() => {
     console.log(currentBet.innerText());
   }).then(() => {
     // the heads locator clicks on the heads button
     // by using the locator's selector.
-    heads.click();
-    return page.waitForNavigation()
+    return Promise.all([
+      page.waitForNavigation(),
+      heads.click(),
+    ]);
   }).then(() => {
     console.log(currentBet.innerText());
   }).then(() => {
-    tails.click();
-    return page.waitForNavigation()
+    return Promise.all([
+      page.waitForNavigation(),
+      tails.click(),
+    ]);
   }).then(() => {
     console.log(currentBet.innerText());
   }).finally(() => {

examples/fillform.js

@@ -15,13 +15,14 @@ export default function() {
     // Enter login credentials and login
     page.$('input[name="login"]').type('admin');
     page.$('input[name="password"]').type('123');
-  }).then(() =>
-    page.$('input[type="submit"]').click()
-  ).then(() =>
-    // We expect the above form submission to trigger a navigation, so wait for it
-    // and the page to be loaded.
-    page.waitForNavigation()
-  ).then(() => {
+    // We expect the form submission to trigger a navigation, so to prevent a
+    // race condition, setup a waiter concurrently while waiting for the click
+    // to resolve.
+    return Promise.all([
+      page.waitForNavigation(),
+      page.$('input[type="submit"]').click(),
+    ]);
+  }).then(() => {
     check(page, {
       'header': page.$('h2').textContent() == 'Welcome, admin!',
     });

examples/locator.js

@@ -29,24 +29,32 @@ export default function () {
 
   const currentBet = page.locator("//p[starts-with(text(),'Your bet: ')]");
 
-  // the tails locator clicks on the tails button by using the
-  // locator's selector.
-  tails.click();
+  // In the following Promise.all the tails locator clicks
+  // on the tails button by using the locator's selector.
   // Since clicking on each button causes page navigation,
-  // waitForNavigation is needed. It's because the page
+  // waitForNavigation is needed -- this is because the page
   // won't be ready until the navigation completes.
-  page.waitForNavigation().then(() => {
+  // Setting up the waitForNavigation first before the click
+  // is important to avoid race conditions.
+  Promise.all([
+    page.waitForNavigation(),
+    tails.click(),
+  ]).then(() => {
     console.log(currentBet.innerText());
   }).then(() => {
     // the heads locator clicks on the heads button
     // by using the locator's selector.
-    heads.click();
-    return page.waitForNavigation()
+    return Promise.all([
+      page.waitForNavigation(),
+      heads.click(),
+    ]);
   }).then(() => {
     console.log(currentBet.innerText());
   }).then(() => {
-    tails.click();
-    return page.waitForNavigation()
+    return Promise.all([
+      page.waitForNavigation(),
+      tails.click(),
+    ]);
   }).then(() => {
     console.log(currentBet.innerText());
   }).finally(() => {

examples/locator_pom.js

@@ -22,13 +22,17 @@ export class Bet {
   }
 
   heads() {
-    this.headsButton.click();
-    return this.page.waitForNavigation();
+    return Promise.all([
+      this.page.waitForNavigation(),
+      this.headsButton.click(),
+    ]);
   }
 
   tails() {
-    this.tailsButton.click();
-    return this.page.waitForNavigation();
+    return Promise.all([
+      this.page.waitForNavigation(),
+      this.tailsButton.click(),
+    ]);
   }
 
   current() {