Teste de automação com Playwright 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. O teste de automação é 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 com exemplos de código. Playwright JavaScript 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 (é gratuito e ótimo para criar seus primeiros testes) o VScode npm install playwright Escrevendo nosso primeiro teste 🍾 Caso de teste Iniciar google.com Pesquisar dramaturgo Verifique o dramaturgo no título após a pesquisa 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 () => { }); }); acontece sempre uma vez antes de todos os testes. É muito útil usar para configurar os requisitos de teste antes dos testes reais. beforeAll Por exemplo, gere dados para testes por meio de API ou inicialize variáveis que você usará nos testes. tem a mesma ideia que beforeAll. afterAll 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 , lançamos o Chrome e navegamos para google.com. beforeAll 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 ⬆️ Encontramos informações em uma página e escrevemos Dramaturgia lá. é um método que você normalmente usará para inserir o valor na entrada que deseja testar. fill await page.fill('id=input', 'Automation testing'); Simulamos pressionando Enter enquanto estamos dentro desta entrada. await page.press('id=input', 'Enter'); Esperamos até que a página carregue. Portanto, não continuaremos testando antes que a página esteja totalmente carregada. await page.waitForNavigation(); Por fim, usamos a função para recuperar o título da página de resultados da pesquisa. title const title = await page.title(); 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 fechamos o navegador depois de todo o teste do afterAll, 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 pelo do HackerNoon por meio do prompt "um desenvolvedor escrevendo código". AI Image Generator
