How to read output of xk6-browser

Grafana k6 k6-browser
2

Hi @aakash.gupta,

Thanks for this question. While investigating this I ran into an issue with groups in xk6-browser, which I’ve documented in issue #721, which should actually be fixed with issue @k6:#2863. I’ll still document how you can split metrics based on pages for posterity so that you can refer back to them once the issues are resolved.

There are two methods of splitting metrics per page (also documented in another thread):

  1. For small/simple/POC/experimental scripts you can use thresholds on groups to surface the metrics per page e.g.:

    import { chromium } from 'k6/x/browser';
import { group } from "k6";

export const options = {
  thresholds: {
    'browser_dom_content_loaded{group:::home}': ['p(95)<500'],
    'browser_dom_content_loaded{group:::coinFlip}': ['p(95)<500'],
  },
};

export default async function () {
  const browser = chromium.launch({headless: false});
  const context = browser.newContext();
  const page = context.newPage();
  const page2 = context.newPage();

  try {
    await group('home', async function () {
      await page.goto('https://test.k6.io/')
    })

    await group('coinFlip', async function () {
      await page2.goto('https://test.k6.io/flip_coin.php')
    })
  } finally {
    page.close();
    page2.close();
    browser.close();
  }
}

  2. A more involved approach (although in the long term a more maintainable approach) is to output the results in a database and then visualise them with Grafana.

    After running the above example and outputting the results to an influxdb instance, I was able to retrieve all the browser metrics:

    Screenshot 2023-01-19 at 14.39.32
    Screenshot 2023-01-19 at 14.39.321564×306 42.9 KB

    And then view the values for a specific metric:

    Screenshot 2023-01-19 at 14.41.18
    Screenshot 2023-01-19 at 14.41.181694×614 89.8 KB

    Now you can visualise this data in grafana based on the URL, or a scenario.

Let me know if that helps or not.

Cheers,
Ankur

EDIT: Here’s a simple scenario script:

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

export const options = {
  scenarios: {
    home: {
      executor: 'shared-iterations',
      vus: 1,
      iterations: 1,
      exec: "home",
    },
    flipCoin: {
      executor: 'shared-iterations',
      vus: 1,
      iterations: 1,
      exec: "flipCoinExec",
    },
  },
};

export async function home() {
  const browser = chromium.launch({headless: false});
  const context = browser.newContext();
  const page = context.newPage();

  try {
    await page.goto('https://test.k6.io')
  } finally {
    page.close();
    browser.close();
  }
}

export async function flipCoinExec() {
  const browser = chromium.launch({headless: false});
  const context = browser.newContext();
  const page = context.newPage();

  try {
    await page.goto('https://test.k6.io/flip_coin.php')
  } finally {
    page.close();
    browser.close();
  }
}

After running this with the output to influxdb, you should be able to select metrics on scenario.

2 Likes