Issues running in headless:false mode ERRO[0058] Uncaught (in promise) waiting for navigation: timed out after 30s

icedlatte · February 10, 2023, 4:34am

Hello! Im new here.

I’ve recently just started using xk6-browser but I’ve been using Playwright for UI test automation so I’m somehow familiar with the locator APIs.

I have a simple log in form, (unfortunately this is an internal URL that I cant share publicly).
What it does is input credentials, submit, wait for page to load then do something else. However, Im already seeing errors right after submitting the credentials.

I have the following issues:

I need to set sleep() after click, otherwise, Id get an execution context changed; most likely because of a navigation error
I need to use headless: true to make this work. headless: false would get me ERRO[0055] Uncaught (in promise) waiting for navigation: timed out after 30s

This is what I got working, but then again only in headless mode.

export default async function () {
  const browser = chromium.launch({
    headless: true, // need to be headless, otherwise the browser never stops loading
    timeout: '2m', // seems required, otherwise Chromium would timeout?
    slowMo: '100ms'
  });
  const context = browser.newContext({
    userAgent: 'k6/custom-userAgent', // internal for us due to security policies
    ignoreHTTPSErrors: true
  });

  const page = context.newPage();

  try {
    await page.goto(URLS.BASEURL, { waitUntil: 'networkidle' });
    // Enter login credentials and login
    page.locator('input#logonAccount').type(WEBLOGIN.USERNAME);
    page.locator('input#logonPassword').type(WEBLOGIN.PASSWORD);
    await Promise.all([
      page.waitForNavigation(),
      page.locator('button#loginButton').click()
    ]);

    sleep(2); //seems required, otherwise I get execution context changed; most likely because of a navigation
    const header = page.locator('.body-container #page-header h2');
    const headerText = header.textContent();

    expect(headerText).to.equal('Market Summary');
    page.screenshot({ path: 'foo.png' });
  } finally {
    page.close();
    browser.close();
  }
}

I’ve followed the Build from Source instruction here - https://k6.io/docs/javascript-api/xk6-browser/get-started/installation/

I’m on MacOS Monterey.

My framework is also in Typescript, and I use webpack to transpile. I run the test as ./k6 run dist/testFile.test.js

Interestingly, I can make the fillform.js example just fine. https://github.com/grafana/xk6-browser/blob/main/examples/fillform.js

What could be incorrect in my set up that I cant run it on non-headless mode? Visually, the page never stops loading on the browser. My chrome version is Version 110.0.5481.77 (Official Build) (arm64)

non-headless:

inancgumus · February 10, 2023, 9:59am

Hi @icedlatte,

Thank you for reporting the issue in detail.

Could you share what happens when you change page.locator('button#loginButton').click() to page.click('button#loginButton')?

Thanks.

icedlatte · February 12, 2023, 10:49pm

Hello @inanc

Apologies for the delayed response and thank you for replying.

Here’s the result, and I have set to headless: false as i run it.

 await Promise.all([
      page.waitForNavigation(),
      page.click('button#loginButton')
    ]);

The error I get is

ERRO[0053] Uncaught (in promise) waiting for navigation: timed out after 30s executor=per-vu-iterations scenario=default

Same as when i run it with page.locator('button#loginButton').click()

headless: true however, with page.click('button#loginButton') passes

inancgumus · February 14, 2023, 11:13am

Hi @icedlatte,

Thanks for trying the way I suggested. Could you also try removing both slowMo and sleep? And then leave only slowMo and in another run leave only sleep? Please do these using .click instead of the locator’s click.

This can help us seeing the issue since we can’t see and test the page (URLS.BaseURL) ourselves.

Thanks!

icedlatte · February 14, 2023, 11:40pm

Hi @inanc , thank you so much for the response.

I have the results here - all ran as headless: false and using page.click('button#loginButton')

Removed slowMo: '100ms' but kept sleep(2)


