Instrucciones para Puppeteer y TypeScript

This page is not available in the language you requested. You have been redirected to the English version of the page.
Link to this page copied to clipboard

Configurando tus pruebas con Puppeteer y TypeScript

Free Trial
Not for use with personal data
  1. En el nivel raíz de su carpeta de pruebas, instale el paquete @axe-core/watcher y todas sus dependencias usando npm o su administrador de paquetes preferido (por ejemplo, Yarn o pnpm).

    npm install --save-dev @axe-core/watcher
  2. En su archivo o archivos de prueba, importe la función puppeteerConfig , la función wrapPuppeteer() y la clase PuppeteerController de @axe-core/watcher:

    import {
      puppeteerConfig,
      wrapPuppeteerPage,
      PuppeteerController
    } from '@axe-core/watcher'
  3. Actualice su código de configuración de prueba (normalmente en un bloque before o beforeAll ) envolviendo cualquier código existente para crear una instancia de browser con una llamada a puppeteerConfig(), mientras obtiene su clave API del entorno (como API_KEY):

    // Original code:
    
    browser = await puppeteer.launch({
      // Your existing launch options...
    })
    
    // Becomes:
    
    const API_KEY = process.env.API_KEY
    
    const browser = await puppeteer.launch(
      puppeteerConfig({
        axe: {
          apiKey: API_KEY
        },
        headless: false
      })
    );
  4. Cree una instancia de PuppeteerController y envuelva su browserContext de Puppeteer:

    // Create a page instance, using your browser instance.
    let page = await browser.newPage()
    
    // Initialize the PuppeteerController by passing in the Puppeteer page.
    const controller = new PuppeteerController(page)
    
    // Use the new wrapped Puppeteer page instance.
    page = wrapPuppeteerPage(page, controller)
  5. Por último, asegúrese de que se hayan eliminado todos los resultados de las pruebas de Axe Watcher. Para ello, agregue el siguiente bloque de código a su código de desmontaje de prueba (normalmente en un bloque afterEach ):

    afterEach(async () => {
      await controller.flush()
    });