xK6 browser , Custom Trend Not working . Perormance metrics

Grafana k6 k6-browser
1

hello, I wanted to calculate timing between a user clicks on a button and loading completes. I am using trends for that , but I am not getting any output of time.

import { browser } from 'k6/experimental/browser';
import { sleep } from 'k6';
import { Trend } from 'k6/metrics';

export const options = {
  insecureSkipTLSVerify: true,
  scenarios: {
    ui: {
      executor: 'shared-iterations',
      options: {
        browser: {
          type: 'chromium',
        },
      },
    },
  },
}
const myTrend = new Trend('total_action_time', true);

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

  try {
    await page.goto('https://trnsmn-utapte-nwalobxw-ing-ea1fc766ac8e24f1.elb.us-east-1.amazonaws.com/uta');
     
    await page.type('#username', 'superman');
    await page.locator('#mat-select-value-1').click();
    await page.click('#mat-option-1');

    await page.locator("button[type='submit']").click();
    await page.type('#credentials','meow1')
     
     await page.click('#loginButton')
     sleep(20)
     await page.locator('body > app-root > div > uta-app-type > div > div.body.w-100pc.h-auto.flex-c.align-items-fs > div > gx-card:nth-child(1) > div > div.card-body > div.w-100pc.flex-c.align-items-fe.justify-content-fe.pt-100 > gx-button > button').click();
     sleep(20)
     
     await page.uncheck('#mat-mdc-checkbox-2-input')
    
     let foundButton = await page.locator('body > app-root > div > uta-app-worksheet > div > uta-worksheet-wrapper > gx-worksheet > gx-worksheet-element > div > div > gx-tab-container > div > div.tab-content > gx-worksheet-element > div > div > gx-stack-layout-container > div > div:nth-child(1) > gx-worksheet-element > div > div > uta-items-layout > div > div > uta-items-layout-component > div > div > div.appStatusBlock.w-100pc.h-100pc.items-layout-row.ng-star-inserted > div > div.il-container.justify-content-fs.appStatusItems.w-100pc.align-items-fs.items-layout-column.ng-star-inserted > div.groupedFieldsConfig-column.flex-r.align-items-c.justify-content-fs.appStatusAction.gap-150.h-300.ng-star-inserted > div:nth-child(3) > gx-button > button')
     page.evaluate(() => window.performance.mark('page-visit'));
     const startTime = new Date().getTime();
     await foundButton.click()// button clicked 
     await page.waitForNavigation();//waiting for page to reload
     const endTime = new Date().getTime();
     page.evaluate(() => window.performance.mark('action-completed'));
     page.evaluate(() =>
      window.performance.measure('total-action-time', 'page-visit', 'action-completed')
    );
    const responseTime = endTime - startTime;

// Output the response time
console.log('Response time:', responseTime, 'milliseconds');

    const totalActionTime = page.evaluate(
      () =>
        JSON.parse(JSON.stringify(window.performance.getEntriesByName('total-action-time')))[0]
          .duration
    );

    myTrend.add(totalActionTime);
    sleep(4)
     
    
  } finally {
    page.close();
  }
}

image
image1042×389 12.9 KB

My output.

I copied the custom metric from here : Browser metrics | Grafana k6 documentation

The user clicks on this run button :

image
image1123×74 7.85 KB

Loading happens :
image

Run gets completed
image

I need the time between run and run gets completed. Where am I going wrong

3

Did you ever have any luck figuring this one out?

4

Hi @eb2020ugee082,

I’ve tried the following and it works (with k6 v0.54.0):

    await page.evaluate(() => window.performance.mark('page-visit'));
    await page.evaluate(() => window.performance.mark('action-completed'));

    await page.evaluate(() => {
        window.performance.measure('total-action-time', 'page-visit', 'action-completed')
      }
    );

    const totalActionTime = await page.evaluate(() => {
        const p = window.performance.getEntriesByName('total-action-time');
        return p[0].duration;
      }
    );

    myTrend.add(totalActionTime);

In the output summary i see:

total_action_time...........: avg=51.8ms   min=51.8ms   med=51.8ms   max=51.8ms   p(90)=51.8ms   p(95)=51.8ms

Do you see any logs that might explain why it’s not working for you?

Best,
Ankur