Venho testando e escrevendo código há dez anos e, nos últimos quatro anos, testando relatórios no comitê de programa da conferência Heisenbug. Hoje vou falar sobre testes de ponta a ponta, acessibilidade entre navegadores e a emoção de usar o Playwright versão 0.10.0.De ponta a ponta
Por que precisamos de testes de ponta a ponta? Eles controlam o navegador e simulam ações do usuário. Por exemplo, descrevi scripts personalizados e quero que eles sejam testados com cada versão do produto. A verificação manual de todos os scripts para todas as versões é mais cara e mais longa que a automática.Existem diferentes ferramentas: Selênio, Titereiro, Transferidor, Cipreste e outros. Duas semanas atrás, uma nova ferramenta foi lançada - Playwright, que foi trabalhada por Andrey Lushnikov, o desenvolvedor do Puppeteer. Esta biblioteca resolve completamente o problema de escrever testes entre navegadores.
O tweet original de Andrey Lushnikov com o anúncio.Puppeteer vs. Dramaturgo
Eu usei o Puppeteer em vários projetos, e no geral não foi ruim. Além disso, lembrei-me de que, no final do ano passado, o Puppeteer tinha um grande lançamento da versão 2.0 . Mas quando olhei para o repositório dele , vi uma imagem interessante:
parece que não sou daltônico, mas um pouco demais vermelho.Eu me perguntava por que o Playwright é melhor - uma nova ferramenta que repousa perfeitamente no GitHub em uma organização da Microsoft.Por que Puppeteer é bom? Ele lança um navegador sem cabeça e usa o protocolo DevTools , para que os testes sejam mais rápidos e estáveis que o Selenium, e você pode escrevê-los em um agradável JavaScript .O que é bom no dramaturgo? Em primeiro lugar, tem todos os pãezinhos de marionetistas. Em segundo lugar, permite escrever testes entre navegadores - você pode selecionar qualquer navegador no código de teste : WebKit , Chromium e Firefox.Um momento de auto-educação: mecanismos de navegador O que é necessário para escrever um teste entre navegadores no Playwright? Eu precisava de Npm , Habr experimental, inglês escolar para ler documentação, uma xícara de café e 15 minutos e meio.Instale o dramaturgo . Escrevemos no console:npm i playwrightScreenshot Habr. Copie o exemplo da documentação:const playwright = require('playwright');
(async () => {
for (const browserType of ['chromium', 'firefox', 'webkit']) {
const browser = await playwright[browserType].launch();
const context = await browser.newContext();
const page = await context.newPage('http://habr.com/');
await page.screenshot({ path: `screenshots/example-${browserType}.png` });
await browser.close();
}
})();
O código no Puppeteer seria quase o mesmo:const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://habr.com');
await page.screenshot({path: 'screenshots/example.png'});
await browser.close();
})();
O teste do primeiro exemplo será executado em três navegadores. É verdade que não está claro em quais versões específicas e quais estão geralmente disponíveis. A documentação diz que o Playwright baixa automaticamente o driver do navegador. Você também pode especificar um navegador específico: const browser = await chromium.launch();
const context = await browser.newContext();
Para selecionar a versão do navegador no Puppeteer, você precisa especificar o caminho para o driver. Não existe essa possibilidade no PlayWright. Pelo que entendi, a versão mais recente do mecanismo sempre será usada, o que já está sendo discutido no GitHub.A propósito, se você gosta de testes de captura de tela, tenha cuidado. O dramaturgo e o Puppeteer fazem capturas de tela diferentes no Chromium:
por algum motivo, as fontes têm tamanhos diferentes. Comecei um ticket no GitHub.O Playwright suporta o WebKit, o que significa testes em navegadores móveis. Mas todos os smartphones e tablets têm resoluções diferentes - como escolher os que você precisa ao executar testes? Encontrei 76 dispositivos no código deviceDescriptors.ts , incluindo modelos popularesBlackBerry e JioPhone 2. De útil: você pode escolher o iPhone 8 e o iPhone 8 no modo paisagem. O código de teste é quase o mesmo que o teste para um navegador comum:const { webkit, devices } = require('playwright');
const deviceType = devices['iPhone 8'];
(async () => {
const browser = await webkit.launch();
const context = await browser.newContext({
viewport: deviceType.viewport,
userAgent: deviceType.userAgent
});
const page = await context.newPage('http://habr.com');
await page.screenshot({ path: `example-${deviceType.name}.png`});
await browser.close();
})();
Uma característica interessante do Playwright é a capacidade de alterar a localização geográfica, que será útil ao testar mapas. Ao inicializar o contexto do navegador, você precisa especificar as coordenadas:const context = await browser.newContext({
viewport: iPhone11.viewport,
userAgent: iPhone11.userAgent,
geolocation: { longitude: 12.492507, latitude: 41.889938 },
permissions: { 'https://yandex.ru/maps': ['geolocation'] }
});
Este não é o meu primeiro ano de teste e às vezes gosto de ver como o teste passa. O operador de marionetes tinha uma opção headless: falseque lançava uma janela do navegador. Exatamente a mesma opção está no Playwright:puppeteer.launch({headless: false});
playwright.launch({headless: false});
Como o código de teste nas duas bibliotecas é assíncrono, você não pode simplesmente obtê-lo. Há um parágrafo inteiro na documentação do Puppeteer , mas nada na documentação do Playwright. Além disso, não há exemplos de código na documentação do Playwright, mas há um ticket no GitHub. Parece um bom motivo para participar de um projeto de código aberto. E os exemplos deste artigo sobre Playwright e Jest eu coloquei no meu repositório .Está na hora de mudar?
Parece que os desenvolvedores do Playwright estão prontos para adicionar rapidamente recursos e corrigir bugs. Por exemplo, o download de arquivos não funciona no momento, mas os desenvolvedores escrevem que o consertarão e não será pior que o do Puppeteer. Se você deseja portar testes para o Playwright, esteja preparado para iniciar tickets.Parece que a equipe do dramaturgo deseja reunir o melhor desta biblioteca. Nos tickets do GitHub, encontrei várias idéias para melhorar a API - por exemplo, adicionando recursos como no Cypress .O Playwright suporta vários navegadores e é mais conveniente escrever testes entre navegadores com ele. É verdade que agora ele tem a versão 0.10.0, não há muita documentação, e o SlackOverflow tem apenas seis perguntas. Eu recomendo que você assista os lançamentos do Playwright de perto, mas não se apresse em usá-lo ainda em produção, pois a API pode mudar.Desenvolvedor Playwright on Heisenbug
Compartilho a notícia: Andrei Lushnikov fará uma palestra sobre Dramaturgo na conferência Heisenbug 2020 Piter, que será realizada de 8 a 9 de abril em São Petersburgo. Há muitas perguntas para ele:- por que a nova biblioteca se chama Playwright e de onde vem o drama
- quando os exemplos aparecerão na documentação e quanto tempo aguardará o lançamento da versão 1.0
- qual é a probabilidade de que os selos no repositório Puppeteer fiquem verdes
UPD: Uma entrevista com Andrei Lushnikov “Se os sites funcionam melhor, será perfeito” acaba de ser lançada . Nele, conversamos muito sobre protocolos, mecanismos de navegador e integrações externas.Os ingressos estão no site da Heisenbug . Opiniões sobre Dramaturgo e Marionetista - escreva nos comentários.
E se você ler o post até o final, mas por algum motivo não estiver familiarizado com o Puppeteer, veja o relatório de Andrey da última conferência Heisenbug, onde ele falou sobre o Puppeteer por 55 minutos.