Criando o teste do nosso projeto

Criando o teste do nosso projeto.md

Criando o teste do nosso projeto

Agora vamos remover este teste do Google e criar um teste para o nosso projeto.
Portanto exclua o arquivo "google.spec.ts" na pasta "e2e" e crie o arquivo "ConsultaConta.spec.ts" com o código abaixo

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

test('Consultar Conta', async ({ page }) => {
  await page.goto('http://localhost:3000/');
  await page.getByRole('link', { name: 'Acessar Contas' }).click();
  await page.getByTestId('123456-ver').click();
  await expect(page.getByText('Saldo:R$ 1000.00')).toBeVisible();
});

Agora precisaremos fazer um ajuste na tela de consulta de contas que está em "pages/contas/index.tsx".
Altere o botão "Ver" e "Transferir" conforme a linha abaixo, adicionando o atributo "data-testid" para que o Playwright encontre os botões na tela

<a href={`contas/${conta.numero}`} data-testid={`${conta.numero}-ver`} className="secondary-btn small">
  &#128065; Ver
</a>
<a href={`contas/${conta.numero}/transferir`} data-testid={`${conta.numero}-transferir`} className="secondary-btn small">
  &#9998; Transferir
</a>

Sua tela deve ficar assim

import React from 'react'
import useSWR from 'swr'

const fetcher = (url) => fetch(url).then((res) => res.json());

export default function ContaIndex() {
  const { data, error } = useSWR('/api/contas', fetcher);

  if (error) return <div>Falha ao carregar</div>
  if (!data) return <div>Carregando ...</div>

  return (
    <>
      <header>
        <h1>Contas</h1>
        <a href="/contas/criar" className="secondary-btn">
          + Criar nova conta
        </a>
      </header>
      <div className="table">
        <div className="row header">
          <div className="cell">Número</div>
          <div className="cell">Saldo</div>
          <div className="cell">Ações</div>
        </div>
        { data.map((conta) => (
          <div className="row" key={conta.numero}>
            <div className="cell" data-title="numero">{conta.numero}</div>
            <div className="cell" data-title="saldo">R$ {conta.saldo.toFixed(2)}</div>
            <div className="cell actions" data-title="actions">
              <div className="action-buttons">
                <a href={`contas/${conta.numero}`} data-testid={`${conta.numero}-ver`} className="secondary-btn small">
                  &#128065; Ver
                </a>
                <a href={`contas/${conta.numero}/transferir`} data-testid={`${conta.numero}-transferir`} className="secondary-btn small">
                  &#9998; Transferir
                </a>
              </div>
            </div>
          </div>
        ))} 
      </div>
      <footer>
        <a href="/" className="secondary-btn">Retornar</a>
      </footer>
    </>
  )
}

Suba o projeto, banco de dados e a migração, caso não estejam rodando, com os comandos abaixo na pasta web

docker compose up -d
npx prisma migrate reset -f
npm run dev

Agora abra outro terminal, vá até a pasta "web" e execute o Playwright

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.