INFO[0005] "JQMIGRATE: Migrate is installed with logging active, version 1.4.1"  source=browser-console-api
INFO[0008] "Successfully registered Appboy to your mParticle configuration"  source=browser-console-api
INFO[0008] "Successfully registered Amplitude to your mParticle configuration"  source=browser-console-api
INFO[0008] "Successfully registered GoogleAnalytics4 to your mParticle configuration"  source=browser-console-api
WARN[0012] "A user identification type of customerId was selected in mParticle dashboard, but was not passed to the identity call. Please check your implementation."  source=browser-console-api
WARN[0017] "JQMIGRATE: jQuery.fn.load() is deprecated"   source=browser-console-api
WARN[0017] "JQMIGRATE: jQuery.fn.error() is deprecated"  source=browser-console-api
WARN[0019] url:https://jssdks.mparticle.com/v3/JS/us1-f5ed7156e4ef694ca8934651e5655363/events method:POST err:fetching response body: No resource with given identifier found (-32000)  category="Response:bodySize:fetchBody" elapsed="0 ms" goroutine=139
ERRO[0043] Uncaught (in promise) waiting for navigation: timed out after 30s  executor=per-vu-iterations scenario=default

But when ran as headless: true, the test passes.

Removed sleep(2) but kept slowMo: '100ms'

WARN[0009] url:https://adservice.google.com/ddm/fls/i/src=4456902;type=STBAc0;cat=stblo0;ord=9649425260965.492;~oref=https://hdev-www.cmcmarketsstockbroking.com.au/ method:GET err:fetching response body: No resource with given identifier found (-32000)  category="Response:bodySize:fetchBody" elapsed="0 ms" goroutine=497
WARN[0011] "A user identification type of customerId was selected in mParticle dashboard, but was not passed to the identity call. Please check your implementation."  source=browser-console-api
WARN[0016] "JQMIGRATE: jQuery.fn.load() is deprecated"   source=browser-console-api
WARN[0016] "JQMIGRATE: jQuery.fn.error() is deprecated"  source=browser-console-api
WARN[0018] url:https://jssdks.mparticle.com/v3/JS/us1-f5ed7156e4ef694ca8934651e5655363/events method:POST err:fetching response body: No resource with given identifier found (-32000)  category="Response:bodySize:fetchBody" elapsed="0 ms" goroutine=114
ERRO[0045] Uncaught (in promise) waiting for navigation: timed out after 30s  executor=per-vu-iterations scenario=default

I tried also with headless: true, and again the test passes.

Removed both sleep(2) and slowMo: '100ms'

ource=browser-console-api
WARN[0014] "JQMIGRATE: jQuery.fn.load() is deprecated"   source=browser-console-api
WARN[0014] "JQMIGRATE: jQuery.fn.error() is deprecated"  source=browser-console-api
ERRO[0044] Uncaught (in promise) waiting for navigation: timed out after 30s  executor=per-vu-iterations scenario=default

And when ran also as headless: true, it passes.

In all three runs set to headless:false, Im getting the same error
ERRO[0044] Uncaught (in promise) waiting for navigation: timed out after 30s executor=per-vu-iterations scenario=default

I understand this is quite problematic to troubleshoot given I’m working on an internal URL, and I truly appreciate the help.

When I manually visit our URL > Log in > Check Dev Tools > Network, our application constantly polls every 1sec for several endpoints because we needed to fetch and display realtime data. Big reason why we also needed the load test.
But I do not know if it impacts how page.waitForNavigation() works in this case.

Cheers

inancgumus · February 15, 2023, 7:49am

Thanks @icedlatte,

Also thanks for the detailed outputs and step by step explanations One last thing I would need you to try. Could you try only using click without waitForNavigation and also without sleep and slowMo?

After that, you can create an issue on our Github by linking to this forum post. Then we’ll track it from there. It seems like a bug.

Thanks for your help!

icedlatte · February 15, 2023, 11:31pm

Hi @inanc

Here we are -

All ran as headless: false, and only
await Promise.all([page.click('button#loginButton')]);

With slowMo: '100ms' and sleep(2) after page.click:

