Personnalisez et automatisez les parcours utilisateur au-delà de l'Enregistreur des outils pour les développeurs Chrome

Ergün Erdogmus
Ergün Erdogmus

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.

Options d'exportation.

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.

Exportez des parcours utilisateur avec différentes extensions.

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.

Les extensions de relecture permettent aux extensions d'ajouter un panneau aux outils de développement pour configurer la relecture et afficher les résultats de cette relecture.

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.

Améliorez votre expérience de relecture grâce à des extensions pour navigateur.

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