API de contexte

Vitest expose un module de contexte via le point d'entrée @vitest/browser/context. Depuis la version 2.0, il propose un petit ensemble d'utilitaires qui peuvent vous être utiles dans vos tests.

userEvent

TIP

L'API userEvent est décrite en détail dans l'API d'interactivité.

/**
 * Gestionnaire d'interactions utilisateur. Le support est implémenté par le fournisseur de navigateur (`playwright` ou `webdriverio`).
 * Si utilisé avec le fournisseur `preview`, il recourt à des événements simulés via `@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

Cette API est expliquée en détail dans API de commandes.

/**
 * Commandes disponibles pour le navigateur.
 * Un raccourci vers `server.commands`.
 */
export const commands: BrowserCommands;

page

L'exportation page fournit des utilitaires pour interagir avec la page actuelle.

WARNING

Bien qu'il expose certains utilitaires de la page de Playwright, il ne s'agit pas du même objet. Étant donné que le contexte du navigateur est évalué dans le navigateur, vos tests n'ont pas accès à la page de Playwright, car celle-ci s'exécute sur le serveur.

Utilisez l'API de commandes si vous avez besoin d'accéder à l'objet page de Playwright.

export const page: {
  /**
   * Modifie la taille de la zone d'affichage de l'iframe.
   */
  viewport(width: number, height: number): Promise<void>;
  /**
   * Effectue une capture d'écran de l'iframe de test ou d'un élément spécifique.
   * @returns Chemin vers le fichier de capture d'écran ou chemin et base64.
   */
  screenshot(
    options: Omit<ScreenshotOptions, 'base64'> & { base64: true }
  ): Promise<{
    path: string;
    base64: string;
  }>;
  screenshot(options?: ScreenshotOptions): Promise<string>;
  /**
   * Étend l'objet `page` par défaut avec des méthodes personnalisées.
   */
  extend(methods: Partial<BrowserPage>): BrowserPage;
  /**
   * Encapsule un élément HTML dans un `Locator`. Lors de la recherche d'éléments, celle-ci retournera toujours cet élément.
   */
  elementLocator(element: Element): Locator;

  /**
   * API des Locators. Consultez sa documentation pour plus de détails.
   */
  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

L'API getBy* est expliquée dans API de Locators.

cdp

L'exportation cdp renvoie la session actuelle du protocole Chrome DevTools. Il est principalement destiné aux auteurs de bibliothèques pour développer des outils.

WARNING

La session CDP ne fonctionne qu'avec le fournisseur playwright et uniquement avec le navigateur chromium. Vous pouvez en savoir plus à ce sujet dans la documentation CDPSession de Playwright.

export const cdp: () => CDPSession;

server

L'exportation server représente l'environnement Node.js dans lequel le serveur Vitest s'exécute. Il est principalement utile pour le débogage ou pour adapter vos tests à l'environnement.

export const server: {
  /**
   * Plateforme sur laquelle le serveur Vitest s'exécute.
   * Identique à l'appel de `process.platform` sur le serveur.
   */
  platform: Platform;
  /**
   * Version du runtime du serveur Vitest.
   * Identique à l'appel de `process.version` sur le serveur.
   */
  version: string;
  /**
   * Nom du fournisseur de navigateur.
   */
  provider: string;
  /**
   * Nom du navigateur actuel.
   */
  browser: string;
  /**
   * Commandes disponibles pour le navigateur.
   */
  commands: BrowserCommands;
  /**
   * Configuration de test sérialisée.
   */
  config: SerializedConfig;
};