Ammettiamolo, scrivere test automatici non è la cosa più divertente nella vita di uno sviluppatore. In qualità di sviluppatori, vogliamo scrivere funzionalità, correggere bug e migliorare il mondo. Tuttavia, se non sono disponibili test automatici nei flussi di lavoro, sul lungo periodo la situazione può diventare "buggy". Pertanto, riteniamo anche che scrivere test automatici sia importante.
Con il riquadro Registratore in Chrome DevTools puoi registrare e riprodurre i flussi utente, esportarli in vari formati (ad esempio script di test) tramite diverse estensioni e librerie di terze parti, personalizzarli con la libreria Puppeteer Replay e integrarli con i tuoi flussi di lavoro esistenti.
In questo post del blog tratteremo i seguenti argomenti:
- Come esportare e riprodurre i flussi utente in modo programmatico.
- Come personalizzare le procedure con l'aiuto di Puppeteer Replay.
- Come eseguire l'integrazione con i tuoi flussi di lavoro CI/CD.
In questo post si presume che tu conosca già le nozioni di base di Registratore. Se non hai mai utilizzato Registratore, segui questo breve tutorial introduttivo e questa guida video per iniziare.
Esporta i flussi utente e riproducili in modo programmatico
Per impostazione predefinita, Registratore ti offre la possibilità di esportare queste registrazioni come script Puppeteer o Puppeteer Replay oppure come file JSON semplice.
Una volta esportati i flussi utente come file JSON, puoi importarli di nuovo nel pannello Registratore e guardarli di nuovo oppure utilizzare librerie esterne per riprodurli di nuovo. La raccolta Puppeteer Replay è una delle raccolte disponibili.
Gioca di nuovo con Puppeteer Replay
Segui le istruzioni nel repository per installare Puppeteer Replay.
Supponiamo che salvi i tuoi flussi utente JSON nella cartella recordings (ad esempio progetto demo). Puoi utilizzare il seguente comando per eseguire uno o più flussi utente:
# replay one user flow
npx @puppeteer/replay ./recordings/order-a-coffee.json
# replay all user flows under recordings folder
npx @puppeteer/replay ./recordings/*.json
Facoltativamente, puoi aggiungere uno script npm per l'esecuzione delle registrazioni; aggiungi questa riga al campo scripts in package.json:
"replay-all": "replay recordings"
A questo punto, puoi eseguire npm run replay-all nella riga di comando per riprodurre tutte le registrazioni.
Per impostazione predefinita, l'utente riproduce i flussi di dati senza UI (nota anche come modalità headless). Se vuoi visualizzare la UI, imposta la variabile di ambiente PUPPETEER_HEADLESS su false prima di eseguire il comando.
PUPPETEER_HEADLESS=false npm run replay-all
Gioca di nuovo con librerie di terze parti
Esistono alcune librerie di terze parti che puoi utilizzare per riprodurre di nuovo i contenuti oltre il browser Chrome. Ecco l'elenco completo delle biblioteche.
Ad esempio, TestCafe è un framework di test end-to-end. Supporta la riproduzione dei flussi utente JSON con Safari e altro ancora.
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
Saucelabs è invece una piattaforma di test basata su cloud. Supporta la riproduzione dei flussi utente JSON con diversi browser e versioni sul cloud.
Ecco un esempio di file di configurazione in Saucelabs. Consulta il repository demo.
apiVersion: v1alpha
kind: puppeteer-replay
suites:
- name: "order a coffee"
recordings: [ "recordings/order-a-coffee.json" ]
…
Esporta i flussi di utenti con estensioni diverse
Oltre alle opzioni predefinite, puoi anche installare le estensioni per esportare i flussi utente in diversi formati.
Ad esempio, puoi registrare ed esportare i flussi utente come script personalizzato WebPageTest. Con lo script puoi testare le prestazioni dei flussi utente in più fasi attraverso le tue applicazioni. Scrivere i copioni, tuttavia, a volte può essere impegnativo.
Inoltre, se disponi già di strumenti per i test, sono disponibili estensioni per esportare i flussi utente in diversi script di test, come Cypress, Nightwatch, WebdriverIO, Testing Library e altri ancora. Ecco l'elenco completo. Questo può aiutare te e il tuo team a iniziare a scrivere test più rapidamente.
Trasforma in modo programmatico in script di test diversi
Oltre alle estensioni, la maggior parte di questi fornitori di test pubblica librerie per aiutarti a convertire più flussi utente JSON in modo programmatico.
Ad esempio, utilizza le librerie @cypress/chrome-recorder per esportare i flussi utente nei test Cypress.
npm install -g @cypress/chrome-recorder
npx @cypress/chrome-recorder ./recordings/*.json
Guarda di nuovo le procedure con le estensioni
A partire da Chrome 112, puoi migliorare la tua esperienza utilizzando le estensioni per riprodurre le registrazioni. Queste estensioni ti consentono di integrare perfettamente i servizi e l'infrastruttura di terze parti per riprodurre le registrazioni senza mai uscire da DevTools.
Per iniziare, consulta l'elenco delle estensioni disponibili o scopri come creare la tua estensione personalizzata.
Crea le tue estensioni o librerie
Dietro le quinte, tutte le estensioni e le raccolte sono basate sulla libreria Puppeteer Replay. Oltre a consentirti di riprodurre i flussi utente, Puppeteer Replay offre API che ti consentono di personalizzare o trasformare le riproduzioni dei flussi utente.
Personalizza la riproduzione dei flussi utente
Creiamo un plug-in per gli screenshot. Per ogni procedura di utenti, vogliamo:
- Fare uno screenshot alla fine di ogni passaggio e salvarlo nella cartella
_screenshots. - Per inviare un messaggio quando l'esecuzione del flusso utente è completata.
Ecco lo snippet di codice. Puoi scaricare questa demo e provarla.
/* 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.");
}
}
Il codice è molto espressivo di per sé. Estendiamo l'API PuppeteerRunnerExtension per salvare lo screenshot dopo ogni passaggio e per registrare un messaggio dopo tutti i passaggi.
Salva il file, quindi possiamo eseguire i flussi utente con questa estensione utilizzando il seguente 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
Ecco l'output:
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.
Trasforma i flussi utente
Un altro modo per personalizzare il flusso utente è trasformarlo in diversi formati (ad esempio script di test Cypress o Nightwatch).
Ad esempio, il flusso utente contiene un passaggio per accedere a un URL. Ecco come appare il file JSON:
{
"title": "order-a-coffee",
"steps": [
{
"type": "navigate",
"url": "https://coffee-cart.netlify.app/"
},
…
]
}
Puoi creare un plug-in stringify per trasformare il passaggio in JavaScript. Puoi anche visualizzare altre librerie esistenti per vedere come fanno.
Ad esempio, il seguente snippet di codice mostra in che modo WebdriverIO trasforma il passaggio di navigazione:
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 esegui il plug-in con i flussi utente, la linea di navigazione si traduce in await browser.url(‘https://coffee-cart.netlify.app/’).
Personalizza l'esperienza di riproduzione di DevTools
Le estensioni di riproduzione consentono di riprodurre le registrazioni utilizzando servizi e infrastrutture di terze parti, il tutto senza uscire dal Registratore DevTools.
Per creare la tua estensione di ripetizione, consulta la documentazione relativa all'estensione di riproduzione e rivedi un'estensione di esempio per indicazioni.
Pubblicare le estensioni di Chrome
Dopo aver personalizzato e trasformato i flussi utente, puoi pacchettizzarli come estensione di Chrome e pubblicarli sul Chrome Web Store.
Guarda questa demo e le istruzioni per scoprire come eseguire il debug in locale e pubblicare un'estensione di Chrome.
Integra con la tua pipeline CI/CD
Esistono diversi modi per farlo e molti strumenti sono disponibili. Ecco un esempio di come automatizzare questa procedura con le Azioni 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
In questo esempio, riproduciamo i flussi utente quando:
- push delle nuove modifiche al ramo
main - ogni giorno alle 12:30
Oltre a GitHub Actions, puoi eseguire l'integrazione anche con i tuoi cloud provider preferiti. Vai a questa demo per vedere come utilizzare il job di Google Cloud Run per eseguire fino a 10.000 flussi utente in parallelo.
Conclusione
In questo post del blog abbiamo discusso le diverse opzioni per esportare i flussi utente come file JSON, personalizzare le repliche con PuppeteerReplayExtension, trasformare i flussi utente con PuppeteerStringifyExtension e integrarli nei tuoi flussi di lavoro CI.
Spero che questo post del blog ti abbia fornito alcune idee su come utilizzare il riquadro Registratore e sugli strumenti forniti per semplificare l'integrazione del flusso di lavoro di test nei tuoi progetti. Non vedo l'ora di vedere cosa creerai.
Scaricare i canali in anteprima
Prendi in considerazione l'utilizzo di Chrome Canary, Dev o Beta come browser di sviluppo predefinito. Questi canali di anteprima ti consentono di accedere alle ultime funzionalità di DevTools, di testare le API delle piattaforme web all'avanguardia e di individuare i problemi sul tuo sito prima che lo facciano gli utenti.
Contattare il team di Chrome DevTools
Utilizza le seguenti opzioni per discutere delle nuove funzionalità e modifiche nel post o di qualsiasi altra informazione relativa a DevTools.
- Inviaci un suggerimento o un feedback tramite crbug.com.
- Segnala un problema di DevTools usando Altre opzioni
> Guida > Segnala un problema di DevTools in DevTools. - Invia un tweet all'indirizzo @ChromeDevTools.
- Lascia commenti sulle novità nei video di YouTube di DevTools o nei video di YouTube dei suggerimenti di DevTools.