Unable to capture the multiple screenshots using xk6-browser

Grafana k6 k6-browser
1

I have the below login code. The code runs just fine but only one screen shot is getting captured inside the screenshots folder i.e 01_screenshot.png.
The other screen shot is not getting captured. Please help on the same.

import { chromium } from 'k6/x/browser';
import { sleep } from 'k6';
import { options, insights_login_url, userName, password } from "./common.js";
export {options};

export default function () {
  const browser = chromium.launch({
    headless: false,
    slowMo: '500ms',
  });
  const context = browser.newContext();
  const page = context.newPage();

  // 01. Go to the login page
  page.goto(login_url, { waitUntil: 'networkidle' });
  page.waitForSelector('div[class="acc-h-subtitle"]');
  page.screenshot({ path: 'screenshots/01_screenshot.png' });
  sleep(Math.random() * 4);

  // 02. Enter user name and password
  page.$('input[id="username"]').type(userName);
  page.$('input[id="password"]').type(password);
  page.$('span[class="btn__text"]').click();

  // Wait for next page to load
  page.waitForLoadState('networkidle');
 
  page.waitForSelector('input[class="search"]');
  page.screenshot({ path: 'screenshots/02_screenshot.png' });
  sleep(Math.random() * 4); 

  page.close();
  browser.close();
}
3

Hi @vishvambruth.javagal,

Thanks for reaching out, and thanks for sending us the test script too!

Could you clarify a few things:

  1. Which version of xk6-browser you’re using.
  2. The log output of your test run from the terminal.
  3. The OS version you are running.

I’ve tried a similar script (below) against test.k6.io with the latest release (v0.5.0) and I get two screenshots. The only reason I failed to get the second screenshot was due to an error in the script itself.

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

export default function () {
  const browser = chromium.launch({
    headless: false,
    slowMo: '500ms',
  });
  const context = browser.newContext();
  const page = context.newPage();

  page.goto('https://test.k6.io/my_messages.php', { waitUntil: 'networkidle' })
  
  page.screenshot({ path: 'screenshots/01_screenshot.png' });
  sleep(Math.random() * 4);

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

  Promise.all([
    page.waitForNavigation(),
    page.locator('input[type="submit"]').click(),
  ]).then(() => {
    page.screenshot({ path: 'screenshots/02_screenshot.png' });
    sleep(Math.random() * 4);
  }).finally(() => {
    page.close();
    browser.close();
  });
}

Let me know if that helps or not.

Cheers,
Ankur

4

Hi @ankur, Thanks for the reply. I ran your script and it worked fine. But my below script is getting the same error now both the screen shots are not getting captured. Any wrong with my code?

Below are the details you have asked for:

  1. version of xk6-browser I’m using
PS C:\K6\xk6-browser> .\xk6-browser version
k6 v0.40.0 ((devel), go1.19.2, windows/amd64)
  1. The OS version I’m running.
    Windows 10
import { chromium } from 'k6/x/browser';
import { sleep } from 'k6';
import { options, openidconnect_url, userName, password } from "./common.js";
export {options};

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

  // 01. Go to the openidconnect landing page
  page.goto(app_url, { waitUntil: 'networkidle' });
  page.waitForSelector('button[class="configuration"]');
  page.screenshot({ path: 'screenshots/01_screenshot.png' });
  sleep(Math.random() * 4);
  
  // 02. Click on 'CONFIGURATION'
  page.locator('button[class="configuration"]').click();
  page.screenshot({ path: 'screenshots/02_screenshot.png' });
  sleep(Math.random() * 4);

  page.close();
  browser.close();
}
5

Hi @vishvambruth.javagal,

I believe you need to handle the pop up window asking you to accept the cookie preferences before you can proceed to the configuration step.

If that doesn’t help, let us know. Please also attach the result from your command prompt window so that we can analyse the error message.

Cheers,
Ankur

6

Hi @ankur,

I have written the below script. This is capturing all the screenshots but its not typing value to Discovery Document URL text field. Please can you take a look.

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

export default function () {
  const browser = chromium.launch({
    headless: true,
    slowMo: '1s',
  });
  const context = browser.newContext();
  const page = context.newPage();

  // 01. Go to the openidconnect landing page and click on CONFIGURATION
  page.goto('https://openidconnect.net/', { waitUntil: 'networkidle' }).then(() => {    
    page.screenshot({ path: 'screenshots/01_screenshot.png' });
    page.waitForSelector('button[class="playground-header-config btn btn-link"]');        
    return page.click('button[class="playground-header-config btn btn-link"]');
  }).then(() => {    
    page.screenshot({ path: 'screenshots/02_screenshot.png' });   
    page.waitForSelector("select[name='server']"); 
    return page.selectOption("select[name='server']", "custom");
  }).then(() => {    
    page.screenshot({ path: 'screenshots/03_screenshot.png' });
    page.waitForSelector("input[placeholder='https://my-oidc.com/.well-known/openid-configuration']");     
    return page.click("input[placeholder='https://my-oidc.com/.well-known/openid-configuration']");   
  }).then(() => {   
    page.screenshot({ path: 'screenshots/04_screenshot.png' }); 
    page.type("input[placeholder='https://my-oidc.com/.well-known/openid-configuration']", 'https://my-oidc.com/.well-known/openid-configuration');
    page.screenshot({ path: 'screenshots/05_screenshot.png' });
  }).finally(() => {
    page.close();
    browser.close();
  });
}
7

Hi @vishvambruth.javagal,

This question seems to be unrelated to the original issue of being able to capture multiple screenshots. Has the screenshot issue now been resolved on your side?

Cheers,
Ankur

8

Yes capturing multiple screenshot is working good now.

10

can anyone help me understand the purpose of taking screenshots in a performance test?

11

Hi @aakash.gupta,

Some reasons you might want to take screenshots are when running tests in a CI pipeline and:

  1. the test fails. At the point of the test failing it might help to see what the page was rendering which could help you debug the issue;
  2. you want to capture and compare the UI changes visually. E.g. we could take screenshots of the page, upload those screenshots as artefacts, which would then allow us to compare the new UI changes against the older UI changes;
  3. you want to visually inspect what your website is rendering when the backend is under load when running hybrid performance tests.

Hope that helps,
Ankur