Pembuatan otomatis uji puppeteer dibangun di dalam Chrome DevTools

Di Chrome 89, DevTools menambahkan dukungan eksperimental untuk pembuatan otomatis skrip JS di Puppeteer .

Secara skematis, ini berfungsi seperti ini: Anda membuka halaman yang diinginkan, mengaktifkan perekaman tindakan di DevTools, lalu melakukan sesuatu di halaman dengan cara biasa (klik link dan tombol, buka halaman lain, masukkan teks). Saat tindakan dilakukan, browser mengisi tab DevTools dengan file rekaman virtual dengan kode JS yang menjelaskan semua tindakan melalui Puppeteer API. Setelah itu, Anda dapat berhenti merekam dan menyimpan kode yang dihasilkan sebagai file JS asli.

Untuk mendemonstrasikan fungsionalitas baru (disebut Puppeteer Recorder ), penulis telah menyiapkan halaman demo kecil (meskipun Anda dapat memeriksanya di halaman mana pun, tidak ada prasyarat dari situs yang diperlukan).

Tetapi pertama-tama, karena ini masih merupakan fitur eksperimental awal (meskipun penulis berencana untuk mengembangkan dan memperluas Puppeteer Recorder ), fitur ini harus diaktifkan di pengaturan DevTools, pada tab Eksperimen, sebagai item Perekam:

Sekarang Anda dapat membuka panel Source di DevTools, dan pilih tab Recordings yang muncul di dalamnya:

Mari tambahkan file rekaman baru dengan nama test01.js



:

Dan mulai merekam tindakan menggunakan tombol Rekam di bagian bawah layar:

Browser segera mengisi file dengan kode awal, dan kemudian melengkapi kode tersebut setelah setiap tindakan kita di halaman:

Setelah klik lain pada tombol Rekam, browser berhenti merekam, melengkapi kode dengan tanda kurung tutup yang diperlukan, dan file yang dihasilkan dapat disimpan:

:

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 .

Karena biasanya mahal bagi pengembang untuk menulis dan memelihara pengujian integrasi (seringkali pengujian semacam itu kurang stabil dan lebih kompleks daripada pengujian unit), alat pengujian pembuatan otomatis seperti itu dapat secara signifikan menghemat waktu dan sumber daya bisnis.