dramwright é uma ferramenta de ponta de ponta a ponta da estrutura-estrutura (também conhecida como E2E ou teste de integração) para aplicativos da web. O dramaturgo tem uma ótima experiência do desenvolvedor e torna a escrita boa e resiliente às mudanças, testes diretos.

1. Instale o dramaturgo

para configurar o dramaturgo, execute o seguinte comando:

npm init playwright@latest

você será guiado através de um assistente de configuração no seu terminal. Quando solicitado com "onde colocar seus testes de ponta a ponta?" , você pode defini-lo como SRC/Tests (conforme recomendado nos tutoriais anteriores).

Adicione scripts ao package.json

No seu package.json, adicione os dois scripts a seguir para executar testes de dramaturgo:

isso permite que você execute os testes em ambientes de desenvolvimento e IC.

Configuração do dramaturgo

O arquivo dramwright.config.ts deve ser configurado da seguinte forma:

Mudanças de chave na configuração:

• use.baseurl : isso define o URL base do seu servidor de desenvolvimento, para que você não precise escrevê -lo em todos os testes.
• WebServer : Este bloco descreve como iniciar seu servidor de desenvolvimento. Ele reutilizará um servidor já executado, a menos que você esteja em um ambiente de CI.
• testDir : o diretório em que o dramaturgo deve procurar seus testes E2E (neste caso, src/tests/e2e).

2. Configure RSU para teste de navegador

até agora, o RSW foi configurado para zombar de respostas da API em um ambiente Node.js. No entanto, como o dramwright usa um navegador real para testes, você precisa configurar o RSW para trabalhar no ambiente do navegador.

Crie um novo módulo JavaScript que registrará o MSW Service Worker para testes baseados em navegador:

3. Registre o trabalhador no modo de desenvolvimento

Para iniciar o trabalhador de RSW quando o aplicativo estiver em execução no modo de desenvolvimento, adicione o seguinte ao módulo raiz do seu aplicativo (por exemplo, src/main.tsx):

Certifique -se de definir a variável de ambiente vite_api_mock no seu arquivo .env:

VITE_API_MOCK="true"

4. Escreva um teste E2E

agora você pode escrever um teste E2E para um fluxo no seu aplicativo. Aqui está um exemplo de teste de dramaturgo:

5. executando o teste

Para executar o teste E2E, use o seguinte comando:

npm run test:e2e:ci

Isso executará o teste no modo CI, que é útil para pipelines automatizados.