Vamos admitir, criar testes automatizados não é a coisa mais divertida na vida de um desenvolvedor. Como desenvolvedores, queremos criar recursos, corrigir bugs e melhorar o mundo! No entanto, quando os testes automatizados não estão disponíveis nos nossos fluxos de trabalho, a longo prazo, as coisas ficam um pouco complicadas. Por isso, também achamos importante criar testes automatizados.
Com o painel Gravador no Chrome DevTools, é possível gravar e reproduzir fluxos de usuários, exportá-los para vários formatos (por exemplo, scripts de teste) com diferentes extensões e bibliotecas de terceiros, personalizar os fluxos de usuários com a biblioteca Puppeteer Replay e integrá-los aos fluxos de trabalho atuais.
Nesta postagem do blog, falaremos sobre:
- Como exportar e reproduzir fluxos de usuários de maneira programática.
- Como personalizar os fluxos de usuário com a ajuda do Puppeteer Replay.
- Como fazer a integração com seus fluxos de trabalho de CI/CD.
Esta postagem do blog pressupõe que você já conhece os conceitos básicos do Gravador. Se você é novo no Gravador, siga este breve tutorial introdutório e este guia em vídeo para começar.
Exportar fluxos de usuários e reproduzir de maneira programática
Por padrão, o Gravador permite exportar essas gravações como um script Puppeteer ou Puppeteer Replay ou como um arquivo JSON simples.
Depois de exportar os fluxos de usuários como arquivos JSON, é possível importá-los de volta para o painel do Gravador e reproduzi-los ou usar bibliotecas externas para reproduzi-los. Puppeteer Replay é uma das bibliotecas disponíveis.
Replay com o Puppeteer Replay
Siga as instruções no repositório para instalar o Puppeteer Replay.
Digamos que você salve seus fluxos de usuário JSON na pasta recordings (por exemplo, projeto de demonstração). Use o comando a seguir para executar um ou mais fluxos de usuário:
# replay one user flow
npx @puppeteer/replay ./recordings/order-a-coffee.json
# replay all user flows under recordings folder
npx @puppeteer/replay ./recordings/*.json
Se quiser, adicione um script de npm para executar as gravações. Adicione esta linha ao campo scripts no package.json:
"replay-all": "replay recordings"
Com isso, é possível executar npm run replay-all na linha de comando para reproduzir todas as gravações.
A repetição dos fluxos de usuários sem interface por padrão (também conhecida como modo headless). Se você quiser ver a interface, defina a variável de ambiente PUPPETEER_HEADLESS como falsa antes de executar o comando.
PUPPETEER_HEADLESS=false npm run replay-all
Repetir com bibliotecas de terceiros
Algumas bibliotecas de terceiros podem ser usadas para reproduzir o vídeo fora do navegador Chrome. Consulte a lista completa de bibliotecas.
Por exemplo, o TestCafe (em inglês) é um framework de testes completo. Ele é compatível com a repetição de fluxos de usuários JSON com o Safari e muito mais.
npm install -g testcafe
# replay with selected browsers
testcafe safari ./recordings/order-one-coffee.json
testcafe firefox ./recordings/order-one-coffee.json
testcafe chrome ./recordings/order-one-coffee.json
# replay with all browsers
testcafe all ./recordings/order-one-coffee.json
Por outro lado, o Saucelabs é uma plataforma de testes baseada na nuvem. Ele oferece suporte à repetição de fluxos de usuários JSON com diferentes navegadores e versões na nuvem.
Este é um exemplo de arquivo de configuração no Saucelabs. Confira o repositório de demonstração.
apiVersion: v1alpha
kind: puppeteer-replay
suites:
- name: "order a coffee"
recordings: [ "recordings/order-a-coffee.json" ]
…
Exportar fluxos de usuários com extensões diferentes
Além das opções padrão, também é possível instalar extensões para exportar fluxos de usuários para formatos diferentes.
Por exemplo, você pode registrar e exportar os fluxos de usuários como um script personalizado WebPageTest. Com o script, você pode testar o desempenho dos fluxos de usuários em várias etapas nos seus aplicativos. No entanto, escrever esses scripts pode ser um desafio.
Além disso, se você já tem ferramentas de teste implementadas, há extensões para exportar fluxos de usuários para diferentes scripts de teste, como Cypress, Nightwatch, WebdriverIO, Testing Library e muito mais. Confira a lista completa. Isso pode ajudar você e sua equipe a começar a programar testes mais rapidamente.
Transformar em diferentes scripts de teste de maneira programática
Além das extensões, a maioria desses provedores de teste também publica bibliotecas para ajudar a converter vários fluxos de usuários JSON de maneira programática.
Por exemplo, use as bibliotecas @cypress/chrome-recorder para exportar fluxos de usuários para testes do Cypress.
npm install -g @cypress/chrome-recorder
npx @cypress/chrome-recorder ./recordings/*.json
Repetir fluxos de usuários com extensões
A partir do Chrome 112, você pode melhorar sua experiência usando extensões para reproduzir gravações. Essas extensões permitem integrar perfeitamente serviços e infraestrutura de terceiros para reproduzir gravações sem sair do DevTools.
Para começar, consulte a lista de extensões disponíveis ou saiba como criar sua própria extensão personalizada.
Criar suas próprias extensões ou bibliotecas
Em segundo plano, todas as extensões e bibliotecas são criadas com base na biblioteca Puppeteer Replay. Além de permitir que você reproduza os fluxos de usuário, o Puppeteer Replay oferece APIs que permitem personalizar ou transformar a repetição dos fluxos de usuário.
Personalizar a repetição dos fluxos de usuários
Vamos criar um plug-in de captura de tela. Para cada fluxo de usuário, queremos:
- Faça uma captura de tela ao final de cada etapa e salve-a na pasta
_screenshots. - Para enviar uma mensagem quando a execução do fluxo do usuário for concluída.
Este é o snippet de código. Você pode fazer o download desta demonstração e testar o app também.
/* screenshot-plugin.mjs */
import { mkdirSync } from "fs";
import { PuppeteerRunnerExtension } from "@puppeteer/replay";
// create folder if not exist
let screenshotFolder = "_screenshots";
mkdirSync(screenshotFolder, { recursive: true });
export default class ScreenshotPlugin extends PuppeteerRunnerExtension {
count = 0;
async afterEachStep(step, flow) {
await super.afterEachStep(step, flow);
this.count = this.count + 1;
const path = `${screenshotFolder}/${flow.title}-${this.count}.png`;
await this.page.screenshot({ path });
console.log(`Saved screenshot as ${path}`);
}
async afterAllSteps(step, flow) {
await super.afterAllSteps(step, flow);
console.log("Operation completed successfully.");
}
}
O código é bastante expressivo por si só. Estendemos a API PuppeteerRunnerExtension para salvar a captura de tela após cada etapa e registrar uma mensagem após todas elas.
Salve o arquivo e execute os fluxos de usuários com essa extensão usando o seguinte comando:
# replay one user flow with plugin
npx @puppeteer/replay --extension ./screenshot-plugin.mjs ./recordings/order-a-coffee.json
# replay all user flows with plugin under recordings folder
npx @puppeteer/replay --extension ./screenshot-plugin.mjs ./recordings/*.json
Esta é a saída:
Saved screenshot as _screenshots/order-a-coffee-1.png
Saved screenshot as _screenshots/order-a-coffee-2.png
Saved screenshot as _screenshots/order-a-coffee-3.png
…
Operation completed successfully.
Transformar fluxos de usuários
Outra maneira de personalizar o fluxo do usuário é transformá-lo em formatos diferentes (por exemplo, scripts de teste Cypress ou Nightwatch).
Por exemplo, seu fluxo de usuário contém uma etapa para navegar até um URL. O arquivo JSON tem esta aparência:
{
"title": "order-a-coffee",
"steps": [
{
"type": "navigate",
"url": "https://coffee-cart.netlify.app/"
},
…
]
}
Você pode criar um plug-in stringify para transformar a etapa em JavaScript. Você também pode conferir outras bibliotecas para saber como elas fazem isso.
Por exemplo, o snippet de código a seguir mostra como o WebdriverIO transforma a etapa de navegação:
export class StringifyPlugin extends PuppeteerStringifyExtension {
#appendStepType(out: LineWriter, step: Step, flow: UserFlow) {
switch (step.type) {
case 'navigate':
return out.appendLine(`await browser.url(${formatAsJSLiteral(step.url)})`)
…
}
Quando você executa o plug-in com os fluxos de usuários, a linha de navegação é convertida em await browser.url(‘https://coffee-cart.netlify.app/’).
Personalizar a experiência de repetição do DevTools
As extensões de reprodução oferecem uma maneira de reproduzir gravações usando infraestrutura e serviços de terceiros, tudo sem sair do Gravador do DevTools.
Para criar sua própria extensão de repetição, consulte a documentação da extensão de repetição e veja uma extensão de exemplo para ver orientações.
Publicar extensões do Chrome
Depois de personalizar e transformar os fluxos de usuários, você pode empacotá-los como uma extensão do Chrome e publicá-los na Chrome Web Store.
Confira esta demonstração e as instruções para aprender como depurar localmente e publicar uma extensão do Google Chrome.
Integre com seu pipeline de CI/CD
Há várias maneiras de fazer isso e muitas ferramentas por aí. Confira um exemplo de como automatizar esse processo com ações do GitHub:
# .github/node.js.yml
name: Replay recordings
on:
push:
branches: [ "main" ]
schedule:
- cron: '30 12 * * *' # daily 12:30pm
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Use Node.js
uses: actions/setup-node@v3
with:
node-version: 18.x
cache: 'npm'
- run: npm install puppeteer
- run: npm run replay-all
- run: npm run start
Neste exemplo, reproduziremos os fluxos de usuário quando:
- As novas mudanças são enviadas para a ramificação
main - todos os dias às 12h30
Além do GitHub Actions, você também pode fazer a integração com seus provedores de nuvem favoritos. Acesse esta demonstração para saber como usar o job do Google Cloud Run para executar até 10.000 fluxos de usuários em paralelo.
Conclusão
Nesta postagem do blog, discutimos as diferentes opções para exportar fluxos de usuários como arquivos JSON, personalizar repetições com PuppeteerReplayExtension, transformar fluxos de usuários com PuppeteerStringifyExtension e integrá-los aos fluxos de trabalho de CI.
Espero que esta postagem do blog tenha dado algumas ideias sobre como usar o painel do Gravador e as ferramentas fornecidas para facilitar a integração de um fluxo de trabalho de teste nos seus projetos. Mal posso esperar para conhecer suas criações!
Fazer o download dos canais de visualização
Use o Chrome Canary, Dev ou Beta como seu navegador de desenvolvimento padrão. Esses canais de pré-visualização dão acesso aos recursos mais recentes do DevTools, testam APIs modernas da plataforma Web e encontram problemas no seu site antes que os usuários o façam!
Entrar em contato com a equipe do Chrome DevTools
Use as opções a seguir para discutir os novos recursos e mudanças na postagem ou qualquer outro assunto relacionado ao DevTools.
- Envie uma sugestão ou feedback pelo site crbug.com.
- Para informar um problema do DevTools, use Mais opções
> Ajuda > Informar problemas do DevTools no DevTools. - Tuíte em @ChromeDevTools.
- Deixe comentários nos vídeos do YouTube sobre as novidades do DevTools ou nos vídeos do YouTube com dicas sobre o DevTools.