How do I handle network activity using Playwright?

Playwright is a powerful library that allows you to control browser behavior, including handling network activity. Network activity includes any type of request or response that occurs between the client (your application) and the server (where the data resides).

To handle network activity using Playwright, you can use the page.route() function. This function allows you to intercept network requests and responses.

Here's an example in Python:

import asyncio
from playwright.async_api import async_playwright

async def main():
    async with async_playwright() as p:
        browser = await p.chromium.launch()
        page = await browser.new_page()
        # intercept network requests
        await page.route('**/*', lambda route, request: asyncio.create_task(handle_route(route, request)))
        await page.goto('http://example.com')
        await browser.close()

async def handle_route(route, request):
    print(f'Intercepted {request.url} {request.method}')
    await route.continue_()

asyncio.run(main())

In this Python example, we define a new route that matches any url (**/*) and provide a handler function handle_route() that gets executed whenever a network request is made. This handler function simply prints out the intercepted request's url and method, and then continues the request with route.continue_().

Here's a similar example in JavaScript:

const playwright = require('playwright');

(async () => {
  const browser = await playwright.chromium.launch();
  const context = await browser.newContext();
  const page = await context.newPage();
  // intercept network requests
  await page.route('**/*', async (route, request) => {
    console.log(`Intercepted ${request.url()} ${request.method()}`);
    await route.continue();
  });
  await page.goto('http://example.com');
  await browser.close();
})();

In the JavaScript example, we do the same thing. We define a new route that matches any URL (**/*) and provide a handler function that gets executed whenever a network request is made. This handler function logs the intercepted request's URL and method, then continues the request with route.continue().

With page.route(), you can not only log network requests, but also modify them or even respond with mock data. This makes it a powerful tool for testing how your application behaves under different server responses.