View Browser Timeline and Browser Screenshots

In addition to running API performance tests, you can also run browser tests in Grafana Cloud k6. Browser tests allow you to navigate through web pages and measure user experience metrics, helping you find issues that are hard to catch at the protocol level.

When running a browser test, the test run page has two additional sections that can provide more details about your test results: Browser Timeline and Browser Screenshots.

Inspect Browser Timeline

When viewing a test run result, the Performance overview section shows you an aggregate of Web Vital metrics, such as Largest Contentful Paint (LCP), or First Input Delay (FID). These scores represent the 75th percentile values for the test run, which can include multiple pages.

The Browser timeline section shows a separate view, where you can inspect the individual Web Vital metrics for each page in your test run and each method that was invoked for each page.

Each span in the timeline view represents a page, and a new span is created based on your test run script, when a navigation method is called, such as page.goto, or locator.click.

For each span, you can:

Hover over the timeline bar to view when each method was invoked during the test run
View the page load time, URL, Web Vital metrics, and list of invoked methods
View screenshots that were taken using the page.screenshot method. You can click on each screenshot to open a dialog box window where you can download the image.

You can also use the Trace picker to select between different iterations of the test run and the Compact mode toggle to view only the timeline bar for each span.

Inspect Browser Screenshots

The Browser Screenshots section contains a list of all the screenshots that were taken during the test run with the page.screenshot method.

You can click on each screenshot thumbnail to open a dialog box window that shows the expanded image, and click the Download button to download the image file.

Refer to page.screenshot for more details on how to use the method.

Save screenshots for each iteration

When using the page.screenshot method, you have to pass a path parameter that includes the path and name of the file. If your test script includes multiple iterations, and the path value in your test script is static, Grafana Cloud k6 overwrites the screenshots during each iteration, and only saves the ones from the last iteration.

To save a screenshot for each iteration of your test, you can add a variable that changes for each iteration of your test run, such as an execution context variable:

import { browser } from 'k6/browser';
import exec from 'k6/execution';

// ...

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

  try {
    await page.goto('https://test.k6.io/');
    const path = `browser_${exec.vu.idInTest}-${exec.vu.iterationInScenario}.png`;
    await page.screenshot({ path: path });
  } finally {
    await page.close();
  }
}