Xk6--browser - How to get metrics for different page

[vish_s02]

Hi Team,

I am using xk6-browser to automate a workflow which involve-

• Opening Home Page (Page 1)

• Enter username , password, click submit button

• on clicking submit, it redirects to another page (Page 2)

• Perform some action on Page 2 which opens Page 3

My Test Looks like -

export function webtest() {
  const browser = chromium.launch({
    args: [],                   // Extra commandline arguments to include when launching browser process
    debug: true,                // Log all CDP messages to k6 logging subsystem
    devtools: true,             // Open up developer tools in the browser by default
    env: {},                    // Environment variables to set before launching browser process
    executablePath: null,       // Override search for browser executable in favor of specified absolute path
    headless: false,            // Show browser UI or not
    ignoreDefaultArgs: [],      // Ignore any of the default arguments included when launching browser process
    proxy: {},                  // Specify to set browser's proxy config
    slowMo: '1000ms',            // Slow down input actions and navigations by specified time
    timeout: '60s',             // Default timeout to use for various actions and navigations
  });
  const page = browser.newPage();
  page.goto(Utils.getBaseUrl()', { waitUntil: 'load' }).
    then(() => {
      page.$(selectors.username).type('xyz')
      page.$(selectors.password).type('abc')
      return Promise.all([
        page.waitForNavigation(),
        page.$(selectors.loginBtn).click()
      ]).then(() => {
        page.screenshot({ path: 'screenshots/01_login.png' }),
          page.waitForSelector(selectors.Input),
          page.$(selectors.Input).type('xyz')
        page.waitForSelector('//div[contains(text(),"xyz")]')
        return Promise.all([
          page.waitForNavigation(),
          page.$("").click()
        ])
      }).then(() => {
        page.waitForSelector(selectors.FullName),
          check(page, {
            'Patient Page': page.locator(selectors.FullName).textContent() == '',
          });
        page.screenshot({ path: 'screenshots/02_Page.png' })
      }).finally(() => {
        page.close();
        browser.close();
      })
    })

How I can measure metrics for different pages e.g. Loading of home page, then after login loading of page2, then page3

I am also have the api test in same class, i.e. I am running performance test in hybrid mode (both api and ui), is it possible to get iteration duration for both test api and ui test separately.

[eyeveebee]

Hi @vish_s02

Does this thread How to read output of xk6-browser - #2 by ankur help?

Cheers!

[vish_s02]

Actually that does not help, it seems async await not supported

getting below error-

Could not initialize ‘sample2.test.js’: could not load JS test

[ankur]

Hi @vish_s02,

The latest (unreleased) version of xk6-browser now supports await and async keywords If you’re comfortable with building from source then you can follow the guide here – NOTE: Instead of running go install go.k6.io/xk6/cmd/xk6@latest you will need to use go install go.k6.io/xk6/cmd/xk6@main to build from the main branch. We hope to release the latest version of xk6-browser in 1 or 2 weeks, so you can wait for that.

In the meantime, while waiting for the latest release, you can still use the second approach that is outlined in How to read output of xk6-browser - #2 by ankur, which uses influxdb and grafana. This will allow you to select and group metrics based on the URL.

Let us know if that does or doesn’t help,

Cheers,
Ankur

[vish_s02]

Thanks @ankur for reply.

I see the second approach and I think we can achieve something like below with addition of async await

[vish_s02]

@ankur

go.k6.io/xk6/cmd/xk6

Hi @ankur - I am getting build from main but getting error as-

go: go.k6.io/xk6/cmd/xk6@main: unrecognized import path “go.k6.io/xk6/cmd/xk6”: parse https://go.k6.io/xk6/cmd/xk6?go-get=1: no go-import meta tags ()

Command - go install go.k6.io/xk6/cmd/xk6@main

[ankur]

Hi @vish_s02,

Sorry, i gave you the wrong instructions. For Unix based systems try this:

go install go.k6.io/xk6/cmd/xk6@latest
xk6 build --output xk6-browser --with github.com/grafana/xk6-browser@main

For Windows, try this:

go install go.k6.io/xk6/cmd/xk6@latest
xk6 build --output xk6-browser.exe --with github.com/grafana/xk6-browser@main

Let me know if that does or doesn’t help you.

Cheers,
Ankur

[vish_s02]

Hi @ankur

Setup is working fine and able to use async await and groups.

But another issue - Not returning value for metrics e.g.

I ran below script

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

export const options = {
  thresholds: {
    'browser_dom_content_loaded{group:::home}': ['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/')
    })

   
  } finally {
    page.close();
    browser.close();
  }
}

and I found below logs in console -

here browser_dom_content_loaded for group home is showing as 0s for all max, min etc

[ankur]

Hi @vish_s02,

Yes, that’s a known issue (issue #721 and @k6:#2863). We’re hoping this will be resolved within the next week or two.

Until then you might want to explore the other option using influxdb.

Cheers,
Ankur

[vish_s02]

@ankur you means its not showing here but will show in influx and if we integrate with Grafana there we would be able to see?

[ankur]

Hi @vish_s02,

Yes, for now you should be able to work with the URLs of pages that were navigated to by your test, and they will be populated in influxdb. Unfortunately the group names aren’t being populated in influxdb yet, which we believe is due to the same issue i referenced in my previous post.

Cheers,
Ankur

[vish_s02]

Thanks @ankur its working fine and able to track the urls in influx db and grafana.