Setting localStorage for k6 browser tests

I am attempting to add geolocation into localStorage within a k6/browser test. With geolocation set, the app is able to auto-populate the location in one of our pages. I can assure you that nothing is wrong with the app in this case. We use the cache to populate geolocation in our playwright tests and they are currently passing.

This is the script I am using to add to localStorage, and get to the page that uses the stored location:

export default async function () {
  const browserContext = browser.newContext();

  //   Tried this one as well but it did not work
  //   browserContext.addInitScript(
  //     `function() {
  //         window.localStorage.setItem("geolocation", {"name":"Sandy Springs, Georgia, United States","longitude":-84.378538,"latitude":33.924269})
  //         console.log("LocalStorage:",window.localStorage)
  //     }`
  //   );

  const page = browserContext.newPage();

  try {
    await page.goto(QA_URL);

    page.waitForSelector('//div[@id="splash-screen"][@class="animate finished"]', {
      timeout: 10000,
      state: 'attached',
    });

    // Attempt to set local storage
    page.evaluate(() => {
      window.localStorage.setItem('geolocation', {
        name: 'Sandy Springs, Georgia, United States',
        longitude: -84.378538,
        latitude: 33.924269,
      });
    });

    // Find the button on the page
    const drugSearchButton = page.locator('[data-testid="find-medication-search-styled-chip"]');

    // Button is clicked and causes page navigation, waitForNavigation is needed because the page won't be ready until the navigation completes
    // Setting up waitForNavigation first before click is important to avoid race conditions
    await Promise.all([page.waitForNavigation(), drugSearchButton.click()]);

    // Find textBox
    const textBox = page.locator('[data-testid="search-bar"]');
    textBox.type('Lipitor');

    // Wait for suggestions to appear
    page.waitForSelector('//button[@data-testid="drug-menu-item-button"]', {
      state: 'visible',
      timeout: 10000,
    });

    // Get first suggestion
    const firstSuggestion = page.locator(
      '//button[@data-testid="drug-menu-item-button"][position()=1]'
    );

    await Promise.all([page.waitForNavigation(), firstSuggestion.click()]);

    page.waitForSelector('[data-testid="header-group-first-title-box"]', {
      state: 'visible',
      timeout: 10000,
    });

    page.screenshot({ path: 'screenshots/temp.png' });
  } finally {
    page.close();
  }
}

I have it taking a screenshot at the end of the test to just prove that geolocation was populated on the page. So it’s just there for development purposes.

I cannot seem to populate localStorage with anything the documentation mentions. Which leads me to believe that localStorage is not being set properly. Is there any chance that I may be setting it improperly? I’ve tried page.evaluate and browserContext.addInitScript as seen in the function above, but not getting the results I expect.

When playwright sets localStorage, values are normally set under an origin as seen here.

{
  "cookies": [],
  "origins": [
    {
      "origin": "QA_URL",
      "localStorage": [
            {
                "name": "geolocation",
                "value": "{ name: 'Sandy Springs, Georgia, United States', longitude: -84.378538, latitude: 33.924269, }"
            }
      ]
    }
  ]
}

Do we need to follow the same process here using k6/browser?

I have worked with @ankur before on a different issue using k6/browser and he knows what our QA_URL is. If anybody from Grafana, other than @ankur, wants to take a crack at this, you can ask him for the URL.