Escrevendo um teste de caminho feliz

Em vez de uma competição para ver quem pensa ou escreve mais casos de teste, é importante pensar com cuidado e implementar primeiro o caso de teste mais importante, o essencial, que, se não passar, não atende às principais necessidades dos usuários do software.

Na aplicação TAT CSC, esse caso de teste é o caminho feliz: o usuário preenche todos os campos obrigatórios com dados válidos, envia o formulário e vê a mensagem de sucesso.

Vamos implementá-lo.

Visão geral dos comandos 📖

Abaixo estão algumas APIs do Playwright que podem ser úteis durante os exercícios.

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

Todo arquivo de teste (spec) começa importando a função test do Playwright (usada para declarar casos de teste e hooks) e o expect (usado para escrever asserções) do executor de testes.

Sintaxe:

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

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('TAT CSC form', () => {
  // 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 navegar até a página sob teste.

Sintaxe:

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

Exemplo:

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

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('successfully submits the form', async ({ page }) => {
  // arrange, act e assert aqui
})

page.goto

Navega a página até uma URL e espera que ela carregue.

Sintaxe:

await page.goto(url)

Exemplo:

// Com o baseURL configurado, um caminho relativo é suficiente
await page.goto('/index.html')

page.getByLabel

Localiza um controle de formulário pelo texto do seu <label> associado. Esta é uma forma acessível e próxima do usuário de encontrar campos.

Sintaxe:

page.getByLabel(text)

Exemplo:

await page.getByLabel('First name')

.fill

Limpa um campo de entrada ou área de texto e digita o valor fornecido nele.

Sintaxe:

await locator.fill(value)

Exemplo:

await page.getByLabel('Email').fill('john.doe@example.com')

page.getByRole

Localiza um elemento pelo seu papel (role) ARIA e nome acessível. Ótimo para botões.

Sintaxe:

page.getByRole(role, { name })

Exemplo:

await page.getByRole('button', { name: 'Send' })

.click

Simula um usuário clicando em um elemento.

Sintaxe:

await locator.click()

Exemplo:

await page.getByRole('button', { name: 'Send' }).click()

expect (asserções web-first)

Cria uma asserção que espera e tenta novamente automaticamente até passar ou expirar o tempo (timeout).

Sintaxe:

await expect(locator).toBeVisible()
await expect(locator).toHaveText(text)

Exemplo:

// Faz asserção de que o elemento está visível
await expect(page.locator('.success')).toBeVisible()

// Faz asserção do texto exato renderizado dentro do elemento
await expect(page.locator('.success')).toHaveText('Message successfully sent.')

Conteúdo sugerido 📚 e links da documentação 🔗

• Writing tests
• Locators
• Actions
• Assertions

Exercício 🎯

Crie um arquivo de teste (por exemplo, tests/tat-csc.spec.ts). Envolva seus testes em um bloco test.describe (por exemplo, com o título TAT CSC form) e use um hook test.beforeEach para navegar até a aplicação antes de cada teste. Depois, dentro de um test, preencha os quatro campos obrigatórios (First name, Last name, Email e "How can we help you?") com dados válidos, clique no botão Send e verifique que a mensagem de sucesso com o texto "Message successfully sent." fica visível.

🙊 Lembre-se de importar test e expect de @playwright/test, de que a mensagem de sucesso é renderizada dentro de um span com a classe success e de que ela desaparece após alguns segundos, então faça a asserção sobre a sua visibilidade logo após o envio.

Execute o teste com npx playwright test para garantir que sua implementação funciona.

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 "Básico de Testes Web com Playwright" com @Walmyr Lima e Silva Filho na @Talking About Testing School, e acabei de implementar meu primeiro teste de ponta a ponta, que garante que a principal funcionalidade da aplicação funciona: preencher um formulário e enviá-lo com sucesso. Aprendi a usar locators, ações e asserções web-first do Playwright. #TalkingAboutTesting #TATSchool #BasicsOfWebTestingWithPlaywright #Playwright #TestAutomation

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