Die automatische Generierung von Puppenspielertests ist in Chrome DevTools integriert

In Chrome 89 bietet DevTools experimentelle Unterstützung für die automatische Generierung von JS-Skripten auf Puppeteer .

Schematisch funktioniert es so: Sie öffnen die gewünschte Seite, aktivieren die Aufzeichnung von Aktionen in DevTools und führen dann wie gewohnt etwas auf der Seite aus (klicken Sie auf Links und Schaltflächen, gehen Sie zu anderen Seiten, geben Sie Text ein). Während der Ausführung von Aktionen füllt der Browser die Registerkarte DevTools mit einer virtuellen Datensatzdatei mit JS-Code, die alle Aktionen über die Puppeteer-API beschreibt. Danach können Sie die Aufzeichnung beenden und den resultierenden Code als echte JS-Datei speichern.

Um die neue Funktionalität ( Puppeteer Recorder genannt ) zu demonstrieren , haben die Autoren eine kleine Demoseite vorbereitet (obwohl Sie sie auf jeder Seite überprüfen können, sind keine Voraussetzungen von der Site erforderlich).

Da dies jedoch noch eine frühe experimentelle Funktion ist (obwohl die Autoren planen, den Puppenspieler-Rekorder zu entwickeln und zu erweitern ), muss sie zunächst in den DevTools-Einstellungen auf der Registerkarte "Experimente" als Rekorderelement aktiviert werden:

Jetzt können Sie das Quellbedienfeld in DevTools öffnen und die darin angezeigte Registerkarte „Aufzeichnungen“ auswählen:

Fügen wir eine neue Aufnahmedatei mit dem Namen hinzu test01.js



:

Starten Sie die Aufzeichnung von Aktionen mit der Schaltfläche Aufzeichnen am unteren Bildschirmrand:

Der Browser füllt die Datei sofort mit dem Startcode und ergänzt den Code nach jeder unserer Aktionen auf der Seite:

Nach einem weiteren Klick auf die Schaltfläche Aufzeichnen stoppt der Browser die Aufzeichnung, ergänzt den Code mit den erforderlichen schließenden Klammern und die resultierende Datei kann gespeichert werden:

:

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 .

Da es für Entwickler normalerweise teuer ist, Integrationstests zu schreiben und zu verwalten (häufig sind solche Tests weniger stabil und komplexer als Komponententests), können solche Testtools für die automatische Generierung erheblich Zeit und Ressourcen sparen.