Add page.on('request')

[ankur22]

What?

This implements the page.on('request') API from Playwright. When the handler is created, all subsequent requests will be directed to the handler, where the user can interact with the read only request. The request is intercepted just before it is sent from the browser to the website under test.

An example usage is:

import { browser } from 'k6/browser'

export const options = {
  scenarios: {
    ui: {
      executor: 'shared-iterations',
      options: {
        browser: {
          type: 'chromium',
        },
      },
    },
  },
}

export default async function () {
  const page = await browser.newPage()

  // Logs the url of the request
  page.on('request', async (request) => {
    console.log(request.url());
  })

  await page.goto('https://quickpizza.grafana.com/', { waitUntil: 'networkidle' })

  await page.close();
}

Why?

This can be useful to:

• retrieve data that is to be used later;
• assert certain conditions on an expected request;

Checklist

• I have performed a self-review of my code.
• I have added tests for my changes.
• I have run linter locally (make lint) and all checks pass.
• I have run tests locally (make tests) and all tests pass.
• I have commented on my code, particularly in hard-to-understand areas.

Related PR(s)/Issue(s)

• Updates: Implement page.on('request') #4281
• Release notes: 49e3521
• Docs: browser: Add page.on('request') k6-docs#1877
• Typescript: browser: Add page.on('request|response') k6-DefinitelyTyped#80

[inancgumus]

Nice bit of work 👏 Some suggestions.

[inancgumus]

One more non-critical thing I noticed.

[codebien]

Why do we need to lock again? Isn't the lock before already safe-guarding for it?

[ankur22]

Yeah, this looks a bit odd. The reason behind this is to allow the handler to be able to add more handlers. This is a behaviour that Playwright exhibits and also documents, so it's something we're replicating.

page.on('request', async () => {
    page.on('response', async () => {
        // Do something with the request and response data...
    })
})

[inancgumus]

@codebien I asked the same question before for another related page.on method. Here's a little bit more detail @ankur22 previously answered: grafana/xk6-browser#1456 (comment)

[codebien]

@inancgumus can you rebase and resolve the conflicts here, please? 🙏