Do manual ao automatizado: escreva seu primeiro teste com dramaturgo

Teste de automação com Playwright

O teste de automação está ganhando popularidade a cada dia, e muitas ferramentas estão disponíveis para ajudá-lo a ser um mestre nisso. Às vezes, a parte mais difícil é escolher o correto.

Playwright é uma ótima ferramenta que está ganhando popularidade devido à sua flexibilidade e facilidade de uso, especialmente com JavaScript. Dramaturgo considerado um dos mais rápidos para executar testes de interface do usuário. Neste artigo, discutiremos o processo de escrever seu primeiro teste com o Playwright usando JavaScript com exemplos de código.

Instalando o dramaturgo

Antes de começarmos a escrever nosso primeiro caso de teste, você precisa instalar o Playwright. Você pode fazer isso executando o seguinte comando em seu terminal dentro do IDE. Eu também recomendaria instalar o VScode (é gratuito e ótimo para criar seus primeiros testes)

 npm install playwright

Escrevendo nosso primeiro teste 🍾

Caso de teste

1. Iniciar google.com
2. Pesquisar dramaturgo
3. Verifique o dramaturgo no título após a pesquisa
4. Fechar navegador

Vamos começar a escrever a arquitetura do nosso teste primeiro.

 const { chromium } = require('playwright'); describe('Google Search Test', () => { let browser; let page; beforeAll(async () => { }); afterAll(async () => { }); it('should return result search in google ', async () => { }); });

beforeAll acontece sempre uma vez antes de todos os testes. É muito útil usar para configurar os requisitos de teste antes dos testes reais. Por exemplo, gere dados para testes por meio de API ou inicialize variáveis que você usará nos testes.

afterAll tem a mesma ideia que beforeAll.

Acontece depois de todos os testes apenas uma vez. Você pode usar para fechar um navegador ou executar algumas ações para limpar os dados após a execução dos testes.

Precisamos dessas variáveis para trabalhar com um navegador e página posteriormente.

 let browser; let page;

Este é um corpo de teste, onde escreveremos nosso teste real.

 it('should return result search in google ', async () => { });

Vamos adicionar a abertura de um navegador dentro de beforeAll

 beforeAll(async () => { browser = await chromium.launch(); // here you can use any other browser if you want page = await browser.newPage(); await page.goto('https://www.google.com'); });

No beforeAll , lançamos o Chrome e navegamos para google.com.

Vamos adicionar um corpo de teste

 it('should return search results', async () => { await page.fill('id=input', 'Automation testing'); // you an search any other text here await page.press('id=input', 'Enter'); await page.waitForNavigation(); const title = await page.title(); expect(title).toContain('Automation testing'); });

Nosso resultado ⬆️

1. Encontramos informações em uma página e escrevemos Dramaturgia lá. fill é um método que você normalmente usará para inserir o valor na entrada que deseja testar.

 await page.fill('id=input', 'Automation testing');

2. Simulamos pressionando Enter enquanto estamos dentro desta entrada.

 await page.press('id=input', 'Enter');

3. Esperamos até que a página carregue. Portanto, não continuaremos testando antes que a página esteja totalmente carregada.

 await page.waitForNavigation();

4. Por fim, usamos a função title para recuperar o título da página de resultados da pesquisa.

 const title = await page.title();

5. Usando assertion, verificamos se o título contém Playwright (ou outra string que estávamos procurando para confirmar que redirecionamos para a página correta)

 expect(title).toContain('Automation testing');

Vamos adicionar o fechamento do navegador dentro de afterAll

 afterAll(async () => { await browser.close(); });

Dentro do afterAll, fechamos o navegador depois de todo o teste

Executando seu teste

Isso executará todo o seu teste

 npx playwright test

Se você deseja executar um arquivo de teste específico

 npx playwright test your-file.js

Quando você executa seus testes, o Playwright também gera relatórios HTML, que são muito úteis para depuração. Ele divide seu teste em etapas e, se você tiver um teste com falha, sempre poderá ver onde a falha ocorreu e depurá-la mais rapidamente.

Execute isso para abrir seu relatório

 npx playwright show-report

A imagem principal deste artigo foi gerada peloAI Image Generator do HackerNoon por meio do prompt "um desenvolvedor escrevendo código".