Async waitForNavigation

README.md

@@ -357,27 +357,35 @@ 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();
-  console.log(currentBet.innerText());
-
-  // the heads locator clicks on the heads button by using the
-  // locator's selector.
-  heads.click();
-  page.waitForNavigation();
-  console.log(currentBet.innerText());
-
-  tails.click();
-  page.waitForNavigation();
-  console.log(currentBet.innerText());
-
-  page.close();
-  browser.close();
+  // 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());
+    // the heads locator clicks on the heads button
+    // by using the locator's selector.
+    return Promise.all([
+      page.waitForNavigation(),
+      heads.click(),
+    ]);
+  }).then(() => {
+    console.log(currentBet.innerText());
+    return Promise.all([
+      page.waitForNavigation(),
+      tails.click(),
+    ]);
+  }).finally(() => {
+    console.log(currentBet.innerText());
+    page.close();
+    browser.close();
+  })
 }
 ```
 

api/frame.go

@@ -51,7 +51,7 @@ type Frame interface {
 	URL() string
 	WaitForFunction(pageFunc, opts goja.Value, args ...goja.Value) *goja.Promise
 	WaitForLoadState(state string, opts goja.Value)
-	WaitForNavigation(opts goja.Value) Response
+	WaitForNavigation(opts goja.Value) *goja.Promise
 	WaitForSelector(selector string, opts goja.Value) ElementHandle
 	WaitForTimeout(timeout int64)
 }

api/page.go

@@ -92,7 +92,7 @@ type Page interface {
 	WaitForEvent(event string, optsOrPredicate goja.Value) interface{}
 	WaitForFunction(fn, opts goja.Value, args ...goja.Value) *goja.Promise
 	WaitForLoadState(state string, opts goja.Value)
-	WaitForNavigation(opts goja.Value) Response
+	WaitForNavigation(opts goja.Value) *goja.Promise
 	WaitForRequest(urlOrPredicate, opts goja.Value) Request
 	WaitForResponse(urlOrPredicate, opts goja.Value) Response
 	WaitForSelector(selector string, opts goja.Value) ElementHandle

common/frame.go

@@ -1821,8 +1821,10 @@ func (f *Frame) WaitForLoadState(state string, opts goja.Value) {
 }
 
 // WaitForNavigation waits for the given navigation lifecycle event to happen.
-func (f *Frame) WaitForNavigation(opts goja.Value) api.Response {
-	return f.manager.WaitForFrameNavigation(f, opts)
+func (f *Frame) WaitForNavigation(opts goja.Value) *goja.Promise {
+	return k6ext.Promise(f.ctx, func() (result interface{}, reason error) {
+		return f.manager.waitForFrameNavigation(f, opts)
+	})
 }
 
 // WaitForSelector waits for the given selector to match the waiting criteria.

common/frame_manager.go

@@ -685,8 +685,8 @@ func (m *FrameManager) Page() api.Page {
 	return nil
 }
 
-// WaitForFrameNavigation waits for the given navigation lifecycle event to happen.
-func (m *FrameManager) WaitForFrameNavigation(frame *Frame, opts goja.Value) api.Response {
+// waitForFrameNavigation waits for the given navigation lifecycle event to happen.
+func (m *FrameManager) waitForFrameNavigation(frame *Frame, opts goja.Value) (api.Response, error) {
 	m.logger.Debugf("FrameManager:WaitForFrameNavigation",
 		"fmid:%d fid:%s furl:%s",
 		m.ID(), frame.ID(), frame.URL())
@@ -696,7 +696,7 @@ func (m *FrameManager) WaitForFrameNavigation(frame *Frame, opts goja.Value) api
 
 	parsedOpts := NewFrameWaitForNavigationOptions(time.Duration(m.timeoutSettings.timeout()) * time.Second)
 	if err := parsedOpts.Parse(m.ctx, opts); err != nil {
-		k6ext.Panic(m.ctx, "parsing wait for frame navigation options: %v", err)
+		return nil, fmt.Errorf("parsing wait for frame navigation options: %w", err)
 	}
 
 	ch, evCancelFn := createWaitForEventHandler(m.ctx, frame, []string{EventFrameNavigation},
@@ -712,9 +712,9 @@ func (m *FrameManager) WaitForFrameNavigation(frame *Frame, opts goja.Value) api
 		m.logger.Warnf("FrameManager:WaitForFrameNavigation:<-ctx.Done",
 			"fmid:%d furl:%s err:%v",
 			m.ID(), frame.URL(), m.ctx.Err())
-		return nil
+		return nil, nil
 	case <-time.After(parsedOpts.Timeout):
-		k6ext.Panic(m.ctx, "waiting for frame navigation timed out after %s", parsedOpts.Timeout)
+		return nil, fmt.Errorf("waiting for frame navigation timed out after %s", parsedOpts.Timeout)
 	case data := <-ch:
 		event = data.(*NavigationEvent)
 	}
@@ -723,7 +723,7 @@ func (m *FrameManager) WaitForFrameNavigation(frame *Frame, opts goja.Value) api
 		// In case of navigation within the same document (e.g. via an anchor
 		// link or the History API), there is no new document and a
 		// LifecycleEvent will not be fired, so we don't need to wait for it.
-		return nil
+		return nil, nil
 	}
 
 	if frame.hasSubtreeLifecycleEventFired(parsedOpts.WaitUntil) {
@@ -735,15 +735,15 @@ func (m *FrameManager) WaitForFrameNavigation(frame *Frame, opts goja.Value) api
 			return data.(LifecycleEvent) == parsedOpts.WaitUntil
 		}, parsedOpts.Timeout)
 		if err != nil {
-			k6ext.Panic(m.ctx, "waiting for frame navigation until %q: %v", parsedOpts.WaitUntil, err)
+			return nil, fmt.Errorf("waiting for frame navigation until %q: %w", parsedOpts.WaitUntil, err)
 		}
 	}
 
 	req := event.newDocument.request
 	req.responseMu.RLock()
 	defer req.responseMu.RUnlock()
 
-	return req.response
+	return req.response, nil
 }
 
 // ID returns the unique ID of a FrameManager value.

common/page.go

@@ -874,7 +874,7 @@ func (p *Page) WaitForLoadState(state string, opts goja.Value) {
 }
 
 // WaitForNavigation waits for the given navigation lifecycle event to happen.
-func (p *Page) WaitForNavigation(opts goja.Value) api.Response {
+func (p *Page) WaitForNavigation(opts goja.Value) *goja.Promise {
 	p.logger.Debugf("Page:WaitForNavigation", "sid:%v", p.sessionID())
 
 	return p.frameManager.MainFrame().WaitForNavigation(opts)

examples/fillform.js

@@ -15,12 +15,14 @@ export default function() {
     // Enter login credentials and login
     page.$('input[name="login"]').type('admin');
     page.$('input[name="password"]').type('123');
-    return page.$('input[type="submit"]').click();
+    // 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(() => {
-    // We expect the above form submission to trigger a navigation, so wait for it
-    // and the page to be loaded.
-    page.waitForNavigation();
-
     check(page, {
       'header': page.$('h2').textContent() == 'Welcome, admin!',
     });

examples/locator.js

@@ -29,25 +29,33 @@ 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();
-  console.log(currentBet.innerText());
-
-  // the heads locator clicks on the heads button by using the
-  // locator's selector.
-  heads.click();
-  page.waitForNavigation();
-  console.log(currentBet.innerText());
-
-  tails.click();
-  page.waitForNavigation();
-  console.log(currentBet.innerText());
-
-  page.close();
-  browser.close();
+  // 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());
+    // the heads locator clicks on the heads button
+    // by using the locator's selector.
+    return Promise.all([
+      page.waitForNavigation(),
+      heads.click(),
+    ]);
+  }).then(() => {
+    console.log(currentBet.innerText());
+    return Promise.all([
+      page.waitForNavigation(),
+      tails.click(),
+    ]);
+  }).finally(() => {
+    console.log(currentBet.innerText());
+    page.close();
+    browser.close();
+  })
 }

examples/locator_pom.js

@@ -22,13 +22,17 @@ export class Bet {
   }
 
   heads() {
-    this.headsButton.click();
-    this.page.waitForNavigation();
+    return Promise.all([
+      this.page.waitForNavigation(),
+      this.headsButton.click(),
+    ]);
   }
 
   tails() {
-    this.tailsButton.click();
-    this.page.waitForNavigation();
+    return Promise.all([
+      this.page.waitForNavigation(),
+      this.tailsButton.click(),
+    ]);
   }
 
   current() {
@@ -46,18 +50,18 @@ export default function () {
   const bet = new Bet(page);
   bet.goto();
 
-  bet.tails();
-  console.log("Current bet:", bet.current());
-
-  bet.heads();
-  console.log("Current bet:", bet.current());
-
-  bet.tails();
-  console.log("Current bet:", bet.current());
-
-  bet.heads();
-  console.log("Current bet:", bet.current());
-
-  page.close();
-  browser.close();
+  bet.tails().then(() => {
+    console.log("Current bet:", bet.current());
+    return bet.heads();
+  }).then(() => {
+    console.log("Current bet:", bet.current());
+    return bet.tails();
+  }).then(() => {
+    console.log("Current bet:", bet.current());
+    return bet.heads();
+  }).finally(() => {
+    console.log("Current bet:", bet.current());
+    page.close();
+    browser.close();
+  })
 }

k6ext/k6test/vu.go

@@ -30,6 +30,7 @@ func (v *VU) ToGojaValue(i interface{}) goja.Value { return v.Runtime().ToValue(
 
 // RunLoop is a convenience method for running fn in the event loop.
 func (v *VU) RunLoop(fn func() error) error {
+	v.Loop.WaitOnRegistered()
 	return v.Loop.Start(fn)
 }
 

k6ext/promise.go

@@ -37,18 +37,20 @@ func promise(ctx context.Context, fn PromisifiedFunc, d eventLoopDirective) *goj
 		cb                 = vu.RegisterCallback()
 		p, resolve, reject = vu.Runtime().NewPromise()
 	)
-	go cb(func() error {
+	go func() {
 		v, err := fn()
-		if err != nil {
-			reject(err)
-		} else {
-			resolve(v)
-		}
-		if d == continueEventLoop {
-			err = nil
-		}
-		return err
-	})
+		cb(func() error {
+			if err != nil {
+				reject(err)
+			} else {
+				resolve(v)
+			}
+			if d == continueEventLoop {
+				err = nil
+			}
+			return err
+		})
+	}()
 
 	return p
 }