The output generates metrics mentioned in the screenshot below:
I would like to know how would I figure out these metrics for each page. I couldn’t find the documentation that shows the output for multiple pages. What is the best way to run a frontend load test for multiple pages?
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):
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();
}
}
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:
And then view the values for a specific metric:
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.
@ankur I apologize that I didn’t make my question precise. The pages you mentioned are different. My case is multiple pages post login.
The documentation of xk6 browser mentions login page. My scenarios is I want to load test multiple pages after login is complete. If we consider simple steps where we open the login page and go to another page where there is a list of data. How would I know the browsers metrics shown together are for the login page and navigated list page?
By the way I use Datadog to send metrics and visualize them.
Hi @aakash.gupta,
It sounds like what you need is groups, as you want to be able to split the whole scenario into smaller steps:
NOTE: issue #721 and @k6:#2863 will first need to be resolved for you to be able to use groups like this with xk6-browser.
If you can share your test script then I might be able to help you a little more.
Cheers,
Ankur