Desafio final: UI e API juntos

Não é um módulo novo nem uma prova de múltipla escolha: é um exercício prático que combina tudo que a trilha ensinou, UI (Módulos 1 a 4) e API (Módulo 5), no mesmo teste.

A ideia

Um cenário real de QA raramente fica numa camada só: você usa a API pra preparar ou mudar um dado rapidamente, e a UI pra confirmar que a pessoa que usa o produto realmente vê o que deveria ver. Este desafio pratica exatamente isso, três vezes: criar, editar e excluir um produto pela API, conferindo cada mudança na tela do site de treino.

O que fazer

Em tests/06_desafio_final.spec.js (o arquivo já existe, com os três testes como test.skip e comentários explicando cada passo), implemente:

Criar produto via API e ver ele na loja. Via request.post (com o header Authorization), crie um produto com nome "Produto do desafio", preço 42, categoria (qualquer uma das que GET /api/categorias devolve, é obrigatória) e o emoji que quiser. Guarde o id da resposta. Pelo navegador (LoginPage.pularLogin + page.goto), abra /produto.html?id=<id> e confira que o product-detail-title mostra exatamente "Produto do desafio".
Mudar o preço via API e ver refletido na tela. Via request.put, mude o preço do mesmo produto pra 123.45. Pelo navegador, abra a mesma página de novo e confira que product-detail-price contém "123.45" (o site formata como "R$ 123.45", com ponto, não vírgula).
Excluir via API e confirmar que some da loja. Via request.delete, apague o produto. Pelo navegador, abra a mesma página de novo e confira que o título agora é "Produto não encontrado" (é assim que produto.html reage quando o GET volta com item: null).

Use test.describe.serial (Módulo 5) pros três testes, já que trabalham no mesmo produto, um atrás do outro. Rode npx playwright test tests/06_desafio_final.spec.js e depois python verificar.py final até todos os critérios ficarem [ok]. Gabarito em trilha-7/GABARITO.md, só olhe depois de tentar.

📁 Ver estrutura de pastas da trilha-7/

trilha-7/
├── playwright.config.js
├── package.json
├── verificar.py
├── GABARITO.md
├── README.md
├── fixtures/
│   └── exemplo.png
├── pages/
│   ├── LoginPage.js   ← pularLogin() usado aqui
│   ├── CadastroPage.js
│   ├── ProdutosPage.js
│   ├── ProdutoPage.js
│   └── RedePage.js
└── tests/
    ├── 01_primeiro_teste.spec.js
    ├── 02_selecionadores.spec.js
    ├── 03_cenarios.spec.js
    ├── 04_rede_ci.spec.js
    ├── 05_api.spec.js
    └── 06_desafio_final.spec.js   ← este desafio

Olhar de QA

Se os três testes passarem, você praticou o mesmo raciocínio que um QA usa no trabalho real o tempo todo: a API é a forma rápida de colocar o sistema num estado específico (sem depender de clicar em formulário pra chegar lá), e a UI é o que confirma que esse estado chega certo pra quem usa o produto. É também o encerramento natural da trilha: Módulo 1 ensinou o primeiro teste, Módulo 2 ensinou a organizar, Módulos 3 e 4 cobriram os cenários de UI mais difíceis, e o Módulo 5 trouxe a camada de API. Este desafio junta tudo isso num cenário só, que é como automação de verdade costuma se parecer.

Terminou o desafio final? Marque: o ✓ aparece no índice da trilha e a barra de progresso anda no começo do site. Fica salvo só no seu navegador.