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 oficial, poderá encontrar estas características: site 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 (eu uso npm, mas se você quiser usar yarn ou pnpm, leia os ). Ok, agora a instalação faz algumas perguntas: npm init playwright@latest documentos Onde colocar seus testes de ponta a ponta? A opção padrão é mas prefiro usar a pasta . tests e2e Adicionar um fluxo de trabalho do GitHub Actions? A opção padrão é ; nesta demonstração, deixo esta opção como false por enquanto. false Instalar navegadores Playwright (pode ser feito manualmente via 'npx playwright install')? A opção padrão é , e eu usei esse valor true 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 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. playwright.config.ts Execute seu primeiro teste É hora de ver o Playwright em ação, então abra seu terminal novamente e execute o seguinte comando . O resultado é algo assim npx playwright test 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 e adicionar a seguinte configuração playwright.config.ts const config: PlaywrightTestConfig = { ... webServer: { command: "npm run dev", port: 5173, }, ... }; , você deve usar a mesma porta exposta por vite. NB, verifique sua porta executando o comando npm run dev E agora é hora de seu primeiro teste. Abra o arquivo e renomeie-o para . Em seguida, limpe tudo no arquivo e deixe apenas a linha de importação . e2e/example.spec.ts e2e/tit-tac-toe.spec.ts 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 . 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. test 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 e pronto, seu teste acabou ✅ npm run e2e 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 no seu navegador, poderá ver o resultado do seu primeiro teste. npm run e2e:report 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
