Vamos admitir, escrever testes automatizados não é a coisa mais divertida na vida de um desenvolvedor. Como desenvolvedores, queremos escrever recursos, corrigir bugs e melhorar o mundo. No entanto, quando não temos testes automatizados nos nossos fluxos de trabalho, a longo prazo, as coisas podem ficar um pouco "observadas". Portanto, também achamos que criar testes automatizados é importante.
Com o painel Recorder no Chrome DevTools, é possível gravar e reproduzir fluxos de usuários, exportá-los para vários formatos (por exemplo, scripts de teste) usando diferentes extensões e bibliotecas de terceiros, personalizar os fluxos de usuário com a biblioteca Puppeteer Replay e integrá-los aos fluxos de trabalho.
Nesta postagem do blog, vamos falar sobre:
- Como exportar e reproduzir fluxos de usuários de maneira programática.
- Como personalizar fluxos de usuários com a ajuda do Puppeteer Replay.
- Como integrar seus fluxos de trabalho de CI/CD.
Esta postagem do blog presume que você já conhece os conceitos básicos do Gravador. Se você não conhece o Gravador, siga este breve tutorial introdutório e guia em vídeo para começar.
Exportar fluxos de usuários e reproduzir de forma 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, você tem a opção de importar de volta para o painel do Gravador e reproduzi-lo novamente ou de usar bibliotecas externas para reproduzi-lo. Puppeteer Replay é uma das bibliotecas disponíveis.
Jogue de novo 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
Também é possível adicionar um script npm para executar as gravações. Adicione esta linha ao campo scripts em package.json:
"replay-all": "replay recordings"
Com isso, você pode executar npm run replay-all na linha de comando para repetir todas as gravações.
Por padrão, os fluxos do usuário são repetidos sem interface (também conhecido como modo headless). Para conferir a interface, defina a variável de ambiente PUPPETEER_HEADLESS como "false" antes de executar o comando.
PUPPETEER_HEADLESS=false npm run replay-all
Jogar novamente com bibliotecas de terceiros
Existem algumas bibliotecas de terceiros que você pode usar para reproduzir conteúdo além do navegador Chrome. Veja a lista completa de bibliotecas.
Por exemplo, o TestCafe é um framework de testes completo. Ele oferece suporte à 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
A 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.
Confira um exemplo de arquivo de configuração no Saucelabs. Confira o repositório de demonstração (em inglês).
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 os fluxos de usuários para diferentes formatos.
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 de várias etapas nos seus aplicativos. No entanto, às vezes criar esses scripts pode ser um desafio.
Além disso, se você já tem ferramentas de teste em vigor, há extensões para exportar fluxos de usuários para diferentes scripts de teste, como Cypress, Nightwatch, WebdriverIO, Testing Library e muito mais. Veja 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 forma 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, agora é possível melhorar sua experiência usando extensões para repetir gravações. Essas extensões permitem integrar perfeitamente serviços e infraestrutura de terceiros para repetir 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
Por trás de tudo, 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ários, o Puppeteer Replay oferece APIs que permitem personalizar ou transformar a repetição dos fluxos de usuários.
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:
- Para fazer uma captura de tela no fim de cada etapa e salvá-la na pasta
_screenshots. - Para enviar uma mensagem quando a execução do fluxo do usuário for concluída.
Veja o snippet de código. Você pode fazer o download e usar esta demonstração.
/* 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 em si é bastante expressivo. Estendemos a API PuppeteerRunnerExtension para salvar a captura de tela após cada etapa e registrar uma mensagem após todas as etapas.
Salve o arquivo para executar os fluxos de usuário 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.
Transforme os fluxos de usuários
Outra maneira de personalizar o fluxo do usuário é transformá-lo em diferentes formatos (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 vai ficar assim:
{
"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 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 repetição oferecem uma maneira de repetir gravações usando serviços e infraestrutura de terceiros, tudo isso sem sair do Gravador do DevTools.
Para criar sua própria extensão de repetição, consulte a documentação sobre a extensão de repetição e veja uma extensão de exemplo para 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 publicar na Chrome Web Store.
Confira esta demonstração e instruções para aprender a depurar localmente e publicar uma extensão do Chrome.
Integrar ao pipeline de CI/CD
Há várias maneiras de fazer isso e há muitas ferramentas por aí. Veja 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, vamos repetir os fluxos de usuários quando:
- as novas alterações são enviadas para a ramificação
main - todos os dias às 12h30
Além do GitHub Actions, também é possível 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ário com PuppeteerStringifyExtension e integrá-los aos fluxos de trabalho de CI.
Espero que esta postagem do blog tenha trazido algumas ideias sobre como você pode usar o painel do Gravador e as ferramentas fornecidas para facilitar a integração de um fluxo de trabalho de teste em seus projetos. Mal posso esperar para ver o que você vai criar!
Fazer o download dos canais de visualização
Use o Chrome Canary, Dev ou Beta como navegador de desenvolvimento padrão. Esses canais de pré-visualização dão acesso aos recursos mais recentes do DevTools, testam as APIs de plataforma da Web modernas e encontram problemas no seu site antes que os usuários o encontrem.
Entrar em contato com a equipe do Chrome DevTools
Use as opções abaixo para discutir os novos recursos e mudanças na postagem ou qualquer outro assunto relacionado ao DevTools.
- Envie uma sugestão ou feedback em crbug.com.
- Informe um problema do DevTools em Mais opções
> Ajuda > Informar problemas no DevTools. - Publique no Twitter em @ChromeDevTools.
- Deixe comentários nos vídeos do YouTube sobre o que há de novo ou nos vídeos do YouTube de dicas sobre o DevTools.