API Context

Vitest expose un module context via @vitest/browser/context. À partir de la version 2.0, il propose un petit ensemble d’utilitaires qui pourraient vous être utiles dans vos tests.

userEvent

Astuce

L’API userEvent est expliquée en détail dans l’API d’interactivité.

/**
 * Gestionnaire pour les interactions utilisateur. Le support est implémenté par le fournisseur de navigateur (`playwright` ou `webdriverio`).
 * Si utilisé avec le fournisseur `preview`, il revient à des événements simulés via `@testing-library/user-event`.
 * @experimental
 */
export const userEvent: {
  setup: () => UserEvent
  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

Astuce

Cette API est expliquée en détail dans l’API des commandes.

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

page

L’export page fournit des utilitaires pour interagir avec la page actuelle.

Attention

Bien qu’il expose certaines utilitaires de page de Playwright, ce n’est pas le même objet. Étant donné que le contexte du navigateur est évalué dans le navigateur, vos tests n’ont pas accès à page de Playwright car il s’exécute sur le serveur.

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

export const page: {
  /**
   * Change la taille de la fenêtre d'affichage de l'iframe.
   */
  viewport(width: number, height: number): Promise<void>
  /**
   * Prend 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>
  /**
   * Étendre l'objet `page` par défaut avec des méthodes personnalisées.
   */
  extend(methods: Partial<BrowserPage>): BrowserPage
  /**
   * Enveloppe un élément HTML dans un `Locator`. Lors de la recherche d'éléments, la recherche renverra toujours cet élément.
   */
  elementLocator(element: Element): Locator

  /**
   * APIs de Locator. 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
}

Astuce

L’API getBy* est expliquée dans l’API des locators.

cdp

L’export cdp retourne la session actuelle du Chrome DevTools Protocol. Cela est principalement utile pour les auteurs de bibliothèques pour construire des outils dessus.

Attention

La session CDP fonctionne uniquement avec le fournisseur playwright et uniquement lors de l’utilisation du navigateur chromium. Vous pouvez en lire plus à ce sujet dans la documentation de Playwright CDPSession.

export const cdp: () => CDPSession

server

L’export server représente l’environnement Node.js où le serveur Vitest s’exécute. Cela est principalement utile pour le débogage ou pour limiter vos tests en fonction de l’environnement.

export const server: {
  /**
   * Plateforme sur laquelle le serveur Vitest fonctionne.
   * La même chose que d'appeler `process.platform` sur le serveur.
   */
  platform: Platform
  /**
   * Version d'exécution du serveur Vitest.
   * La même chose que d'appeler `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
}