How to recover from time-out waiting for page or element to load

Grafana k6 k6-browser
1

Hi,

I’m having trouble with my k6 browser script. When an element or page takes too long time to load, resulting in a time-out, the current VU in the test aborts abruptly. Thus skipping the following check if the page or element was loaded correctly and the increase of the rate couting errors. The behaviour also happens when for example the resulting page is a http 500 error page. See below code snippet from my login part of the total script. Because the script aborts before code like rateErrorGuiLogin.add(true) (see code below) is executed we have no way of counting the numbers of errors/incomplete loads compared to the total number of requests/page loads/element loads done.

So my question is if a login page for example is timing out (or an element is timing out to be shown) or returns http 500 how do I capture that with a check so that I can count it as an error? I often get “Uncaught (in promise) waiting for navigation: timed out after 30s” resulting in this problem. I only run with one VU (and i.e. one browser window) so this problem is not is not due to load but the bad performance of the web page I performance test (timing out etc).

In reality it’s not the login page that times out but a more complex page with React components timing out, but the resulting bevaviour is the same (waiting for React content to be loaded), my checks get skipped by the sudden abort when timing out.

I really appreciate some insights about this and best practices to solve these kinds of situations.

    export async function guiTest() {

    const uniqueUser = getUniqueTestUser();
    const page = await browser.newPage();


    try {

        await page.goto(environment.environmentBaseURLGui);
      
        const loginLink = page.locator('a[href=' + '"/' + environment.environmentName + '/my/authentication/login"]');

        await Promise.all([page.waitForNavigation(), loginLink.click()]);
      
        // Make sure textbox for username is visible before entering username in textbox
        let txtBoxUserNameVisible = false;
        txtBoxUserNameVisible = await page.locator('#username').isVisible();

        result = check(txtBoxUserNameVisible , {
          'Login textbox for user name is visible': (e) => e === true,
        });

        if(result==false && environment.debugLogging==true){
            console.log("Login textbox for user name not visible for user: " + uniqueUser );
        }        
        if(result) {
            rateErrorGuiLogin.add(false);
        } else {
            rateErrorGuiLogin.add(true);
        }
        
        await page.waitForSelector('#username');
        const txtBoxPersNo = page.locator('#username');
        await txtBoxPersNo.fill(uniqueUser);
        
        // Make sure login submit button is visible
        let submitButtonVisible = false;
        submitButtonVisible = await page.locator('button[type=submit]').isVisible();
        result = check(submitButtonVisible, {
          'Login submit button is visible': (e) => e === true,
        });

        if(result==false && environment.debugLogging==true){
            console.log("Login submit button not visble for user: " + uniqueUser );
        }        
        if(result) {
            rateErrorGuiLogin.add(false);
        } else {
            rateErrorGuiLogin.add(true);
        }

        if (submitButtonVisible) {
          const submitButton = page.locator('button[type=submit]');
          await Promise.all([page.waitForNavigation(), submitButton.click()]);

          counterGuiLogin.add(1);
        }

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