Test Automation · Playwright

Automação com Playwright Automation with Playwright

Este projeto é dedicado ao estudo e prática de automação de testes utilizando o framework Playwright, com foco em aprendizado e desenvolvimento pessoal.

This project is dedicated to the study and practice of test automation using the Playwright framework, focusing on learning and personal development.

Playwright JavaScript E2E Testing Happy · Unhappy path Validação de formulários Fluxo de pagamento


Fluxo de adesão testado Tested enrollment flow

Passo 01Step 01
📦
Seleção de planoPlan selection
Passo 02Step 02
📅
FrequênciaFrequency
Passo 03Step 03
👤
Dados e endereçoData and address
Passo 04Step 04
💳
PagamentoPayment
Passo 05Step 05
ConfirmaçãoConfirmation

Cenários automatizados Automated scenarios

Happy Path
Adesão com sucesso Successful enrollment
Fluxo completo com cartão Visa válido (4242...), dados pessoais e de entrega corretos, finalizando na confirmação de assinatura. Full flow with a valid Visa card (4242...), correct personal and delivery data, finishing with subscription confirmation.
CT001 fluxo completofull flow Assinatura confirmada!Subscription confirmed!
Unhappy Path
Pagamento recusado Payment declined
Fluxo com cartão Mastercard inválido (saldo insuficiente). Sistema deve bloquear a conclusão e exibir a mensagem de erro de recusa. Flow with an invalid Mastercard (insufficient balance). The system must block completion and display the refusal error message.
CT002 cartão inválidoinvalid card Pagamento RecusadoPayment Declined
Validação de camposField validation
Formulário sem dados Empty form
Tentativa de avançar sem preencher dados pessoais e de entrega. Valida que todas as 11 mensagens de erro são exibidas corretamente. Attempt to proceed without filling in personal and delivery data. Validates that all 11 error messages are correctly displayed.
CT003 11 mensagens de erro11 error messages campos obrigatóriosmandatory fields

Validações cobertas nos casos de teste Validations covered in test cases

Dados pessoais e endereço Personal data and address
  • Nome completo obrigatório
  • E-mail com formato válido (presença de @)
  • Telefone com formato e comprimento válidos
  • Nome do bebê obrigatório
  • Idade do bebê obrigatória (seleção)
  • CEP com formato válido e busca automática
  • Endereço, número, bairro, cidade e estado obrigatórios
  • Full name required
  • Valid email format (presence of @)
  • Phone with valid format and length
  • Baby's name required
  • Baby's age required (selection)
  • Valid ZIP code format and automatic lookup
  • Address, number, neighborhood, city, and state required
Pagamento Payment
  • Número do cartão obrigatório e válido
  • Nome no cartão obrigatório
  • Validade no formato MM/AA
  • CVV obrigatório e válido
  • CPF do titular obrigatório e válido
  • Recusa de cartão com saldo insuficiente
  • Bloqueio de avanço com dados inválidos
  • Card number required and valid
  • Name on card required
  • Expiry in MM/YY format
  • CVV required and valid
  • Cardholder CPF required and valid
  • Card refusal due to insufficient balance
  • Block progression with invalid data

Destaques técnicos Technical highlights

Seletores semânticos com getByRole e getByLabel Semantic selectors with getByRole and getByLabel

Ao invés de depender apenas de seletores CSS, o Playwright permite usar getByRole('button', { name: '...' }) e getByLabel() — mais próximos de como o usuário real interage com a interface e menos frágeis a mudanças de layout.

Instead of relying solely on CSS selectors, Playwright allows using getByRole('button', { name: '...' }) and getByLabel() — closer to how a real user interacts with the interface and less fragile to layout changes.

Cobertura de happy e unhappy path no mesmo fluxo Happy and unhappy path coverage in the same flow

Os dois primeiros testes percorrem o fluxo completo de 5 etapas com dados diferentes — um com cartão válido, outro com cartão recusado. Isso garante que tanto o caminho de sucesso quanto o de falha estão cobertos de ponta a ponta.

The first two tests go through the full 5-step flow with different data — one with a valid card, the other with a declined card. This ensures both the success and failure paths are covered end-to-end.

Validação de 11 mensagens de erro simultâneas Validation of 11 simultaneous error messages

O terceiro teste verifica de uma vez todas as mensagens de erro do formulário de dados pessoais e endereço, usando expect(...).toBeVisible() para cada campo — garantindo que nenhuma validação foi omitida pelo sistema.

The third test checks all error messages in the personal data and address form at once, using expect(...).toBeVisible() for each field — ensuring no validation was omitted by the system.


O que aprendi e apliquei What I learned and applied

01

Playwright como ferramenta E2E Playwright as an E2E tool

Automação de fluxos multi-etapa com navegação real em browser, preenchimento de formulários e interações complexas.

Automation of multi-step flows with real browser navigation, form filling, and complex interactions.

02

Seletores semânticos Semantic selectors

Uso de getByRole, getByLabel e getByText para testes mais estáveis e legíveis do que seletores CSS puros.

Use of getByRole, getByLabel, and getByText for more stable and readable tests than pure CSS selectors.

03

Documentação de casos de teste Test case documentation

Escrita de casos formais com objetivo, pré-condições, passos e resultado esperado antes da automação.

Writing formal test cases with objective, pre-conditions, steps, and expected outcome before automation.

04

Validação de fluxos de pagamento Payment flow validation

Teste de cenários com cartão válido e recusado, verificando tanto o caminho de sucesso quanto o tratamento de erro.

Testing scenarios with valid and declined cards, verifying both the success path and error handling.


Repositório no GitHub: GitHub Repository:

Você pode ver o projeto clicando aqui You can see the project by clicking here