API de Contexto

Vitest expone un módulo de contexto a través del punto de entrada @vitest/browser/context. A partir de la versión 2.0, este módulo proporciona un pequeño conjunto de utilidades que pueden ser útiles en tus pruebas.

userEvent

TIP

La API userEvent se explica en detalle en API de Interactividad.

/**
 * Manejador para interacciones de usuario. El soporte está implementado por el proveedor del navegador (`playwright` o `webdriverio`).
 * Si se usa con el proveedor `preview`, recurre a eventos simulados mediante `@testing-library/user-event`.
 * @experimental
 */
export const userEvent: {
  setup: () => UserEvent;
  cleanup: () => Promise<void>;
  click: (element: Element, options?: UserEventClickOptions) => Promise<void>;
  dblClick: (
    element: Element,
    options?: UserEventDoubleClickOptions
  ) => Promise<void>;
  tripleClick: (
    element: Element,
    options?: UserEventTripleClickOptions
  ) => Promise<void>;
  selectOptions: (
    element: Element,
    values: HTMLElement | HTMLElement[] | string | string[],
    options?: UserEventSelectOptions
  ) => Promise<void>;
  keyboard: (text: string) => Promise<void>;
  type: (
    element: Element,
    text: string,
    options?: UserEventTypeOptions
  ) => Promise<void>;
  clear: (element: Element) => Promise<void>;
  tab: (options?: UserEventTabOptions) => Promise<void>;
  hover: (element: Element, options?: UserEventHoverOptions) => Promise<void>;
  unhover: (element: Element, options?: UserEventHoverOptions) => Promise<void>;
  fill: (
    element: Element,
    text: string,
    options?: UserEventFillOptions
  ) => Promise<void>;
  dragAndDrop: (
    source: Element,
    target: Element,
    options?: UserEventDragAndDropOptions
  ) => Promise<void>;
};

commands

TIP

Esta API se explica en detalle en API de Comandos.

/**
 * Comandos disponibles para el navegador.
 * Un atajo a `server.commands`.
 */
export const commands: BrowserCommands;

page

La exportación page ofrece utilidades para interactuar con la página actual.

WARNING

Aunque expone algunas utilidades de la página de Playwright, no es el mismo objeto. Dado que el contexto del navegador se evalúa en el navegador, tus pruebas no tienen acceso directo al objeto page de Playwright, ya que este se ejecuta en el servidor.

Usa la API de Comandos si necesitas tener acceso al objeto page de Playwright.

export const page: {
  /**
   * Cambia el tamaño del viewport del iframe.
   */
  viewport(width: number, height: number): Promise<void>;
  /**
   * Realiza una captura de pantalla del iframe de prueba o de un elemento específico.
   * @returns Ruta al archivo de captura de pantalla o ruta y base64.
   */
  screenshot(
    options: Omit<ScreenshotOptions, 'base64'> & { base64: true }
  ): Promise<{
    path: string;
    base64: string;
  }>;
  screenshot(options?: ScreenshotOptions): Promise<string>;
  /**
   * Extiende el objeto página predeterminado con métodos personalizados.
   */
  extend(methods: Partial<BrowserPage>): BrowserPage;
  /**
   * Envuelve un elemento HTML con un Locator. Al buscar elementos, la búsqueda siempre devolverá este elemento.
   */
  elementLocator(element: Element): Locator;

  /**
   * API de Locator. Consulta su documentación para obtener más detalles.
   */
  getByRole(role: ARIARole | string, options?: LocatorByRoleOptions): Locator;
  getByLabelText(text: string | RegExp, options?: LocatorOptions): Locator;
  getByTestId(text: string | RegExp): Locator;
  getByAltText(text: string | RegExp, options?: LocatorOptions): Locator;
  getByPlaceholder(text: string | RegExp, options?: LocatorOptions): Locator;
  getByText(text: string | RegExp, options?: LocatorOptions): Locator;
  getByTitle(text: string | RegExp, options?: LocatorOptions): Locator;
};

TIP

La API getBy* se explica en API de Locators.

cdp

La exportación cdp devuelve la sesión actual del Protocolo de Herramientas para Desarrolladores de Chrome. Es principalmente útil para que los autores de bibliotecas construyan herramientas sobre ella.

WARNING

La sesión de CDP solo funciona con el proveedor playwright y únicamente cuando se utiliza el navegador chromium. Puedes leer más sobre esto en la documentación de CDPSession de Playwright.

export const cdp: () => CDPSession;

server

La exportación server representa el entorno Node.js donde se ejecuta el servidor Vitest. Es principalmente útil para depurar o adaptar tus pruebas según el entorno.

export const server: {
  /**
   * Plataforma donde se ejecuta el servidor Vitest.
   * Equivalente a llamar a `process.platform` en el servidor.
   */
  platform: Platform;
  /**
   * Versión del tiempo de ejecución del servidor Vitest.
   * Equivalente a llamar a `process.version` en el servidor.
   */
  version: string;
  /**
   * Nombre del proveedor del navegador.
   */
  provider: string;
  /**
   * Nombre del navegador actual.
   */
  browser: string;
  /**
   * Comandos disponibles para el navegador.
   */
  commands: BrowserCommands;
  /**
   * Configuración de prueba serializada.
   */
  config: SerializedConfig;
};