K6 and access to localStorage of website

Hi everyone, I am new in K6 and I am learning to use it. I am trying to run some basic performance tests on Vue.js • TodoMVC.
It is a basic to-do list and it uses local storage of the browser to store the element of the list. I read in different places that K6 is not a browser and does not have any notion of localStorage.

Is there any work around to make this work?

PS: I would like to precise that the todovmc.com/example/vue is not using any HTTP request when interacting with the to-do list AFAIK

1 Like

Hi Raphael,

Welcome to the community.

We have a new product called xk6-browser that allows you to automate browser tests. It’s integrated with k6. Please take a look and tell us your thoughts.

:point_right: xk6-browser

Thanks.

Hi @inancgumus . I am using k6 browser module for load testing a web page. I am trying to login to the page, but stuck in an error.

INFO[0004] [webpack-dev-server] Server started: Hot Module Replacement enabled, Live Reloading enabled, Progress disabled, Overlay enabled.  browser_source=console-api source=browser
WARN[0004] Tried to get 'profileId' ('skillfit_profileId') from localStorage, but was unable to find a value.  browser_source=console-api source=browser
WARN[0004] [Redux-SessionStorage-Simple] Invalid load 'profile_assessment_assessment' provided. Check your 'states' in 'load()'. If this is your first time running this app you may see this message. To disable it in future use the 'disableWarnings' flag, see documentation.  browser_source=console-api source=browser
WARN[0004] [Redux-SessionStorage-Simple] Invalid load 'profile_assessment_account' provided. Check your 'states' in 'load()'. If this is your first time running this app you may see this message. To disable it in future use the 'disableWarnings' flag, see documentation.  browser_source=console-api source=browser
WARN[0004] [Redux-LocalStorage-Simple] Invalid load 'skillfit_profile_assessment_assessment' provided. Check your 'states' in 'load()'. If this is your first time running this app you may see this message. To disable it in future use the 'disableWarnings' flag, see documentation.  browser_source=console-api source=browser
WARN[0004] [Redux-LocalStorage-Simple] Invalid load 'skillfit_profile_assessment_account' provided. Check your 'states' in 'load()'. If this is your first time running this app you may see this message. To disable it in future use the 'disableWarnings' flag, see documentation.  browser_source=console-api source=browser
WARN[0004] [OPTIMIZELY] - WARN  2024-03-28T07:55:17.273Z Invalid eventBatchSize undefined, defaulting to 10  browser_source=console-api source=browser
WARN[0004] [OPTIMIZELY] - WARN  2024-03-28T07:55:17.274Z Invalid eventFlushInterval undefined, defaulting to 1000  browser_source=console-api source=browser
INFO[0004] Cognito user not logged in - clearing account state and creating a new profile  browser_source=console-api source=browser
INFO[0005] Hotjar script loaded                          browser_source=console-api source=browser
INFO[0006] Setting new profile: 5uIGZE1CzyHUlIPCjUpHB    browser_source=console-api source=browser
WARN[0006] Unable to find a logged-in user: The user is not authenticated. Attempting to use passed profileId \"5uIGZE1CzyHUlIPCjUpHB\".  browser_source=console-api source=browser                      
INFO[0012] Loading client information for styles:  baton-rouge  browser_source=console-api source=browser
WARN[0013] When setting the localStorage 'profileId' (skillfit_profileId) to '5uIGZE1CzyHUlIPCjUpHB' an existing local value was found: 5uIGZE1CzyHUlIPCjUpHB. 'profileId' will still be set to '5uIGZE1CzyHUlIPCjUpHB'.  browser_source=console-api source=browser
WARN[0013] Tried to get 'HAS_LOGGED_IN_KEY' ('skillfit_HAS_LOGGED_IN_KEY') from localStorage, but was unable to find a value.  browser_source=console-api source=browser
WARN[0013] Tried to get 'skillfit_profile_assessment_account' ('skillfit_skillfit_profile_assessment_account') from localStorage, but was unable to find a value.  browser_source=console-api source=browser                                                                                                                                                                                                      
ERRO[0013] When attempting to remove the localStorage 'skillfit_profile_assessment_account' (skillfit_skillfit_profile_assessment_account) key, no item was found.  browser_source=console-api source=browser                                                                                                                                                                                                     
WARN[0013] Tried to get 'skillfit_profile_assessment_account' ('skillfit_skillfit_profile_assessment_account') from localStorage, but was unable to find a value.  browser_source=console-api source=browser                                                                                                                                                                                                      
ERRO[0013] Warning: Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code. See https://reactjs.org/link/unsafe-component-lifecycles for details.\n\n* Move code with side effects to componentDidMount, and set initial state in the constructor.\n\nPlease update the following components: %s SideEffect(NullComponent)  browser_source=console-api source=browser
INFO[0013] loading state from local storage              browser_source=console-api source=browser
ERRO[0013] Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in %s.%s a useEffect cleanup function \n    at Modal (https://localhost:3000/static/js/bundle.js:9355:5)\n    at Modal (https://localhost:3000/static/js/bundle.js:19729:7)  browser_source=console-api source=browser
INFO[0013] Pendo Initialized Successfully {"accountId":"baton-rouge","visitorId":"5uIGZE1CzyHUlIPCjUpHB"}  browser_source=console-api source=browser
WARN[0013] Unable to find a logged-in user: The user is not authenticated. Attempting to use passed profileId \"5uIGZE1CzyHUlIPCjUpHB\".  browser_source=console-api source=browser                      
INFO[0013] event - MESSAGE RECEIVED FROM PARENT          browser_source=console-api source=browser
INFO[0013] event - MESSAGE RECEIVED FROM PARENT          browser_source=console-api source=browser
INFO[0013] Checking if cognito user still logged in (not profile)  browser_source=console-api source=browser
WARN[0013] Cognito user is NOT logged in                 browser_source=console-api source=browser                                                                                                       
INFO[0013] event - MESSAGE RECEIVED FROM PARENT          browser_source=console-api source=browser
ERRO[0037] Uncaught (in promise) clicking on "#proceed-link": timed out after 30s  executor=shared-iterations scenario=ui

So I am receiving some errors regarding accessing the local storage. This is the script I am running.

export let page;
export default async function () {
  try {
    
      const context = await browser.newContext()
      const page = await context.newPage();
      await page.goto(`URL_I_AM_TESTING`, { waitUntil: 'domcontentloaded' });
      await page.bringToFront();
      await page.waitForLoadState();
      
      const err_button = page.locator('#details-button')
      err_button.click();
      const err_button_1 = page.locator('#proceed-link')
      err_button_1.click();
      
      const errButton = await page.waitForSelector('#details-button');
      await errButton.click();
      await page.waitForNavigation();
      
      const proceedLink = await page.locator('#proceed-link');
      await proceedLink.click();
      await page.waitForNavigation();
      await page({ waitUntil: 'domcontentloaded' });
      // await page.evaluate(()=>localStorage.clear());
      const startButton = await page.waitForSelector('#start-button');
      await startButton.click();
      await page.waitForNavigation();

      await page.screenshot({ path: 'screenshot.png' });

      const loginButton = await page.waitForSelector('#login-button');
      await loginButton.click();
      await page.waitForNavigation();

      const emailInput = await page.waitForSelector('#email-input');
      await emailInput.type('load.tests+test@gmail.com');
      await page.waitForNavigation();

      await page.screenshot({ path: 'screenshot2.png' });
  } finally {
      if (page) {
          await page.close();
      }
  }
}

As you can see, I tried to clear local storage but receiving errors in using the playwright "
storageState" and other methods. Is there any way to reset local storage for every test?

Hi @saivignesh0303,

Does this answer at this link help? We’ve released support for addInitScript recently. Here is the documentation.

Thanks.

Hi @inancgumus Thanks for replying so soon. But it didn’t work. I saw some of the k6 office hours and tried waitForLoadState() too. Is there any other way to resolve this error? Does k6 support jest or cypress or puppeteer ?

Hi @saivignesh0303,

Could you share the URL you’re testing against so we can diagnose the issue? If you don’t want to share it publicly, you can send it to me in a private forum message. We don’t support using jest, cypress, or puppeteer.