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, quando non disponiamo di test automatici nei nostri flussi di lavoro, a lungo termine le cose possono diventare piuttosto "buggy". Quindi, pensiamo 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, personalizzare i flussi utente con la libreria Puppeteer Replay e integrarli nei 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 i flussi utente con l'aiuto di Puppeteer Replay.
- Come eseguire l'integrazione con i flussi di lavoro CI/CD.
Questo post del blog presuppone che tu conosca già le nozioni di base di Registratore. Se non hai mai utilizzato Registratore, segui questo breve tutorial introduttivo e guida video per iniziare.
Esporta i flussi utente e riproduci di nuovo in modo programmatico
Per impostazione predefinita, Registratore consente di esportare queste registrazioni come script Puppeteer o Puppeteer Replay o come file JSON normale.
Dopo aver esportato i flussi utente come file JSON, puoi importarli di nuovo nel riquadro Registratore e riproducirli, oppure utilizzare librerie esterne per riprodurli. La raccolta Puppeteer Replay è una delle raccolte disponibili.
Replay con Puppeteer Replay
Segui le istruzioni nel repository per installare Puppeteer Replay.
Supponiamo di salvare i 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"
Detto questo, puoi eseguire npm run replay-all nella riga di comando per riprodurre di nuovo tutte le registrazioni.
Per impostazione predefinita, la riproduzione dei flussi utente viene riprodotta senza UI (nota anche come modalità headless). Se vuoi visualizzare l'interfaccia utente, imposta la variabile di ambiente PUPPETEER_HEADLESS su false prima di eseguire il comando.
PUPPETEER_HEADLESS=false npm run replay-all
Riproduci di nuovo con librerie di terze parti
Esistono alcune librerie di terze parti che puoi usare per riprodurre contenuti al di fuori del browser Chrome. Ecco l'elenco completo delle librerie.
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 di flussi utente JSON con browser e versioni diversi sul cloud.
Ecco un esempio di file di configurazione in Saucelabs. Consulta il repository dimostrativo.
apiVersion: v1alpha
kind: puppeteer-replay
suites:
- name: "order a coffee"
recordings: [ "recordings/order-a-coffee.json" ]
…
Esportare i flussi utente con estensioni diverse
Oltre alle opzioni predefinite, puoi anche installare 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ù passaggi attraverso le tue applicazioni. Scrivere questi script, tuttavia, a volte può essere difficile.
Inoltre, se hai già degli strumenti di test, esistono estensioni per esportare i flussi utente in diversi script di test, come Cypress, Nightwatch, WebdriverIO, Testing Library e altri ancora. Ecco l'elenco completo. In questo modo, tu e il tuo team potete iniziare a scrivere test più velocemente.
Trasforma in script di test diversi in modo programmatico
Oltre alle estensioni, la maggior parte di questi provider di test pubblica anche 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
Riprodurre di nuovo i flussi utente 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 librerie sono costruite sopra la raccolta Puppeteer Replay. Oltre a consentirti di riprodurre i flussi utente, Puppeteer Replay offre API che ti consentono di personalizzare o trasformare la riproduzione dei flussi utente.
Personalizza la riproduzione dei flussi utente
Creiamo un plug-in per gli screenshot. Per ogni flusso utente, vogliamo:
- Per fare uno screenshot alla fine di ogni passaggio e salvarlo nella cartella
_screenshots. - Per generare un messaggio al termine dell'esecuzione del flusso utente.
Ecco lo snippet di codice. Puoi anche scaricare questa demo e giocarci.
/* 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 è piuttosto 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, dopodiché potremo eseguire le procedure 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, la procedura contiene un passaggio per accedere a un URL. Ecco l'aspetto del 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 scoprire come fanno.
Ad esempio, il seguente snippet di codice mostra come 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 riga di navigazione si traduce in await browser.url(‘https://coffee-cart.netlify.app/’).
Personalizza l'esperienza di riproduzione di DevTools
Le estensioni di riproduzione offrono un modo per riprodurre le registrazioni utilizzando servizi e infrastrutture di terze parti, il tutto senza uscire dal Registratore DevTools.
Per creare una tua estensione di riproduzione, consulta la documentazione relativa all'estensione di riproduzione e consulta un'estensione di esempio.
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.
Integrazione con la tua pipeline CI/CD
Esistono diversi modi per farlo e ci sono molti strumenti disponibili sul mercato. Ecco un esempio di automazione di questo processo 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, ripetiamo i flussi utente quando:
- vengono inviate le nuove modifiche al ramo
main - tutti i giorni alle 12:30
Oltre a GitHub Actions, puoi anche eseguire l'integrazione con i tuoi cloud provider preferiti. Vai a questa demo per scoprire come utilizzare il job Google Cloud Run per eseguire fino a 10.000 flussi utente in parallelo.
Conclusione
In questo post del blog abbiamo parlato delle diverse opzioni per esportare i flussi utente come file JSON, personalizzare le repliche con PuppeteerReplayExtension, trasformare i flussi utente con PuppeteerStringifyExtension e integrarli nei flussi di lavoro CI.
Spero che questo post del blog ti abbia dato alcune idee su come utilizzare il riquadro Registratore e gli strumenti forniti per semplificare l'integrazione di un flusso di lavoro di test nei tuoi progetti. Non vedo l'ora di scoprire cosa realizzerai.
Scaricare i canali in anteprima
Prendi in considerazione l'utilizzo di Chrome Canary, Dev o Beta come browser di sviluppo predefinito. Questi canali in anteprima ti consentono di accedere alle ultime funzionalità DevTools, testare le API delle piattaforme web all'avanguardia e individuare eventuali 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 qualsiasi altra informazione relativa a DevTools.
- Inviaci un suggerimento o un feedback tramite crbug.com.
- Segnala un problema di DevTools utilizzando Altre opzioni
> Guida > Segnala i problemi di DevTools in DevTools. - Tweet all'indirizzo @ChromeDevTools.
- Lascia commenti sui video di YouTube o sui suggerimenti di DevTools sui video di YouTube di DevTools.