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

Ergün Erdogmus
Ergün Erdogmus
X
Jecelyn Yeen

Vamos admitir, escrever 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 nos nossos fluxos de trabalho, as coisas podem ficar bastante “bugadas” a longo prazo. Por isso, também achamos que escrever testes automatizados é importante.

Com o painel Gravador no Chrome DevTools, você pode 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ários com a biblioteca Puppeteer Replay e integrá-los aos seus fluxos de trabalho atuais.

Nesta postagem do blog, falaremos sobre:

  • Como exportar e reproduzir fluxos de usuários de maneira programática.
  • Como personalizar seus fluxos de usuários com a ajuda do Puppeteer Replay.
  • Como integrar com seus fluxos de trabalho de CI/CD.

Esta postagem do blog pressupõe que você já conhece os conceitos básicos do Recorder. Se você não conhece o Recorder, siga este tutorial introdutório e guia em vídeo para começar.

Exportar fluxos de usuários e repetir 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.

Opções de exportação.

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 reproduzir ou usar bibliotecas externas para reproduzir. A biblioteca Puppeteer Replay é uma das disponíveis.

Repetição com o Puppeteer

Siga as instruções no repositório para instalar o Puppeteer Replay.

Digamos que você salve seus fluxos de usuários JSON na pasta recordings (por exemplo, projeto de demonstração). Use o comando a seguir para executar um ou mais fluxos de usuários: 

# 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, você pode executar npm run replay-all na linha de comando para reproduzir todas as gravações.

Os fluxos de usuários são reproduzidos sem interface por padrão (também conhecido como modo headless). Se você quiser ver a interface, defina a variável de ambiente PUPPETEER_HEADLESS como "false" antes de executar o comando.

PUPPETEER_HEADLESS=false npm run replay-all

Repetição com bibliotecas de terceiros

Algumas bibliotecas de terceiros podem ser usadas para reproduzir o vídeo fora do navegador Chrome. Confira a lista completa de bibliotecas.

Por exemplo, o TestCafe é um framework de testes completo. Ele oferece suporte à reproduçã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 teste baseada na nuvem. Ele oferece suporte à reproduçã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, é possível gravar e exportar os fluxos de usuários como um script personalizado do WebPageTest. Com o script, é possível testar o desempenho de fluxos de usuários em várias etapas nos seus aplicativos. No entanto, escrever esses scripts às vezes pode ser um desafio.

Além disso, se você já tiver 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. Confira a lista completa. Isso pode ajudar você e sua equipe a começar a programar testes mais rapidamente.

Transformar em scripts de teste diferentes de forma 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

Reproduzir 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. Com essas extensões, você pode integrar facilmente serviços e infraestruturas de terceiros para reproduzir gravações sem sair do DevTools.

As extensões de repetição permitem que as extensões adicionem um painel aos DevTools para configurar a repetição e mostrar os resultados.

Para começar, confira a lista de extensões disponíveis ou aprenda a 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 a repetição de fluxos de usuários, o Puppeteer Replay oferece APIs que permitem personalizar ou transformar a repetição de fluxos de usuários.

Personalizar a repetição de 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 exibir uma mensagem quando a execução do fluxo de usuários for concluída.

Este é o snippet de código. Você pode fazer o download desta demonstração e brincar com ela.

/* 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. Ampliamos 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 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

Confira o resultado:

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 de usuários é transformá-lo em formatos diferentes (por exemplo, scripts de teste do Cypress ou do Nightwatch).

Por exemplo, seu fluxo de usuários contém uma etapa para navegar até um URL. Confira como é o arquivo JSON:

{
  "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 ver 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 repetição oferecem uma maneira de reproduzir gravações usando serviços e infraestrutura de terceiros, tudo sem sair do DevTools Recorder.

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 a depurar localmente e publicar uma extensão do Chrome.

Integrar 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 as GitHub Actions: 

# .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

Neste post do blog, discutimos as diferentes opções para exportar fluxos de usuários como arquivos JSON, personalizar replays com PuppeteerReplayExtension, transformar fluxos de usuários com PuppeteerStringifyExtension e integrá-los aos seus fluxos de trabalho de CI.

Esperamos que esta postagem tenha dado algumas ideias sobre como usar o painel do Recorder e as ferramentas fornecidas para facilitar a integração de um fluxo de trabalho de teste aos seus projetos. Mal podemos esperar para ver o que você vai criar!

Fazer o download dos canais de visualização

Considere usar 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, permitem testar APIs modernas da plataforma da Web e ajudam a encontrar problemas no site antes que os usuários o façam!

Entre em contato com a equipe do Chrome DevTools

Use as opções a seguir para discutir novos recursos, atualizações ou qualquer outro item relacionado ao DevTools.