Grafana Cloud Performance testing Get started Run your first browser tests

Run your first browser tests

With k6, you can run performance tests that target the browser to measure user experience and find issues that are difficult to catch at the protocol level. These tests leverage the k6 browser-testing APIs and allow you to interact with your sites and inspect their performance.

In this tutorial, you will learn how to create a browser script, run an example script, and explore the test results.

Requirements

• A Grafana Cloud instance with the Performance Testing app.

Create a browser test script

Before running your first browser test, you need to create your test script. The Script Editor provides a quick way to prototype tests directly from the app. It has a library of examples that you can leverage as a starting point or reference while developing your tests.

To create a new test, follow these steps:

• From your Grafana instance, go to the Performance Testing app.
• Select a project.
• Select Create New Test, and then select Start scripting.
• Click the Script examples dropdown, and pick the Browser testing example.

Now, you’ll be able to see a test in the editor similar to this one:

JavaScript

import { browser } from 'k6/experimental/browser';
import { check, sleep } from 'k6';

export const options = {
  scenarios: {
    ui: {
      executor: 'constant-vus',
              vus: 1,
              duration: "10s",
      options: {
        browser: {
          type: 'chromium',
        },
      },
    },
  },
  thresholds: {
    checks: ["rate==1.0"]
  }
}

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

  try {
    await page.goto('https://test.k6.io/my_messages.php');

    page.locator('input[name="login"]').type('admin');
    page.locator('input[name="password"]').type('123');

    const submitButton = page.locator('input[type="submit"]');

    await Promise.all([page.waitForNavigation(), submitButton.click()]);

    check(p, {
      'header': p => p.locator('h2').textContent() == 'Welcome, admin!',
    });
  } finally {
    page.close();
  }
  sleep(1);
}

The example script shows you how to do a few things:

• Imports the browser module.
• Sets up the required browser option in the scenarios configuration.
• Opens a new page by using the browser.newPage() method.
• Goes to a “test.k6.io” URL by using the page.goto() method.
• Uses the page.locator method to fill out and submit a form.
• Uses the check method to verify that the login was successful.

One VU executes the logic repeatedly with a one-second sleep between iterations. The test will finish after ten seconds have passed.

To run it, click on Create and Run.

If you prefer, you can also start the test from the CLI. Save the script to your machine, and then run it with k6 cloud script.js, or you can run it locally and stream the results to the Cloud with k6 run –out=cloud script.js. When using this execution mode, k6 will spin up a browser on your machine and only send the metrics to our database in the Cloud. For more information, refer to Run cloud tests from the CLI.

Explore results

The result analysis view will adapt to your browser test and render important information, like the 75th percentile of web vitals and how these behaved over time. If you want to dive deeper into all the browser-testing metrics your test generated, you can leverage Grafana Explore and Dashboards.

The data and visualizations are updated in real-time while the test runs.

Next steps

You now have your first browser test using the test.k6.io website as an example. You can now customize your test or create a new one to interact with your sites and start inspecting their performance. You can also run a load test targeting your APIs while validating how good the experience for end-users would be in-app, all in the same test.

To learn more about the browser testing APIs, refer to the k6 browser module.