Unable to capture the multiple screenshots using xk6-browser

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();
}

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

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();
}

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

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();
  });
}

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

Yes capturing multiple screenshot is working good now.