Playwright

[ipetinate]

GHub

Pesquise repositórios e usuários do GitHub.

Objetivo

Motivação para criar o projeto

• Este projeto foi criado como exemplo para uma decisão técnica sobre a escolha de ferramentas de teste.
• Irei criar branchs separadas para testar diferentes implementações de bibliotecas de teste, como exemplo o Vitest, Cypress, Jest, Axios Mock Adapter, MSW, Playwright.

Tecnologias

O que foi utilizado neste exemplo?

• Next.js
• TailwindCSS
• HeroIcons
• HeadlessUI
• Flowbite
• Axios
• React Query
• Zustand
• Lodash

Instalação [PLAYWRIGHT]

Como foi instalar o playwright? O que achei de implementar testes como ele?

1. Executar comando de init para configurar o ambiente de testes

   # npm
   npm init playwright@latest
   
   # yarn
   yarn create playwright
   
   # pnpm
   pnpm dlx create-playwright

   1. O comando acima, fará algumas perguntas:

      1. Aonde você quer por os testes: escolhi a pasta tests na raiz, igual ele sugere por padrão.
      2. Se quer configurar o fluxo do Github Actions: eu não quis, pois não irei utilizar o GH Actions, mas caso queira, é só apertar y
      3. Instalar browsers do Playwright: eu escolhi sim

      

   2. Após a execução do terminal concluir, alguns arquivos serão criados no seu projeto:

      

2. Como o Playwright é uma tecnologia desenvolvida pela Microsoft, o VS Code possui uma extensão dedicada para ele. E após o a configuração ele irá sugerir que você instale a extensão oficial, caso queira, clique em install

   

   

3. Execução dos testes

   1. Vamos adicionar um comando para executar nossos testes, adicione a linha abaixo na seção scripts do seu package.json

      "test:e2e": "playwright test"

   2. Execute o comando em um terminal

      npm run test:e2e

      

   3. Os testes de exemplo executaram com sucesso (agora podemos implementar nossos testes e ver se tudo está funcionando corretamente)

      

4. Implementar nossos testes

   1. Home

      import { test, expect } from '@playwright/test'
      
      test.beforeEach(async ({ page }) => {
          await page.goto('http://localhost:3000')
      })
      
      test.describe('Home Page', () => {
          test('Visit home', async ({ page }) => {
              await expect(page).toHaveTitle(/GHub/)
      
              const welcomeText = page.getByText('Olá, bem-vindo ao GHub')
              const subWelcomeText = page.getByText(
                  'Encontre usuários ou repositórios do GitHub'
              )
      
              const usersLink = page.getByTestId('Usuários')
              const reposLink = page.getByTestId('Repositórios')
      
              expect(welcomeText).toBeDefined()
              expect(subWelcomeText).toBeDefined()
      
              expect(usersLink).toBeDefined()
              expect(reposLink).toBeDefined()
          })
      
          test('On home, visit Users page', async ({ page }) => {
              await page.goto('http://localhost:3000')
      
              // Click the get started link.
              await page.getByTestId('Usuários').click()
      
              // Expects the URL to contain intro.
              await expect(page).toHaveURL(/.*users/)
          })
      
          test('On home, visit Repos page', async ({ page }) => {
              await page.goto('http://localhost:3000')
      
              // Click the get started link.
              await page.getByTestId('Repositórios').click()
      
              // Expects the URL to contain intro.
              await expect(page).toHaveURL(/.*repos/)
          })
      })

Plugin do VSCode

Experiência utilizando o plugin oficial

• Gostei do plugin, como o Playwright aparentemente (ao menos não achei nada sobre) não possui um modo de watch, o plugin facilita a execução dos testes, e evita ficar usando o terminal o tempo todo.

• Como pode ser visto na imagem abaixo, o plugin é bem completo, tem um menu lateral que agrega os testes, e ao abrir o arquivo ele mostra um ícone para executar aquele bloco de teste. E quando executa com sucesso, ele mostra um ícone de sucesso ao lado do teste.

  

  1. Rodando os testes via plugin

     Gravacao.de.Tela.2023-03-21.as.10.55.52.mov

  2. Simulando erro

     Gravacao.de.Tela.2023-03-21.as.11.11.48.mov

Problemas e Erros

1. O locator getByRole() não encontra os links da home page, apesar de estarem acessíveis, e o Cypress ter conseguido localizá-los normalmente, tentei várias abordagens, mas não funciona. No lugar eu utilizei o .getByTestId() (não queria, mas foi o que funcionou).
2. O matcher .tobeInViewport() não funcionou com as queries que eu estava fazendo, não sei se foi uso errado, ou se algo precisava ser configurado, no lugar usei .toBeDefined() (mas não sei sobre a eficacia).