Interceptando requisições de rede com page.route()

A maioria das aplicações web é tão confiável quanto o backend com o qual elas se comunicam. Quando seus testes dependem de uma API real, eles se tornam lentos e instáveis (flaky): o servidor pode estar fora do ar, os dados podem mudar e cenários de erro ou de caso extremo são difíceis de reproduzir sob demanda.

O Playwright permite que você assuma o controle desse tráfego de rede. Com o page.route() você registra um handler para requisições que correspondem a um padrão de URL e, dentro desse handler, você decide o que fazer: deixar a requisição passar (route.continue()), responder com os seus próprios dados (route.fulfill()) ou fazê-la falhar (route.abort()).

Nesta primeira aula, começamos com calma: nós observamos a requisição GET /customers que a EngageSphere faz e a deixamos continuar até o servidor real, para que possamos ver exatamente o que a aplicação pede conforme o usuário pagina e filtra.

import { test, expect } from '@playwright/test'

test('loads the customers table', async ({ page }) => {
  await page.route('**/customers*', async (route) => {
    console.log('Request URL:', route.request().url())
    await route.continue()
  })

  await page.goto('/')

  await expect(page.getByRole('table')).toBeVisible()
})

Visão geral dos comandos 📖

test.describe

Agrupa casos de teste relacionados sob um título compartilhado, o que mantém a suíte organizada e o relatório mais fácil de ler.

Sintaxe:

test.describe(title, () => { /* tests */ })

Exemplo:

test.describe('EngageSphere', () => {
  // hooks e testes vão aqui
})

test.beforeEach

Registra um hook que roda antes de cada teste no seu escopo. É ideal para passos de preparação que todos os testes compartilham, como registrar uma route e navegar até a página sob teste.

Sintaxe:

test.beforeEach(async ({ page }) => { /* ... */ })

Exemplo:

test.beforeEach(async ({ page }) => {
  await page.goto('/')
})

test

Declara um único caso de teste. Ele recebe um título e um callback assíncrono, e o Playwright injeta suas fixtures (como o page) como argumento do callback.

Sintaxe:

test(title, async ({ page }) => { /* ... */ })

Exemplo:

test('loads the customers table', async ({ page }) => {
  // arrange, act e assert aqui
})

page.route()

Registra um handler para toda requisição cuja URL corresponde ao padrão fornecido (uma string glob, uma expressão regular ou uma função predicado). O handler recebe a route e pode inspecionar o route.request().

Sintaxe:

await page.route(urlPattern, handler)

Exemplo:

await page.route('**/customers*', async (route) => {
  await route.continue()
})

👨‍🏫 Registre a route antes de navegar ou disparar a requisição, caso contrário a requisição pode ser disparada antes de o handler existir.

route.continue()

Envia a requisição interceptada ao servidor real sem alterações. Use-o quando você só quer observar (ou ajustar levemente) uma requisição em vez de mocká-la.

Sintaxe:

await route.continue()

Exemplo:

await page.route('**/customers*', async (route) => {
  expect(route.request().method()).toBe('GET')
  await route.continue()
})

👨‍🏫 O route.request() expõe a url(), o method(), os headers() e o postData() da requisição interceptada, o que é útil para asserções.

route.request()

Retorna o objeto Request da requisição interceptada, para que você possa fazer asserção sobre seus detalhes, como o método HTTP.

Sintaxe:

route.request()

Exemplo:

await page.route('**/customers*', async (route) => {
  expect(route.request().method()).toBe('GET')
  await route.continue()
})

Conteúdo sugerido 📚

• Network - official documentation
• Mock APIs - official documentation
• page.route() - API reference
• Route - API reference

Exercício 🎯

Escreva um teste que visita a EngageSphere, intercepta a requisição GET /customers com o page.route() e a deixa continuar até o servidor real. Faça asserção de que a tabela de customers fica visível. Dentro do handler de route, faça asserção de que o método da requisição é GET e registre (log) a sua URL para que você possa ver como a query string muda.

🙊 Use o padrão glob '**/customers*' para que a route corresponda independentemente do host ou do segmento de caminho exato usado pela aplicação publicada.

👨‍🏫 Envolva seus testes em um bloco test.describe (por exemplo, com o título EngageSphere) e use um hook test.beforeEach para registrar a route e navegar até a aplicação antes de cada teste, para que todo teste comece a partir da mesma preparação.

Execute o teste em modo headed com npx playwright test --headed e observe a tabela carregar, depois verifique seu terminal para ver a URL da requisição registrada.

Mostre ao mundo o que você aprendeu 🌎

Para mostrar à sua rede profissional o que você aprendeu nesta aula, publique o seguinte no LinkedIn.

Estou fazendo o curso "Testes Web Avançados com Playwright" com @Walmyr Lima e Silva Filho na @Talking About Testing School, onde aprendi a interceptar e observar requisições de rede com o page.route() do Playwright. #TalkingAboutTesting #TATSchool #AdvancedPlaywrightWebTesting #Playwright

👨‍🏫 Lembre-se de me marcar na sua publicação. Aqui está o meu perfil no LinkedIn.