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 écrire des fonctionnalités, corriger des bugs et améliorer le monde ! Toutefois, lorsqu'aucun test automatisé n'est disponible dans nos workflows, les choses peuvent devenir "bug" sur le 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 sous différents formats (par exemple, des scripts de test) via différentes extensions et bibliothèques 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 allons aborder les points suivants:
- Comment exporter et revoir des parcours utilisateur de manière programmatique.
- Comment personnaliser vos parcours utilisateur à l'aide de Puppeteer Replay
- Comment l'intégrer à 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 débutez avec l'Enregistreur, suivez ce court tutoriel de présentation et ce guide vidéo pour commencer.
Exportez les parcours utilisateur et revoyez-les de manière programmatique
Par défaut, l'Enregistreur vous permet d'exporter ces enregistrements en tant que script Puppeteer ou Puppeteer Replay, ou en tant que fichier JSON brut.
Une fois les parcours utilisateur exportés sous forme de fichiers JSON, vous pouvez les réimporter dans le panneau "Enregistreur" et les relire, ou utiliser des bibliothèques externes pour les relancer. La bibliothèque 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 parcours utilisateur JSON dans le dossier recordings (par exemple, demo project), vous pouvez utiliser la commande suivante pour exécuter un ou plusieurs parcours utilisateur:
# replay one user flow
npx @puppeteer/replay ./recordings/order-a-coffee.json
# replay all user flows under recordings folder
npx @puppeteer/replay ./recordings/*.json
Si vous le souhaitez, vous pouvez ajouter un script npm pour exécuter les enregistrements. Ajoutez cette ligne au champ scripts de 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.
Relecture des flux utilisateur sans interface utilisateur par défaut (également appelé mode sans interface graphique) 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 relancer la lecture ailleurs que dans le navigateur Chrome. Voici la liste complète des bibliothèques.
Par exemple, TestCafe est un framework de test de bout en bout. Il permet de relire des flux utilisateur JSON avec Safari et plus encore.
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, quant à elle, 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 parcours utilisateur sous la forme d'un script personnalisé WebPageTest. Grâce à ce script, vous pouvez tester les performances de parcours utilisateur en plusieurs étapes dans vos applications. Cependant, l'écriture de ces scripts peut s'avérer parfois difficile.
De plus, si vous disposez déjà d'outils de test, il existe des extensions permettant d'exporter les parcours 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.
Transformation automatisée de scripts de test
En plus des extensions, la plupart de ces fournisseurs de test publient également des bibliothèques pour vous aider à convertir plusieurs parcours utilisateur JSON de manière programmatique.
Par exemple, utilisez les bibliothèques @cypress/chrome-recorder pour exporter des parcours utilisateur vers des tests Cypress.
npm install -g @cypress/chrome-recorder
npx @cypress/chrome-recorder ./recordings/*.json
Revoir des parcours utilisateur avec des extensions
À partir de Chrome 112, vous pouvez désormais 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 Puppeteer Replay. En plus de vous permettre de revoir des parcours utilisateur, Puppeteer Replay propose des API qui vous permettent de personnaliser ou transformer des parcours utilisateur.
Personnaliser la relecture des flux 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 générer un message à la fin de l'exécution du flux utilisateur
Voici l'extrait de code. Vous pouvez télécharger cette démo 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 pour consigner un message après toutes les étapes.
Enregistrez le fichier. Nous pourrons alors exécuter des 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 parcours utilisateur consiste à le transformer en différents formats (par exemple, 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 voir 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 rediffusion permettent de relire des enregistrements à l'aide d'infrastructures et de services tiers, sans quitter l'Enregistreur des outils de développement.
Pour créer votre propre extension de rediffusion, consultez la documentation relative à l'extension Replay et un exemple d'extension pour en savoir plus.
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.
Regardez cette démonstration et découvrez comment procéder au débogage en local et publier une extension Chrome.
Intégration à votre pipeline CI/CD
Il existe plusieurs façons de le faire et 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 relire les flux utilisateur lorsque:
- Les nouvelles modifications sont transmises à la branche
main - tous les jours à 12 h 30
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 exécuter jusqu'à 10 000 flux utilisateur en parallèle à l'aide de Google Cloud Run Job.
Conclusion
Dans cet article de blog, nous avons abordé les différentes options permettant d'exporter des flux utilisateur sous forme de fichiers JSON, de personnaliser les rediffusions avec PuppeteerReplayExtension, de transformer des parcours utilisateur avec PuppeteerStringifyExtension et de les intégrer à vos workflows CI.
J'espère que cet article de blog vous a donné des idées sur la façon d'utiliser le panneau "Enregistreur" et les outils fournis pour faciliter l'intégration d'un workflow de test dans vos projets. J'ai hâte de découvrir ce que vous allez créer !
Télécharger les canaux de prévisualisation
Nous vous conseillons d'utiliser Chrome Canary, Dev ou Beta 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 pointe de plates-formes Web et de détecter les problèmes sur votre site avant même que vos utilisateurs ne le fassent.
Contacter l'équipe des outils pour les développeurs Chrome
Utilisez les options suivantes pour discuter des nouvelles fonctionnalités et des modifications dans le message, ou de tout autre sujet lié aux outils de développement.
- Envoyez-nous une suggestion ou des commentaires via crbug.com.
- Signalez un problème lié aux outils de développement en accédant à Plus d'options
> Aide > Signaler un problème dans les outils de développement. - Envoyez un tweet à @ChromeDevTools.
- Laissez des commentaires sur les nouveautés des outils de développement vidéos YouTube ou les vidéos YouTube de nos conseils sur les outils de développement.