Admettons-le, écrire des tests automatisés n'est pas la chose la plus amusante dans la vie d'un développeur. En tant que développeurs, nous voulons créer des fonctionnalités, corriger les bugs et améliorer le monde. Toutefois, en l'absence de tests automatisés dans nos workflows, les choses peuvent devenir bénignes à long terme. Nous pensons donc également qu'il est important d'écrire des tests automatisés.
Le panneau Enregistreur des outils pour les développeurs Chrome vous permet d'enregistrer et de revoir des parcours utilisateur, de les exporter dans différents formats (par exemple, des scripts de test) via différentes bibliothèques et extensions tierces, de personnaliser les parcours utilisateur avec la bibliothèque Puppeteer Replay, et de les intégrer à vos workflows existants.
Dans cet article de blog, nous aborderons les sujets suivants:
- Exporter et relire des flux utilisateur de manière programmatique
- Comment personnaliser vos parcours utilisateur à l'aide de Puppeteer Replay.
- Intégration à vos workflows CI/CD
Dans cet article de blog, nous partons du principe que vous connaissez déjà les principes de base de l'Enregistreur. Si vous n'avez jamais utilisé l'Enregistreur, suivez ce bref tutoriel d'introduction et ce guide vidéo.
Exporter des flux utilisateur et les revoir par programmation
Par défaut, l'Enregistreur vous permet d'exporter ces enregistrements sous la forme d'un script Puppeteer ou Puppeteer Replay, ou d'un fichier JSON brut.
Une fois que vous avez exporté les flux utilisateur sous forme de fichiers JSON, vous avez la possibilité de les réimporter dans le panneau "Enregistreur" et de les relire, ou d'utiliser des bibliothèques externes pour les relire. Puppeteer Replay est l'une des bibliothèques disponibles.
Rejouer avec Puppeteer
Suivez les instructions du dépôt pour installer Puppeteer Replay.
Si vous enregistrez vos flux utilisateur JSON dans le dossier recordings (par exemple, demo project), vous pouvez exécuter un ou plusieurs parcours utilisateur à l'aide de la commande suivante:
# replay one user flow
npx @puppeteer/replay ./recordings/order-a-coffee.json
# replay all user flows under recordings folder
npx @puppeteer/replay ./recordings/*.json
Vous pouvez éventuellement ajouter un script npm pour exécuter les enregistrements. Ajoutez cette ligne au champ scripts dans package.json:
"replay-all": "replay recordings"
Vous pouvez alors exécuter npm run replay-all dans la ligne de commande pour relire tous les enregistrements.
Par défaut, les parcours utilisateur sont relancés sans UI (ce processus est également appelé mode headless). Si vous souhaitez afficher l'interface utilisateur, définissez la variable d'environnement PUPPETEER_HEADLESS sur "false" avant d'exécuter la commande.
PUPPETEER_HEADLESS=false npm run replay-all
Rejouer avec des bibliothèques tierces
Il existe certaines bibliothèques tierces que vous pouvez utiliser pour lire des contenus au-delà du navigateur Chrome. Voici la liste complète des bibliothèques.
Par exemple, TestCafe est un framework de test de bout en bout. Il est compatible avec la relecture de flux utilisateur JSON avec Safari, entre autres.
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
De son côté, Saucelabs est une plate-forme de test dans le cloud. Il permet de relire des flux utilisateur JSON avec différents navigateurs et versions dans le cloud.
Voici un exemple de fichier de configuration dans Saucelabs. Consultez le dépôt de démonstration.
apiVersion: v1alpha
kind: puppeteer-replay
suites:
- name: "order a coffee"
recordings: [ "recordings/order-a-coffee.json" ]
…
Exporter des parcours utilisateur avec différentes extensions
En plus des options par défaut, vous pouvez également installer des extensions pour exporter des parcours utilisateur dans différents formats.
Par exemple, vous pouvez enregistrer et exporter les flux utilisateur en tant que script personnalisé WebPageTest. Ce script vous permet de tester les performances des flux utilisateur en plusieurs étapes dans vos applications. Toutefois, l'écriture de ces scripts peut parfois s'avérer difficile.
De plus, si vous avez déjà mis en place des outils de test, il existe des extensions permettant d'exporter des flux utilisateur vers différents scripts de test tels que Cypress, Nightwatch, WebdriverIO, Testing Library, etc. Voici la liste complète. Cela pourrait vous aider, vous et votre équipe, à commencer à rédiger des tests plus rapidement.
Convertir en différents scripts de test par programmation
En plus des extensions, la plupart de ces fournisseurs de tests publient également des bibliothèques pour vous aider à convertir plusieurs flux utilisateur JSON de manière programmatique.
Par exemple, utilisez les bibliothèques @cypress/chrome-recorder pour exporter des flux utilisateur vers des tests Cypress.
npm install -g @cypress/chrome-recorder
npx @cypress/chrome-recorder ./recordings/*.json
Revoir les parcours utilisateur avec les extensions
À partir de Chrome 112, vous pouvez améliorer votre expérience en utilisant des extensions pour relire des enregistrements. Ces extensions vous permettent d'intégrer facilement une infrastructure et des services tiers pour relire des enregistrements sans quitter les outils de développement.
Pour commencer, consultez la liste des extensions disponibles ou découvrez comment créer votre propre extension personnalisée.
Créer vos propres extensions ou bibliothèques
En arrière-plan, toutes les extensions et bibliothèques sont basées sur la bibliothèque Replay de Puppeteer. En plus de vous permettre de relire des flux utilisateur, Puppeteer Replay propose des API qui vous permettent de personnaliser ou transformer la répétition des flux utilisateur.
Personnaliser la nouvelle lecture des parcours utilisateur
Créons un plug-in de capture d'écran. Pour chaque flux utilisateur, nous voulons:
- Pour effectuer une capture d'écran à la fin de chaque étape et l'enregistrer dans le dossier
_screenshots. - Pour afficher un message lorsque l'exécution du flux utilisateur est terminée.
Voici l'extrait de code. Vous pouvez télécharger cette démonstration et jouer avec.
/* 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.");
}
}
Le code lui-même est assez expressif. Nous étendons l'API PuppeteerRunnerExtension pour enregistrer la capture d'écran après chaque étape et enregistrer un message après chaque étape.
Enregistrez le fichier. Nous pourrons ensuite exécuter les flux utilisateur avec cette extension à l'aide de la commande suivante:
# 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
Voici la sortie:
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.
Transformer les flux utilisateur
Une autre façon de personnaliser le flux utilisateur consiste à le transformer en différents formats (par exemple, des scripts de test Cypress ou Nightwatch).
Par exemple, votre flux utilisateur contient une étape permettant d'accéder à une URL. Le fichier JSON se présente comme suit:
{
"title": "order-a-coffee",
"steps": [
{
"type": "navigate",
"url": "https://coffee-cart.netlify.app/"
},
…
]
}
Vous pouvez créer un plug-in stringify pour transformer l'étape en JavaScript. Vous pouvez également consulter d'autres bibliothèques existantes pour découvrir comment elles fonctionnent.
Par exemple, l'extrait de code suivant montre comment WebdriverIO transforme l'étape de navigation:
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)})`)
…
}
Lorsque vous exécutez le plug-in avec les parcours utilisateur, la ligne de navigation se traduit par await browser.url(‘https://coffee-cart.netlify.app/’).
Personnaliser l'expérience de relecture des outils de développement
Les extensions de relecture permettent de relire des enregistrements à l'aide d'une infrastructure et de services tiers, sans quitter l'Enregistreur des outils de développement.
Pour créer votre propre extension de relecture, consultez la documentation sur les extensions de relecture ainsi qu'un exemple d'extension.
Publier des extensions Chrome
Une fois que vous avez personnalisé et transformé les parcours utilisateur, vous pouvez les empaqueter en tant qu'extension Chrome et les publier sur le Chrome Web Store.
Consultez cette démonstration et les instructions pour apprendre à déboguer en local et à publier une extension Chrome.
Intégrer à votre pipeline CI/CD
Pour cela, il existe de nombreux outils. Voici un exemple d'automatisation de ce processus avec 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
Dans cet exemple, nous allons revoir les flux utilisateur lorsque:
- les nouvelles modifications sont transférées vers la branche
main - tous les jours à 12h30
En plus de GitHub Actions, vous pouvez également intégrer vos fournisseurs cloud préférés. Accédez à cette démonstration pour découvrir comment utiliser un job Google Cloud Run afin d'exécuter jusqu'à 10 000 parcours utilisateur en parallèle.
Conclusion
Dans cet article de blog, nous avons présenté les différentes options permettant d'exporter des flux utilisateur sous forme de fichiers JSON, de personnaliser les relectures avec PuppeteerReplayExtension, de transformer les parcours utilisateur avec PuppeteerStringifyExtension et de les intégrer à vos workflows CI.
J'espère que cet article de blog vous a donné quelques idées sur la façon d'utiliser le panneau "Enregistreur" et les outils mis à votre disposition pour faciliter l'intégration d'un workflow de test dans vos projets. Nous avons hâte de découvrir vos prochaines réalisations !
Télécharger les canaux de prévisualisation
Vous pouvez utiliser Chrome Canary, Dev ou Bêta comme navigateur de développement par défaut. Ces versions preview vous permettent d'accéder aux dernières fonctionnalités des outils de développement, de tester des API de plates-formes Web de pointe et de détecter les problèmes sur votre site avant vos utilisateurs.
Contacter l'équipe des outils pour les développeurs Chrome
Utilisez les options suivantes pour discuter des nouvelles fonctionnalités et des modifications dans l'article, ou de tout autre sujet lié aux outils de développement.
- Envoyez-nous une suggestion ou un commentaire via crbug.com.
- Signalez un problème lié aux outils de développement en cliquant sur Autres options
> Aide > Signalez un problème dans les outils de développement. - Tweetez à l'adresse @ChromeDevTools.
- Faites-nous part de vos commentaires sur les vidéos YouTube sur les nouveautés des outils de développement ou sur les vidéos YouTube de conseils pour les outils de développement.