Importación e Inicialización para Playwright

Una vez que hayas instalado Axe DevTools para Web, necesitas importarlo en tu configuración de pruebas e inicializar el paquete.

Prerrequisitos

Para poder importar e inicializar Axe DevTools para Web, primero debe estar instalado. Si aún no lo has hecho, lee la guía sobre cómo instalarlo desde un paquete, desde tu repositorio de artefactos o desde Agora de Deque. También necesitas una versión de Playwright descargada y configurada a tu elección.

Importación e Inicialización

Importe tanto Axe DevTools para Web como Playwright. La sintaxis depende del lenguaje y del sistema de módulos que utilice su proyecto. Elija la que coincida con su proyecto:

JavaScript con módulos CommonJS

Este es el valor predeterminado para un proyecto de Node.js sin "type": "module" en su package.json.

const { AxeDevToolsBuilder } = require('@axe-devtools/playwright');
const playwright = require('playwright');

JavaScript con módulos ES

Use esta sintaxis en un proyecto con "type": "module" en su package.json, o en archivos .mjs.

import { AxeDevToolsBuilder } from '@axe-devtools/playwright';
import * as playwright from 'playwright';

TypeScript

TypeScript usa la misma sintaxis de import que los módulos ES. @axe-devtools/playwright incluye sus propias declaraciones de tipo, por lo que no hay un paquete @types/ separado que instalar. Los resultados del escaneo están tipados como AxeResults, que exporta axe-core:

import { AxeDevToolsBuilder } from '@axe-devtools/playwright';
import * as playwright from 'playwright';
import type { AxeResults } from 'axe-core';

Inicializando Playwright

Una vez que hayas importado Axe DevTools para Web, puedes inicializar el controlador. Cada escaneo requiere su propia instancia de Axe DevTools para Web, por lo que lo inicializarás mientras escribes pruebas.

El código de inicialización es el mismo en JavaScript y TypeScript, excepto que TypeScript puede inferir o anotar los tipos que Playwright devuelve. En JavaScript:

// This will open up a headless instance of chromium
const browser = await playwright.chromium.launch();
const context = await browser.newContext();
const page = await context.newPage();

En TypeScript, con los tipos escritos:

import type { Browser, BrowserContext, Page } from 'playwright';

// This will open up a headless instance of chromium
const browser: Browser = await playwright.chromium.launch();
const context: BrowserContext = await browser.newContext();
const page: Page = await context.newPage();

Próximos Pasos

Una vez que hayas instalado, importado e inicializado Axe DevTools para Web, estás listo para pasar a escanear accesibilidad y escribir pruebas de accesibilidad. Para hacerlo, consulta la guía sobre escribir pruebas.

Solución de Problemas

Si tienes problemas con la importación o inicialización de Axe DevTools para Web, contacta directamente a tu representante de Deque, comunícate con nosotros a través de nuestra mesa de soporte, o envíanos un correo electrónico. Estaremos encantados de ayudarte.