Fix race condition in navigation (and lifecycle events)

[inancgumus]

TLDR: Skip the initial blank page navigation/lifecycle event if we want to navigate to a non-blank page so that we can wait for the navigation to complete. This way, we can receive custom metrics like Web Vitals. Custom metrics would be randomly skipped without this.

In order to make sure we receive custom metrics like Web Vitals, it is necessary to skip the initial blank page navigation event when navigating to a non-blank page. By doing this, we can wait for the navigation to complete fully. Without skipping this event, custom metrics could be randomly skipped.

Before this fix, this test's Web Vital metrics were flaky. Sometimes they show up, and sometimes, they don't.

import { browser } from 'k6/x/browser';

export const options = {
  scenarios: {
    ui: {
      executor: 'shared-iterations',
      vus: 1,
      iterations: 1,
      options: {
        browser: {
          type: 'chromium',
        },
      },
    },
  },
};

export default async function() {
  const page = browser.newPage();
  try {
    await page.goto('https://test.k6.io', { waitUntil: 'networkidle' });
    // the above was returning prematurely and caused page.close to be
    // called before the navigation finished.
  } finally {
    page.close();
  } 
}

I'll go ahead and explain the problem using the provided script.

The issue of inconsistency arose because we were removing the Web Vital bindings using page.Close before the navigation had finished. The navigation process was prematurely interrupted due to the initial blank page lifecycle events. As a result, we were not able to receive all the events from the Web Vitals library since we didn't wait for the navigation to complete.

This pull request resolves the problem of unreliable behavior in emitting Web Vitals (or other custom metrics). However, it doesn't address the issue of displaying all Web Vital reports. According to Google's Web Vital documentation, most metrics are meant to be reported only occasionally.

P.S.: I attempted to create a test for this behavior, but I was unable to replicate it. Please let me know if you have any ideas. The existing tests locally pass!

Tip: I noticed that reloading the page just before closing it leads to more emitted metrics. Another pull request could tackle this aspect. Update: See #949.

Updates: #914.

[ka3de]

LGTM.

[ankur22]

Thanks @inancgumus LGTM 👍