Unable to click on the CONFIGURATION link

Hi Team,
I’m trying to navigate to below URL and click on CONFIGURATION. I tried the below script and its not working. Please help on the same.

https://openidconnect.net/

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

let step = 1;
function log(message) {
  console.log(
      "\n\n\n"    
    + "LOG: "+ step +"\n"
    + "-----------------------------\n"
    + message +"\n"
    + "-----------------------------\n"
    + "\n\n\n"    
  );
  step++;
}

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

  // 01. Go to the openidconnect landing page
  log("Navigate to openidconnect landing page.");
  {
    page.goto(openidconnect_url, { waitUntil: 'networkidle' });
    sleep(Math.random() * 4);
    page.screenshot({ path: 'screenshots/01_screenshot.png' });
  }

  // Click on CONFIGURATION
  log("Click on CONFIGURATION.");
  {
    page.waitForSelector('button[class="playground-header-config btn btn-link"]');
    // hack: scroll the element into view
    page.evaluate(() => {
      const el = document.querySelector(".playground-header-config.btn.btn-link")
      el.scrollIntoView();
    });    
    page.click('button[class="playground-header-config btn btn-link"]');
    page.screenshot({ path: 'screenshots/02_screenshot.png' });
    sleep(Math.random() * 4);
  }

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

Hi,

We’ve changed the xk6-browser API in the latest releases. So your script won’t work with the new API (xk6-browser version).

I’ve tried your script using the nightly xk6-browser, which took two screenshots.

The nightly xk6-browser (the one on the main development branch of our Github, here) has many fixes and runs more stable than the recently released version. You can install the nightly version as follows:

$ go install go.k6.io/xk6/cmd/xk6@latest
$ xk6 build --output xk6-browser --with github.com/grafana/xk6-browser@main

Note: Make sure you install Go, Go toolchain, and Git.

Here’s the working script that uses promises:

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

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

  // 01. Go to the openidconnect landing page
  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' });
  }).finally(() => {
    page.close();
    browser.close();
  });
}

If installing Go, its toolchain, and Git are not possible; you may prefer to wait for our next release (which will be added to this web page in a week or so). Or, if waiting for the next release is not an option for you, you can tell us about the xk6-browser version you are using and the error you are getting. So we can better help you.

PS: We discourage using sleep in scripts as it may interfere with our internal mechanisms.

Thanks.

Hi @inanc,

I used the code you have given but this works in headless mode but when I run the script in headful mode I’m facing issue. I have installed the latest xk6-browser using the below commands. Please find the details you have asked below.

Note: As my screen resolution is small the CONFIGURATION is not appearing when we visit the url I believe I need to scroll to the CONFIGURATION element and then click on it.

Please find the k6-browser version I’m using below:

