Criando através da interface

Criando através da interface.md

Criando através da interface

Fizemos a criação dos testes digitando todo o código, mas o Playwright tem um interface visual para nos ajudar a construir os testes.
Portanto instale no seu VSCode a extensão "Playwright" da Microsoft (id:ms-playwright.playwright).
Quando a instalação finalizar, procure um ícone como um "tubo de ensaio" no seu VSCode no menu esquerdo.
Clique nele e procure um item no final do menu aberto escrito "Record new" e clique nele.
Um novo arquivo de testes deve ser criado e o navegador será aberto, agora tudo que fizermos no navegador será criado como código no arquivo.

Siga os passos abaixo:

1. Digite na barra de endereços "http://localhost:3000" (nosso projeto e o banco devem estar rodando)
2. Clique em "Acessar Contas"
3. Agora clique no botão "Transferir" da conta "123456"
4. Preencha em "Para:" a conta "654321" e em valor "100.0"
5. Clique em "Salvar" e em "OK" quando o número de recibo aparecer
6. Agora quando a tela voltar para a listagem, clique no botão "Ver" na conta "654321"
7. Volte para o VSCode, procure o botão "Pick locator", clique nele e volte no navegador
8. Selecione o campo "Saldo:" na tela e volte ao VSCode
9. Copie o conteúdo e no final do teste crie a linha abaixo com ele

await expect(page.getByText('Saldo:R$ 1100.00')).toBeVisible();

Agora feche o navegador aberto pelo Playwright e salve o arquivo de testes.
Seu teste deve ficar conforme abaixo

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

test('Transferir valor', async ({ page }) => {
  await page.goto('http://localhost:3000/');
  await page.getByRole('link', { name: 'Acessar Contas' }).click();
  await page.getByTestId('123456-transferir').click();
  await page.locator('#destino').click();
  await page.locator('#destino').fill('654321');
  await page.locator('#valor').click();
  await page.locator('#valor').fill('100.00');
  await page.getByRole('button', { name: 'Salvar' }).click();
  await page.getByTestId('654321-ver').click();
  await expect(page.getByText('Saldo:R$ 1100.00')).toBeVisible();
});

Pode renomear o arquivo criado pelo Playwright para "Transferir.spec.ts".
Agora execute o comando abaixo, ou faça a execução do teste pela extensão do VSCode.

npx playwright test

Pode ser que o teste quebre caso o saldo da conta na sua aplicação esteja diferente do exemplo, caso isso acontecer altere para ficar igual.

Para tornar nossos testes de aceitação mais assertivos, podemos limpar nossa base dados local, antes de executar os testes.
Adicione ao "package.json" em scripts a linha abaixo

"playwright": "npx prisma migrate reset -f && npx playwright test"

Agora execute a linha abaixo

npm run playwright

Como limpamos a base de dados com o Prisma antes de executar nossos testes, isso nos garante que não existirá sujeira no banco de dados.