Headless: true give error at click

[ampractise]

import * as config from '../config.js';
import { Helper } from '../Helper.js';
import * as Locator from '../pages/locators.js';
import launcher from 'k6/x/browser';
import { sleep } from 'k6';

let browser;
let context;
let page;

export const options = {
  discardResponseBodies: true,
  scenarios: {
    contacts: {
      executor: 'per-vu-iterations',
      vus: 1,
      iterations: 1,
      maxDuration: '2m',
    },
  },
};
let env = __ENV.env;
export default function () {
  let url;
  if (env == 'prod') {
    url = 'https://www.saucedemo.com/';
  }
  else if (env == 'perf') {
    url = 'https://www.saucedemo.com/';
  }

  browser = launcher.launch('chromium', {
    headless: false,
    timeout: '2m',
    debug: false,
    //slowMo: '500ms',
  });

  context = browser.newContext();
  context.setDefaultNavigationTimeout(480000);
  page = context.newPage();
  page.setDefaultNavigationTimeout(480000);

  // open the cogs page
  let helper = new Helper(page);

    page.goto(url, { waitUntil: 'load' });
    page.$("input[id='user-name']").type("standard_user");
    page.$("input[id='password']").type("secret_sauce");
    page.$("input[id='login-button']").click();
    sleep(10);
    page.waitForSelector("a[class='shopping_cart_link']");
    page.close();
    browser.close();
}

When Headless is true

When headless is false

[inancgumus]

Hi @ampractise, I tried to run your script (both headful and headless), and it worked fine. Which xk6-browser version are you using? By the way, we don't recommend using sleep in a script. I used page.waitForNavigation(); instead of sleep and waitForSelector, it also worked fine.

[ampractise]

I am using xk6-browser-v0.3.0-windows-amd64.zip, and when I add page.waitForNavigation(), I got below error,

[inancgumus]

I've tried this again on OSX (xk6-browser v0.3.0) with the following change, and it worked both ways (headful and headless). Can you try it with the following change as well? It may be an issue on Windows. Thanks.

...
  page.goto("https://www.saucedemo.com/", { waitUntil: 'load' });
  page.$("input[id='user-name']").type("standard_user");
  page.$("input[id='password']").type("secret_sauce");

  // Notice these lines. 
  page.waitForSelector('input#login-button').click()
  page.waitForSelector("a[class='shopping_cart_link']");

  page.close();
  browser.close();
...

In this change, you wait until the login button appears, and then you click on it.

[ampractise]

Getting same outcome for your suggested code, also tried on different windows machine,

[inancgumus]

Can I learn about the Windows and Chrome version you're using?

[ampractise]