La génération automatique de test de marionnettiste est intégrée dans Chrome DevTools

Dans Chrome 89, DevTools ajoute une prise en charge expérimentale pour la génération automatique de scripts JS sur Puppeteer .

Schématiquement, cela fonctionne comme ceci: vous ouvrez la page souhaitée, activez l'enregistrement des actions dans DevTools, puis faites quelque chose sur la page de la manière habituelle (cliquez sur les liens et les boutons, allez sur d'autres pages, entrez du texte). Au fur et à mesure que les actions sont effectuées, le navigateur remplit l'onglet DevTools avec un fichier d'enregistrement virtuel avec du code JS qui décrit toutes les actions via l'API Puppeteer. Après cela, vous pouvez arrêter l'enregistrement et enregistrer le code résultant dans un vrai fichier JS.

Pour démontrer la nouvelle fonctionnalité (appelée Puppeteer Recorder ), les auteurs ont préparé une petite page de démonstration (bien que vous puissiez la vérifier sur n'importe quelle page, aucune condition préalable du site n'est requise).

Mais d'abord, comme il s'agit encore d'une fonctionnalité expérimentale précoce (bien que les auteurs prévoient de développer et d'étendre Puppeteer Recorder ), il doit être activé dans les paramètres de DevTools, sur l'onglet Expériences, en tant qu'élément Recorder:

Vous pouvez maintenant ouvrir le panneau Source dans DevTools et sélectionner l'onglet Enregistrements qui y apparaît:

Ajoutons un nouveau fichier d'enregistrement avec le nom test01.js



:

Et commencez à enregistrer les actions à l'aide du bouton Enregistrer en bas de l'écran:

Le navigateur remplit immédiatement le fichier avec le code de démarrage, puis complète le code après chacune de nos actions sur la page:

Après un autre clic sur le bouton Enregistrer, le navigateur arrête l'enregistrement, complète le code avec les crochets de fermeture nécessaires et le fichier résultant peut être enregistré:

:

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();

    await page.goto("https://jec.fyi/demo/recorder?");
    {
        const targetPage = page;
        const frame = targetPage.mainFrame();
        const element = await frame.waitForSelector("aria/your email");
        await element.click();
    }
    {
        const targetPage = page;
        const frame = targetPage.mainFrame();
        const element = await frame.waitForSelector("aria/your email");
        await element.type("foo@bar.com");
    }
    {
        const targetPage = page;
        const frame = targetPage.mainFrame();
        const element = await frame.waitForSelector("aria/your name");
        await element.type("baz");
    }
    {
        const targetPage = page;
        const frame = targetPage.mainFrame();
        const element = await frame.waitForSelector("html > body > main > form > input[type=number]:nth-child(3)");
        await element.type("23");
    }
    {
        const targetPage = page;
        const frame = targetPage.mainFrame();
        const element = await frame.waitForSelector("html > body > main > form");
        await element.evaluate(form => form.submit());
    }
    await browser.close();
})();

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Puppeteer Recorder :

• ( , ) ( , Puppeteer)

  
  
  
  
  

• ( ), ( , , , )

  
  
  
  
  

• expect-, e2e-

  
  
  
  
  

, , Puppeteer Recorder ( ): , Puppeteer Recorder , , ( , Puppeteer). Puppeteer ( Cypress ), Jest , Playwright .

Comme il est généralement coûteux pour les développeurs d'écrire et de maintenir des tests d'intégration (souvent ces tests sont moins stables et plus complexes que les tests unitaires), ces outils de test de génération automatique peuvent considérablement économiser du temps et des ressources.