ERRO[0049] Uncaught (in promise) GoError: getting text content of ".body-container #page-header h2": timed out after 30s
running at reflect.methodValueCall (native)
default at _callee$ (webpack://@automation-k6-platforms/./src/example/feSample.test.ts:29:41(131))
	at call (native)
	at tryCatch (webpack://@automation-k6-platforms/./src/example/feSample.test.ts:2:0(9))
	at webpack://@automation-k6-platforms/./src/example/feSample.test.ts:2:0(101)
	at webpack://@automation-k6-platforms/./src/example/feSample.test.ts:2:0(5)
	at asyncGeneratorStep (webpack://@automation-k6-platforms/./src/example/feSample.test.ts:2:0(6))
	at _next (webpack://@automation-k6-platforms/./src/example/feSample.test.ts:2:0(10))  executor=per-vu-iterations 
	scenario=default

When ran as headless: true – the test passes and is able to assert for the header.textContent()

Ran with slowMo: '100ms' without sleep(2):

ERRO[0120] communicating with browser: websocket: close 1006 (abnormal closure): unexpected EOF  category=cdp elapsed="0 ms" goroutine=114
ERRO[0120] process with PID 85373 unexpectedly ended: signal: killed  category=browser elapsed="2 ms" goroutine=63
ERRO[0120] Uncaught (in promise) GoError: disposing browser context: disposing browser context ID BA0D09523CB19EDC6BD61961990D22C0: websocket: close 1006 (abnormal closure): unexpected EOF
default at github.com/grafana/xk6-browser/api.Page.Close-fm (native)
	at _callee$ (webpack://@automation-k6-platforms/./src/example/feSample.test.ts:33:14(150))
	at call (native)
	at tryCatch (webpack://@automation-k6-platforms/./src/example/feSample.test.ts:2:0(9))
	at webpack://@automation-k6-platforms/./src/example/feSample.test.ts:2:0(101)
	at webpack://@automation-k6-platforms/./src/example/feSample.test.ts:2:0(5)
	at asyncGeneratorStep (webpack://@automation-k6-platforms/./src/example/feSample.test.ts:2:0(6))
	at _next (webpack://@automation-k6-platforms/./src/example/feSample.test.ts:2:0(10))  executor=per-vu-iterations 
	scenario=default

Tried running as headless:true - also failing but different error

ERRO[0013] Uncaught (in promise) GoError: getting text content of ".body-container #page-header h2": execution context changed; most likely because of a navigation
default at reflect.methodValueCall (native)
	at _callee$ (webpack://@automation-k6-platforms/./src/example/feSample.test.ts:29:41(125))
	at call (native)
	at tryCatch (webpack://@automation-k6-platforms/./src/example/feSample.test.ts:2:0(9))
	at webpack://@automation-k6-platforms/./src/example/feSample.test.ts:2:0(101)
	at webpack://@automation-k6-platforms/./src/example/feSample.test.ts:2:0(5)
	at asyncGeneratorStep (webpack://@automation-k6-platforms/./src/example/feSample.test.ts:2:0(6))
	at _next (webpack://@automation-k6-platforms/./src/example/feSample.test.ts:2:0(10))  executor=per-vu-iterations 
	scenario=default

With sleep(2) but without slowMo: '100ms'. Error is

ERRO[0049] Uncaught (in promise) GoError: getting text content of ".body-container #page-header h2": timed out after 30s
running at reflect.methodValueCall (native)
default at _callee$ (webpack://@automation-k6-platforms/./src/example/feSample.test.ts:29:41(129))
	at call (native)
	at tryCatch (webpack://@automation-k6-platforms/./src/example/feSample.test.ts:2:0(9))
	at webpack://@automation-k6-platforms/./src/example/feSample.test.ts:2:0(101)
	at webpack://@automation-k6-platforms/./src/example/feSample.test.ts:2:0(5)
	at asyncGeneratorStep (webpack://@automation-k6-platforms/./src/example/feSample.test.ts:2:0(6))
	at _next (webpack://@automation-k6-platforms/./src/example/feSample.test.ts:2:0(10))  executor=per-vu-iterations 
	scenario=default

Ran as headless: true and the test passed for header.textContent()!

Finally, without sleep and without slowMo. Got an error

ERRO[0120] communicating with browser: websocket: close 1006 (abnormal closure): unexpected EOF  category=cdp elapsed="0 ms" goroutine=113
ERRO[0120] process with PID 85872 unexpectedly ended: signal: killed  category=browser elapsed="1 ms" goroutine=75
ERRO[0120] Uncaught (in promise) GoError: disposing browser context: disposing browser context ID B9542BBB81877BF4B6AB6BF001B2A845: websocket: close 1006 (abnormal closure): unexpected EOF
default at github.com/grafana/xk6-browser/api.Page.Close-fm (native)
	at _callee$ (webpack://@automation-k6-platforms/./src/example/feSample.test.ts:33:14(148))
	at call (native)
	at tryCatch (webpack://@automation-k6-platforms/./src/example/feSample.test.ts:2:0(9))
	at webpack://@automation-k6-platforms/./src/example/feSample.test.ts:2:0(101)
	at webpack://@automation-k6-platforms/./src/example/feSample.test.ts:2:0(5)
	at asyncGeneratorStep (webpack://@automation-k6-platforms/./src/example/feSample.test.ts:2:0(6))
	at _next (webpack://@automation-k6-platforms/./src/example/feSample.test.ts:2:0(10))  executor=per-vu-iterations 
	scenario=default

running (02m00.0s), 0/1 VUs, 1 complete and 0 interrupted iterations

When set to headless: true, got an error but different from the one in non-headless:

ERRO[0014] Uncaught (in promise) GoError: getting text content of ".body-container #page-header h2": execution context changed; most likely because of a navigation
default at reflect.methodValueCall (native)
	at _callee$ (webpack://@automation-k6-platforms/./src/example/feSample.test.ts:29:41(123))
	at call (native)
	at tryCatch (webpack://@automation-k6-platforms/./src/example/feSample.test.ts:2:0(9))
	at webpack://@automation-k6-platforms/./src/example/feSample.test.ts:2:0(101)
	at webpack://@automation-k6-platforms/./src/example/feSample.test.ts:2:0(5)
	at asyncGeneratorStep (webpack://@automation-k6-platforms/./src/example/feSample.test.ts:2:0(6))
	at _next (webpack://@automation-k6-platforms/./src/example/feSample.test.ts:2:0(10))  executor=per-vu-iterations 
	scenario=default

running (00m14.2s), 0/1 VUs, 1 complete and 0 interrupted iterations

Hope this helps

icedlatte · February 16, 2023, 12:03am

@inanc thanks for the guidance.
I’ve raised a bug in GitHub Errors when running xk6-browser in headless:false mode · Issue #780 · grafana/xk6-browser · GitHub

inancgumus · February 16, 2023, 8:32am

Hi @icedlatte,

I appreciate your efforts in addressing the issue. To expedite the resolution process, may I request for your assistance in providing a way for us to reproduce the problem? It would be helpful if you could create a sample HTML page and reproduce the problem locally, then share it with us. You can use our test site if it would be helpful. This will not only aid in resolving the problem but can also benefit other users who might be encountering similar issues.

Thank you!

icedlatte · February 17, 2023, 1:32am

Hello @inanc , I’ll see what i can do to help repro this. Thank you!

carlo · July 21, 2023, 3:29am

Hi, @inanc

I’ve been encountered the same issue when I try to run my browser instance script on linux vm.

ERRO[0003] Failed to load resource: the server responded with a status of 403 ()  browser_source=network line_number=0 source=browser stacktrace="<nil>" url="https://alb.reddit.com/rp.gif?ts=1689909650496&id=t2_aa7ovq9w&event=PageVisit&m.itemCount=undefined&m.value=&m.valueDecimal=undefined&m.currency=undefined&m.transactionId=&m.customEventName=&m.products=&m.conversionId=&uuid=2d947762-2cc8-464a-87c0-d9d11a316fae&aaid=&em=&external_id=&idfa=&integration=gtm&opt_out=0&sh=1280&sw=720&v=rdt_f5bd31b2"
ERRO[0031] Uncaught (in promise) navigating frame to "https://legalmatch.legalmatch.com/": navigating to "https://legalmatch.legalmatch.com/": timed out after 30s  executor=constant-vus scenario=browser

inancgumus · July 25, 2023, 11:33am

Hi @carlo,

Could you provide a test script to reproduce the issue using our test site? That will help us fix the issue.

Thanks!

carlo · July 25, 2023, 1:31pm

Hi @inanc,

Thank you for your response. Below script that I have been executed in linux VM ubuntu.

import { chromium } from 'k6/experimental/browser';
import { check } from 'k6';

export const options = {
    scenarios: {
        browser: {
            executor: 'constant-vus',
            exec: 'browser',
            vus: 1,
            duration: '30s'
        }
    }
};

export async function browser() {
    const browser = chromium.launch({ headless: true, timeout: '60s' });
    const page = browser.newPage();

    try {
        await page.goto('https://www.legalmatch.com/');

        check(page, {
            'Find the Right Lawyer for Your Legal Issue!': (page) =>
                page.locator("(//a[@class='case-intake-form__header--link'])[1]").isVisible() ===
                true
        });
        check(page, {
            'Hero Banner': (page) => page.locator("(//div[@class='hero '])[1]").isVisible() === true
        });
        check(page, {
            'Top Rated': (page) =>
                page
                    .locator("(//div[@class='w-top-rated w-top-rated--no-location '])[1]")
                    .isVisible() === true
        });
    } finally {
        page.close();
        browser.close();
    }

inancgumus · July 25, 2023, 1:47pm

Thanks, @carlo, we’ll check this out soon and get back to you. Have you tried running this script on another OS by any chance?

carlo · July 26, 2023, 1:58am

Hi @inancgumus I’ve tried on Windows OS it’s working.

inancgumus · July 26, 2023, 10:54am

Hi @carlo,

We’ve tried your script, but it works fine on our side. Could the issue be because you’re getting 403?

Could you make a verbose curl request on which you’re running the test and see where you’re getting that response from? There might be something in between.

curl -v http://example.com

Thanks.

carlo · July 27, 2023, 2:51am

Hi, @inancgumus

After executing the command - url -v http://example.com

* Connection #0 to host www.legalmatch.com left intact

Then when I try to install also the chromium browser I got this error below.

ERRO[0016] Uncaught (in promise) GoError: launching browser: Running as root without --no-sandbox is not supported. See https://crbug.com/638180.
running at github.com/grafana/xk6-browser/browser.mapBrowserType.func2 (native)
browser at browser (file:///home/aut/loadtest/script/browserHomePage.js:17:36(15))  executor=constant-vus scenario=browser
ERRO[0016] process with PID 9190 unexpectedly ended: exit status 1  category=browser elapsed="0 ms" goroutine=543

carlo · July 27, 2023, 2:54am

Hi, @inancgumus

Below the linux VM specs

Linux LMAUT1 4.4.0-210-generic #242-Ubuntu SMP Fri Apr 16 09:57:56 UTC 2021 x86_64 x86_64 x86_64 GNU/Linux
root@LMAUT1:/home/aut# cat /etc/os-release
NAME="Ubuntu"
VERSION="16.04.7 LTS (Xenial Xerus)"
ID=ubuntu
ID_LIKE=debian
PRETTY_NAME="Ubuntu 16.04.7 LTS"
VERSION_ID="16.04"
HOME_URL="http://www.ubuntu.com/"
SUPPORT_URL="http://help.ubuntu.com/"
BUG_REPORT_URL="http://bugs.launchpad.net/ubuntu/"
VERSION_CODENAME=xenial
UBUNTU_CODENAME=xenial
root@LMAUT1:/home/aut#

carlo · July 28, 2023, 2:31am

Hi, @inancgumus

I tried to set-up a virtual box with the same flavor of linux ubuntu 16.04a and it’s works after installing chromium browser. Also, workaround with different test server connected to VPN then the error was resolved. Thank you for your help and support.

Topic		Replies	Views
Multiple VUs using xk6 browser k6-browser	2	794	February 22, 2023
Can't type in headless mode k6-browser	4	1341	January 31, 2023
Browser testing with k6 - browser is not launching k6-browser k6	11	1954	June 24, 2024
Running into errors due to a redirect and unsure of how to handle it k6-browser	3	999	December 14, 2022
Unable to click on a dropdown link: ERRO[0057] Uncaught (in promise) waiting for navigation k6-browser	3	257	September 21, 2023

Issues running in headless:false mode ERRO[0058] Uncaught (in promise) waiting for navigation: timed out after 30s

Related topics