How to set enable cache option in k6 browser headless?

Grafana k6 k6-browser
1

Hi. I’m interested in setting up “enable cache” option in k6/browser. Couldn’t find such in official docs.
I’m running k6 browser test and according browser data received looks like cache doesn’t work.
So maybe someone know how to set enable cache option in k6 browser headless?

3

Hi @annah,

The browser module currently doesn’t cache anything. When a new context is created per iteration, it’s essentially an incognito window with a fresh new cache.

We currently don’t have a way to enable caching. We have an issue that you can track: Allow non-incognito window in connect() mode · Issue #891 · grafana/xk6-browser · GitHub.

I’d still want to get a better understanding of your use case.

  1. What are you trying to test?
  2. Do you have a test script to hand that I can take a look at?
  3. Have you used a tool that does what you want? If so, how do you work with the cache enable option?

Cheers,
Ankur

4

Hi @ankur, thank you for your answer.
Here is the simple example:

import { browser } from 'k6/experimental/browser'

export const options = {
    scenarios: {
        'UserLoginLogout': {
            executor: 'per-vu-iterations',
            vus: 1,
            iterations: 1,
            maxDuration: '60s',
            options: {
                browser: {
                    type: 'chromium',
                },
            },
            exec: 'UserLoginLogout',
        },
    }
}

export async function UserLoginLogout() {

    const page = browser.newPage()

    try {
        await Promise.all([page.waitForNavigation(), page.goto(`HomePage`)]) // manually in devTools data received 1.4 Mb

        await Promise.all([page.waitForNavigation(), page.locator(`${loc.signinButton}`).click()]) // manually in devTools data received 641 Kb

        page.fill(`${loc.username}`, username);
        page.fill(`${loc.password}`, password);

        await Promise.all([page.waitForNavigation(), page.locator(`${loc.loginButton}`).click()])  // manually in devTools data received 667 Kb

        await Promise.all([page.waitForNavigation(), page.locator(`${loc.logoutButton}`).click()]) // manually in devTools data received 1.4 Mb
    } finally {
        page.close()
    }
}

// total browser_data_received 4.2 Mb in k6 summary

In k6 documentation I read that → BrowserContext provide a way to operate multiple independent sessions, with separate pages, cache, and cookies.
And in community → …each iteration will start and stop a new instance of Chrome with it’s own cache. When the Chrome instance is shutdown the browser module deletes the cached data.

So in my case looks like in one instance cache doesn’t work.
I expected that in current iteration after logout home page data would be received from the cache.

5

Hi @annah,

Thanks for the test script, i tidied it up slightly:

import { browser } from 'k6/experimental/browser'

export const options = {
    scenarios: {
        'UserLoginLogout': {
            executor: 'per-vu-iterations',
            vus: 1,
            iterations: 1,
            maxDuration: '60s',
            options: {
                browser: {
                    type: 'chromium',
                },
            },
            exec: 'UserLoginLogout',
        },
    }
}

export async function UserLoginLogout() {

    const page = browser.newPage()

    try {
        await page.goto(`HomePage`) // manually in devTools data received 1.4 Mb

        await Promise.all([
            page.waitForNavigation(),
            page.locator(`${loc.signinButton}`).click(),
        ]) // manually in devTools data received 641 Kb

        page.fill(`${loc.username}`, username);
        page.fill(`${loc.password}`, password);

        await Promise.all([
            page.waitForNavigation(),
            page.locator(`${loc.loginButton}`).click(),
        ])  // manually in devTools data received 667 Kb

        await Promise.all([
            page.waitForNavigation(),
            page.locator(`${loc.logoutButton}`).click(),
        ]) // manually in devTools data received 1.4 Mb
    } finally {
        page.close()
    }
}

In k6 documentation I read that → BrowserContext provide a way to operate multiple independent sessions, with separate pages, cache, and cookies.
And in community → …each iteration will start and stop a new instance of Chrome with it’s own cache. When the Chrome instance is shutdown the browser module deletes the cached data.

Yes this is correct. If we put these two things together what we get is:

  1. Every iteration starts a new chrome instance.
  2. Every browserContext is isolated from every other browserContext, and each iteration can hold one browserContext. If your test is running 10 iterations, each iteration will require a whole new browserContext, and nothing is shared between each of them.
  3. Any cached data that chrome created will be deleted at the end of the test run.

So in each iteration regardless of the action performed in that iteration, the data will be retrieved again in the next iteration, and not from the cache.

Have you tried working with K6_BROWSER_ARGS='user-data-dir="./temp-chrome-data"' k6 run test.js to see if that helps with what you need?

Hope that helps,
Ankur