Handle of Alert windows with xk6.browser?

All,

I have a scenario where a page will fire an alert message on load. There doesn’t seem to be a way to handle it in xk6-browser?

Something similar to

page.on('dialog', dialog => dialog.accept());

This is of course supported by Playwright but I really am stuck currently without getting this dialog ‘gone’ :frowning:

Any ideas?

So I tried to run my test in ‘headless’ mode to see if that changes things. Not sure if things like dialogs / alerts will be ignored in headless mode??

I do however get this error:

ERRO[0045] Uncaught (in promise) GoError: clicking on "input[type=\"button\"]": execution context changed; most likely because of a navigation: GoError

Hi @jgreyling,

Thanks for the question. Unfortunately we don’t have page.on implemented yet in xk6-browser, and we can’t yet interact with dialog boxes. I’ve created issue #655 which you can follow and keep track of the progress.

Cheers,
Ankur

Thanks @ankur ! Can you maybe confirm the response I’m getting when running in headless mode, do you think it’s related to that?

This is my code:

page.goto(completionUrl, { waitUntil: 'networkidle' })
    .then(() => {

        page.locator('input[name="test"]').type('123')

        // Wait for asynchronous operations to complete
        return Promise.all([
            page.waitForNavigation({ waitUntil: 'networkidle' }),
            page.locator('button[id="nextBtn"]').click()
        ]).then(() => {
            page.locator('input[type="button"]').click()
        })
    })
    .finally(() => {
        page.close()
        browser.close()
    })

So basically the first page has a form which I complete, then I ‘click’ the Next button which loads another page (with the pop-up alert) which I then also have to ‘click’ on the input button to complete the transaction.

I’m assuming the “execution context changed…” error is because of the dialog but I could be wrong.

Hi @jgreyling,

I’ve tried to replicate the issue with a simple website using the information you have given me, but to no avail. Here are the two pages i’ve created:

Initial page.

<html>
    <head>
    </head>
    <body>
        <form action="/dialogbox">
            <input type="text" name="test"><br><br>
            <button type="submit" id="nextBtn">Click Me!</button>
        </form>
    </body>
</html>

Second page with dialog box.

<html>
    <head>
        <script>
            window.alert("Click accept");
        </script>
    </head>
    <body>
        <input type="button" value="home" onclick="myFunction()">
        Hello World!

        <script>
            function myFunction() {
                window.location.href = '/';
            }
        </script>
    </body>
</html>

I’ve used the exact same script as the one you’ve provided. Instead of an execution context changed… error, in my test it eventually times out which i assume is while it’s waiting for a selector that matches input[type="button"] which doesn’t appear because of the dialog box (even in headless mode).

The only way i could replicate the issue is when I ran:

  page.goto('completionUrl', { waitUntil: 'networkidle' })
  .then(() => {
    page.locator('input[name="test"]').type('123')
    page.locator('button[id="nextBtn"]').click()
    page.locator('input[type="button"]').click()
  })
  .finally(() => {
      page.close()
      browser.close()
  })

I think I won’t be able to replicate the issue unless I have access to the same website that you are testing against, as well as knowing some details of which OS you are running.

Cheers,
Ankur