page.goto is partially associated to the wrong navigation span

[ankur22]

Brief summary

When performing a page.goto the span for this API call is longer than the parent span that it is contained within it. In the screenshot the red square is highlighting the navigation and goto spans that are under scrutiny. The orange box within it at the end highlights that the goto span is spilling over the navigation span. This is incorrect behaviour which is causing other issues.

Due to the above issue, we're seeing odd results in the timeline. In the screenshot below, the red highlighted page span shows the key results of navigating and interacting with the page on https://test.k6.io/my_messages.php. The web vital measurement (in orange) is longer than the duration (in yellow). This is occurring because the web vital measurements start during the previous navigation (in blue) on about:blank during the page.goto call.

The resolution is to find a better place in the browser code to stop and start the navigation span when using page.goto.

xk6-browser version

v0.53

OS

NA

Chrome version

NA

Docker version and image (if applicable)

No response

Steps to reproduce the problem

Run the following script with tracing enabled to see similar tracing results as shown in the description:

import { browser } from 'k6/browser';

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

export default async function () {
  const page = await browser.newPage();

  await page.goto("http://localhost:81/sleep?t=2");

  await page.screenshot({ path: 'screenshot.png' });

  await page.close();
}

Expected behaviour

1. The page.goto span doesn't spill over out of the parent navigation span.
2. The web vital is smaller than the page span it is associated with.

Actual behaviour

See description for full details.

### Tasks
- [ ] https://github.com/grafana/xk6-browser/pull/1414
- [ ] https://github.com/grafana/xk6-browser/pull/1421
- [x] Release notes: https://github.com/grafana/k6/pull/3949/commits/a52892eef86775ef55cd506e7f6c9f61618d20bf

[ankur22]

There is in fact two different things going on:

1. The page span duration is not started when the new page starts to load.
2. Splitting the navigation portion of the API call (e.g. page.goto) into two parts:
   1. the start of the API call;
   2. the actual navigation and end of the API call are placed in the next parent.

In a POC I've been able to solve both these issues. However, the issue that needs to be solved is 1.

[ankur22]

Although we haven't solved the issue of "the span for this API call is longer than the parent span", we have solved a more serious issue which is affecting the results which is to start the navigation span earlier so that the other measurements are correctly correlate-able. Closing this issue, but we should reopen and open a new one if the spilling over span is affecting results.