Uma introdução à estrutura de teste do dramaturgo

No último período, no ecossistema frontend, uma nova ferramenta e2e surgiu e começou a ficar famosa; seu nome é dramaturgo. Nesta pequena série, quero deixar algumas informações sobre isso e dicas sobre como começar.

O que é?

Vamos começar com o que é dramaturgo. Playwright é uma estrutura de teste para lidar com testes e2e. Com o Playwright podemos escrever testes e2e e executá-los em diferentes navegadores, como Chrome, Firefox e Webkit. Podemos executar nossos testes em várias plataformas como Windows, Mac, Linux ou CI, e podemos escrever testes em Typescript, Javascript, Java, Phyton ou .Net.

Se você abrir o site oficial, poderá encontrar estas características:

• Qualquer navegador Qualquer plataforma Uma API
• Resiliente Sem testes esquisitos
• Sem trocas Sem limites
• Isolamento total Execução rápida
• Ferramentas poderosas

Na minha opinião, a ferramenta reflete todas essas características.

aplicativo TicTacToe

Eu quero usar um aplicativo TicTacToe criado com vite + react nesta série. E você pode encontrá-lo aqui .

Como você pode ver, o aplicativo é simples, mas com ele podemos começar a dar os primeiros passos com o Playwright.

Instalar dramaturgo

O primeiro passo para usar o Playwright é instalá-lo, é fácil. Abra seu terminal e digite npm init playwright@latest (eu uso npm, mas se você quiser usar yarn ou pnpm, leia os documentos ). Ok, agora a instalação faz algumas perguntas:

1. Onde colocar seus testes de ponta a ponta? A opção padrão é tests mas prefiro usar a pasta e2e .
2. Adicionar um fluxo de trabalho do GitHub Actions? A opção padrão é false ; nesta demonstração, deixo esta opção como false por enquanto.
3. Instalar navegadores Playwright (pode ser feito manualmente via 'npx playwright install')? A opção padrão é true , e eu usei esse valor

4. 
   

e agora você tem que esperar até que a instalação termine. Quando a instalação estiver concluída... parabéns, você está pronto para colocar a mão na massa com o Playwright!

Primeira vista

A instalação criou em seu repositório 3 novos arquivos:

• playwright.config.ts

• e2e/example.spec.ts

• testes-exemplos/demo-todo-app.spec.ts

  
  

Vamos começar com o último, o mais fácil 😊 Este arquivo contém uma lista de exemplos de como você pode escrever testes com o Playwright. Ele usa um aplicativo criado pela equipe do dramaturgo (um aplicativo de tarefas simples) e ilustra como você pode interagir com sua página.

Continuando com o segundo. Este arquivo é um exemplo rápido de alguns testes no site do dramaturgo, mas está aqui apenas como um espaço reservado para seus testes.

E agora, o primeiro, o mais importante. Playwright usa o arquivo playwright.config.ts para entender sua configuração. Dentro dele, você encontra configurações sobre a pasta de teste, o tempo limite usado pela função expect, as configurações dos navegadores usados pelo Playwright para executar os testes e muito mais.

Execute seu primeiro teste

É hora de ver o Playwright em ação, então abra seu terminal novamente e execute o seguinte comando npx playwright test . O resultado é algo assim

O dramaturgo neste relatório mostra o resultado de sua execução e você pode verificar se tudo correu bem. O relatório mostra o resultado para cada navegador indicado na configuração, neste caso: Chromium, Firefox e Webkit.

Escreva seu primeiro teste

Legal, mas agora é hora de você escrever seu primeiro teste com o Playwright. Antes de fazer isso, você deve configurar o Playwright para poder executar seu aplicativo antes de iniciar os testes. Para fazer isso, você deve abrir o playwright.config.ts e adicionar a seguinte configuração

 const config: PlaywrightTestConfig = { ... webServer: { command: "npm run dev", port: 5173, }, ... };

NB, verifique sua porta executando o comando npm run dev , você deve usar a mesma porta exposta por vite.

E agora é hora de seu primeiro teste. Abra o arquivo e2e/example.spec.ts e renomeie-o para e2e/tit-tac-toe.spec.ts . Em seguida, limpe tudo no arquivo e deixe apenas a linha de importação import { expect, test } from "@playwright/test"; .

Agora adicione seu primeiro teste

 test("show tic tac toe page", async ({ page }) => { await page.goto("/"); await expect(page).toHaveTitle("Tic Tac Toe"); });

ok, vamos ver este teste juntos. Em primeiro lugar, você pode indicar ao Dramaturgo que é um teste usando a função test . Como em toda estrutura de teste, o primeiro parâmetro da função de teste é o nome do teste. O segundo parâmetro é a função para testar nosso aplicativo. Usando o Playwright, essa função é sempre uma função assíncrona porque seus testes nesses casos são sempre assíncronos. O primeiro comando neste exemplo é um comando para dizer ao Playwright para navegar até a página inicial do nosso aplicativo. Como você pode ver, este comando já é assíncrono. Agora, se o teste pode navegar para esta página, você deseja testar se o título da página é "Tic Tac Toe". Sim, é elementar, mas um excelente exemplo de dar o primeiro passo.

Agora é hora de verificar se o teste roda no Playwright, mas antes disso você pode simplificar a interação com o Playwright adicionando um novo script no package.json, conforme mostrado aqui

 .... "scripts": { ... "e2e": "playwright test" },

Agora no seu terminal, você pode digitar npm run e2e e pronto, seu teste acabou ✅

Adicionando outro script em seu package.json, você pode abrir o resultado do relatório em seu navegador

 .... "scripts": { ... "e2e": "playwright test", "e2e:report": "playwright show-report" },

E agora, se você executar o comando npm run e2e:report no seu navegador, poderá ver o resultado do seu primeiro teste.

Ok, acho que é tudo por agora. Neste post, você aprendeu:

• Como instalar o Playwright
• Como executar seu teste
• Como escrever seu primeiro teste com o dramaturgo

No próximo post continuaremos nossa jornada no mundo do Dramaturgo, mas por enquanto é só! Até breve, pessoal.

Bye Bye

ps Você pode encontrar o resultado deste post neste link