Getting a navigation error while trying to use .type

Grafana k6 k6-browser
1

I am trying to use the locator.type in the k6 script. My script gives out the following year:

Uncaught (in promise) GoError: typing "sagar.thetennis" in "#signInName": execution context changed; most likely because of a navigation
running at github.com/grafana/xk6-browser/api.Locator.Type-fm (native)

My script is the following:

import http from 'k6/http'
import { check,sleep } from 'k6'
import {browser} from 'k6/experimental/browser'
//import { clickCheckboxOnk6 } from '@pages/example-page'
//import { htmlReport } from    "https://raw.githubusercontent.com/benc-uk/k6-reporter/2.4.0/dist/bundle.js";




export const options = {
    scenarios: {
        ui:{
            executor: 'constant-vus',
            duration: '10s',
            vus: 1,
            options: {
            browser: {
                type: 'chromium',
              },
             
            }
          
          
          
    }
}
}

     
      
     

export default async function() {

       
    
    const context = browser.newContext({bypassCSP: true});
    const page = context.newPage();
    try { 

    

    
    await page.goto("https://func-aibidia-proxies-uat.azurewebsites.net/tpdoc/#/login", { waitUntil: 'networkidle' })

    await Promise.all([
        page.waitForNavigation(),
        page.locator("//button[@class='a-button right a-primary-btn']").click()
      ])
    
    await Promise.all([
        page.locator("#signInName").type("sagar.thetennis"),
        page.locator('#password').type("hello")
    ])
   
    

    await Promise.all([
        page.waitForNavigation(),
        page.locator('button[type="submit"]').click()
      ])
    
     
    sleep(2)
    

    //const userName= await page.locator("//div[@class='form-control ltr_override input ext-input text-box ext-text-box']")
    //userName.fill('sagar.sathyanarayanan@aibidia.com')
    

   // await page.waitForURL('https://func-aibidia-proxies-test.azurewebsites.net/tpdoc/#/client/2/general/introduction')
    
    //await page.context().storageState({ path: 'playwright/.auth-test/user.json' })
    }finally{page.close()
    //browser.close()
    }
}
3

@sagarthetennis10k
I think this happens because the browser is just navigating from one site to another when the script tries to locate the #signInName element, and this is because of the waitForNavigation() returns before the login page is loaded.

If you switch on debug logging and visible browser window (with K6_BROWSER_DEBUG=true and K6_BROWSER_HEADLESS=false environment variables) you see what is happening.

There are two navigation event occured after clicking the Sign in button . The first is within the document, and the second is when the login page loaded:

time="2023-10-17T22:50:25+02:00" level=debug msg="fmid:1 fid:E008062EC213DF955D5888CD1007AEF3 furl:https://func-aibidia-proxies-uat.azurewebsites.net/tpdoc/#/login url:https://func-aibidia-proxies-uat.azurewebsites.net/tpdoc/#/login" category="FrameManager:frameNavigatedWithinDocument" elapsed="0 ms" iteration_id=56ae78912b62b1f2 source=browser
time="2023-10-17T22:50:28+02:00" level=debug msg="fmid:1 fid:E008062EC213DF955D5888CD1007AEF3 pfid: docid:6184883629A08A64D0E6F7C8D8CAC9A2 fname: furl:https://aibidiab2cuat.b2clogin.com/aibidiab2cuat.onmicrosoft.com/b2c_1a_susi/oauth2/v2.0/authorize?client_id=769a08cf-d39b-42ca-8a1b-33afd24010cb&scope=https%3A%2F%2Faibidiab2cuat.onmicrosoft.com%2FAibidiaAPI%2Fuser_impersonation%20openid%20profile%20offline_access&redirect_uri=https%3A%2F%2Ffunc-aibidia-proxies-uat.azurewebsites.net%2Ftpdoc%2F&client-request-id=4bc19dab-6dfc-4f8e-970b-4ba7365727f0&response_mode=fragment&response_type=code&x-client-SKU=msal.js.browser&x-client-VER=2.38.2&client_info=1&code_challenge=pTSlwbisgAcxojFWUc-kyUNYAB0psp5NOCEBNPzROok&code_challenge_method=S256&nonce=c615ca45-6d62-4b17-a867-35e8ec5a0c19&state=eyJpZCI6IjhmZTZiOTZmLWI1OWYtNDk3NC1iOTQ1LTczMGI3YjI5ZDU5YiIsIm1ldGEiOnsiaW50ZXJhY3Rpb25UeXBlIjoicmVkaXJlY3QifX0%3D initial:false pdoc:nil - fcurdoc:6184883629A08A64D0E6F7C8D8CAC9A2" category="FrameManager:frameNavigated" elapsed="0 ms" iteration_id=56ae78912b62b1f2 source=browser

So we have to wait both. This aproach works for me:

    await page.goto("https://func-aibidia-proxies-uat.azurewebsites.net/tpdoc/#/login", { waitUntil: 'networkidle' })
    await page.locator("//button[@class='a-button right a-primary-btn']").click();
    await page.waitForNavigation();    // waits the withinDocument navigation
    await page.waitForNavigation();    // waits the navigation to the login page
    page.locator("#signInName").type("sagar.thetennis");
    page.locator('#password').type("hello");

    page.locator('button[type="submit"]').click();
2 Likes