Personalize e automatize os fluxos de usuários além do Gravador do Chrome DevTools

Ergün Erdogmus
Ergün Erdogmus

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 não temos testes automatizados em nossos fluxos de trabalho, a longo prazo, as coisas podem ficar um pouco complicadas. Portanto, também achamos que criar testes automatizados é importante.

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.

Opções de exportação.

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.

Exporte fluxos de usuários com extensões 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.

As extensões de reprodução permitem que as extensões adicionem um painel ao DevTools para configurar a repetição e a exibição dos resultados.

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.

Melhore sua experiência de repetição com extensões de navegador.

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é-lançamento 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.
  • Informe um problema do DevTools usando Mais opções   Mais > Ajuda > Relate problemas no DevTools no DevTools.
  • Envie um tweet 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.