PS C:\K6\xk6-browser> ./xk6-browser version
k6 v0.40.0 ((devel), go1.19.2, windows/amd64)
PS C:\K6\xk6-browser> go install go.k6.io/xk6/cmd/xk6@latest
PS C:\K6\xk6-browser> xk6 build --output xk6-browser.exe --with github.com/grafana/xk6-browser@main
2022/10/25 10:01:08 [INFO] Temporary folder: C:\Users\******\AppData\Local\Temp\buildenv_2022-10-25-1001.3353979450
2022/10/25 10:01:08 [INFO] exec (timeout=10s): C:\Program Files\Go\bin\go.exe mod init k6
go: creating new go.mod: module k6
2022/10/25 10:01:08 [INFO] Pinning versions
2022/10/25 10:01:08 [INFO] exec (timeout=0s): C:\Program Files\Go\bin\go.exe mod edit -require github.com/grafana/xk6-browser@main
2022/10/25 10:01:08 [INFO] exec (timeout=0s): C:\Program Files\Go\bin\go.exe mod tidy -compat=1.17
go: finding module for package github.com/nxadm/tail
go: found github.com/nxadm/tail in github.com/nxadm/tail v1.4.8
2022/10/25 10:01:10 [INFO] exec (timeout=0s): C:\Program Files\Go\bin\go.exe mod tidy -compat=1.17
2022/10/25 10:01:12 [INFO] Writing main module: C:\Users\******\AppData\Local\Temp\buildenv_2022-10-25-1001.3353979450\main.go 
2022/10/25 10:01:12 [INFO] exec (timeout=0s): C:\Program Files\Go\bin\go.exe mod tidy -compat=1.17
2022/10/25 10:01:13 [INFO] Build environment ready
2022/10/25 10:01:13 [INFO] Building k6
2022/10/25 10:01:13 [INFO] exec (timeout=0s): C:\Program Files\Go\bin\go.exe mod tidy -compat=1.17
2022/10/25 10:01:15 [INFO] exec (timeout=0s): C:\Program Files\Go\bin\go.exe build -o C:\K6\xk6-browser\xk6-browser.exe -ldflags -w -s -trimpath
2022/10/25 10:01:20 [INFO] Build complete: xk6-browser.exe
2022/10/25 10:01:20 [INFO] Cleaning up temporary folder: C:\Users\******\AppData\Local\Temp\buildenv_2022-10-25-1001.3353979450
PS C:\K6\xk6-browser> ./xk6-browser run openid_test.js

          /\      |‾‾| /‾‾/   /‾‾/
     /\  /  \     |  |/  /   /  /
    /  \/    \    |     (   /   ‾‾\
   /          \   |  |\  \ |  (‾)  |
  / __________ \  |__| \__\ \_____/ .io

  execution: local
     script: openid_test.js
     output: -

  scenarios: (100.00%) 1 scenario, 1 max VUs, 10m30s max duration (incl. graceful stop):
           * default: 1 iterations for each of 1 VUs (maxDuration: 10m0s, gracefulStop: 30s)

WARN[0005] url:https://10910059.fls.doubleclick.net/activityi;dc_pre=CIrn4JLG-voCFR_KcwEdTwQEjg;src=10910059;type=cm_auth0;cat=cm_au0;ord=1;num=8356003342339;gtm=2wgaj0;auiddc=1377630950.1666672299;~oref=https%3A%2F%2Fopenidconnect.net%2F? method:GET err:fetching response body: No resource with given identifier found (-32000)  category="Response:bodySize:fetchBody" elapsed="0 ms" goroutine=398
WARN[0005] url:https://10910059.fls.doubleclick.net/activityi;dc_pre=CIDr4pLG-voCFUFAfAod_Y0CzQ;src=10910059;type=cm_auth0;cat=cm_au00;ord=7346448029066;gtm=2wgaj0;auiddc=1377630950.1666672299;~oref=https%3A%2F%2Fopenidconnect.net%2F? method:GET err:fetching response body: No resource with given identifier found (-32000)  category="Response:bodySize:fetchBody" elapsed="0 ms" goroutine=573
WARN[0010] url:https://match.adsrvr.org/track/upb/?adv=cmh41ts&ref=https%3A%2F%2Fopenidconnect.net%2F&upid=8m08eu8&upv=1.1.0 method:GET err:fetching response body: No resource with given identifier found (-32000)  category="Response:bodySize:fetchBody" elapsed="0 ms" goroutine=1131
WARN[0010] url:https://js.adsrvr.org/universal_pixel.1.1.0.js method:GET err:fetching response body: No resource with given identifier found (-32000)  category="Response:bodySize:fetchBody" elapsed="0 ms" goroutine=1131
panic: GoError: handling frameNavigated event to "https://match.adsrvr.org/track/cmf/google?g_uuid=&gdpr=0&gdpr_consent=&ttd_tdid=2ce8cfd3-9f92-4ce6-a89f-3d3bdb79b8ab&google_gid=CAESEI1VvasiJiIesNEitgJUAAQ&google_cver=1": we either navigate top level or 
have old version of the navigated frame----------] 1 VUs  00m08.9s/10m0s  0/1 iters, 1 per VU

goroutine 1154 [running]:
go.k6.io/k6/js/common.Throw(0x1969940?, {0x195ffc0?, 0xc001318520?})
        go.k6.io/k6@v0.40.1-0.20221019120653-b60fe887f035/js/common/util.go:20 +0x4d
github.com/grafana/xk6-browser/k6ext.Panic({0x196ef68, 0xc0005ae1b0}, {0x169e3b7, 0x27}, {0xc000807df8?, 0x2, 0x2})
        github.com/grafana/xk6-browser@v0.5.1-0.20221024150243-765bcc4522a4/k6ext/panic.go:51 +0x2b1
github.com/grafana/xk6-browser/common.(*FrameSession).onFrameNavigated(0xc0005d0420, 0xc001d427e0, 0x20?)
        github.com/grafana/xk6-browser@v0.5.1-0.20221024150243-765bcc4522a4/common/frame_session.go:632 +0x2e9
github.com/grafana/xk6-browser/common.(*FrameSession).initEvents.func1()
        github.com/grafana/xk6-browser@v0.5.1-0.20221024150243-765bcc4522a4/common/frame_session.go:237 +0x694
created by github.com/grafana/xk6-browser/common.(*FrameSession).initEvents
        github.com/grafana/xk6-browser@v0.5.1-0.20221024150243-765bcc4522a4/common/frame_session.go:208 +0x1ab

Hi @vishvambruth.javagal,

I tried the script in headless mode, and it worked without issue. Could you give us more details about your environment: The operating system and its version and the Chrome browser version?

Does this error constantly happen on your machine? Have you tried running the test script multiple times? Did you get an error each time?

Thanks

Yes the script works fine in headless. But when I run in headful mode the issue occurs.

Could you please check why we get issues when we run in headful mode.

My windows version: windows 10
Chrome browser version: Version 106.0.5249.119 (Official Build) (64-bit)

I see. I’ve tried it again with the headful mode on, but the issue didn’t occur on my machine (105.0.5195.125 (Official Build) (arm64)). I’ll try updating Chrome and try again.

Hi @vishvambruth.javagal,

We also have validated the issue on a Windows 11 machine. Could you create an issue on our Github by clicking on the link here?

Thanks!

Raised the below bug.

1 Like

Great, thank you! We will plan for this hopefully soon.

@inanc You have any update on this issue.

Hi @vishvambruth.javagal,

We will plan for this tomorrow, but it can take a long time before we find a solution.

Thanks for your understanding.