Kontext-API

Vitest stellt ein Kontextmodul über den Einstiegspunkt @vitest/browser/context bereit. Ab Version 2.0 bietet es eine kleine Anzahl nützlicher Dienstprogramme für Tests.

userEvent

TIP

Die userEvent-API wird im Detail unter Interaktivitäts-API erklärt.

/**
 * Handler für Benutzerinteraktionen. Die Implementierung erfolgt durch den Browser-Provider (`playwright` oder `webdriverio`).
 * Bei Verwendung mit dem `preview`-Provider werden simulierte Ereignisse über `@testing-library/user-event` verwendet.
 * @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

Diese API wird im Detail unter Befehls-API erklärt.

/**
 * Verfügbare Befehle für den Browser.
 * Ein Shortcut für `server.commands`.
 */
export const commands: BrowserCommands;

page

Der page-Export stellt Dienstprogramme zur Interaktion mit der aktuellen page bereit.

WARNING

Obwohl er einige Dienstprogramme von Playwrights page bereitstellt, handelt es sich nicht um dasselbe Objekt. Da der Browserkontext im Browser ausgewertet wird, haben Ihre Tests keinen Zugriff auf Playwrights page, da dieses auf dem Server läuft.

Verwenden Sie die Befehls-API, wenn Sie Zugriff auf das page-Objekt von Playwright benötigen.

export const page: {
  /**
   * Ändert die Viewport-Größe des Iframes.
   */
  viewport(width: number, height: number): Promise<void>;
  /**
   * Erstellt einen Screenshot des Test-Iframes oder eines bestimmten Elements.
   * @returns Pfad zur Screenshot-Datei oder Pfad und Base64-Daten.
   */
  screenshot(
    options: Omit<ScreenshotOptions, 'base64'> & { base64: true }
  ): Promise<{
    path: string;
    base64: string;
  }>;
  screenshot(options?: ScreenshotOptions): Promise<string>;
  /**
   * Erweitert das Standard-`page`-Objekt um benutzerdefinierte Methoden.
   */
  extend(methods: Partial<BrowserPage>): BrowserPage;
  /**
   * Umschließt ein HTML-Element in einem `Locator`. Bei Elementabfragen wird immer dieses Element zurückgegeben.
   */
  elementLocator(element: Element): Locator;

  /**
   * Locator-APIs. Weitere Details finden Sie in dessen Dokumentation.
   */
  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

Die getBy*-API wird unter Locators-API erklärt.

cdp

Der cdp-Export gibt die aktuelle Sitzung des Chrome DevTools Protocol zurück. Er ist hauptsächlich für Bibliotheksautoren nützlich, um darauf aufbauend Tools zu erstellen.

WARNING

Die CDP-Sitzung funktioniert ausschließlich mit dem playwright-Provider und nur bei Verwendung des chromium-Browsers. Weitere Informationen dazu finden Sie in der Dokumentation zu Playwrights CDPSession.

export const cdp: () => CDPSession;

server

Der server-Export stellt die Node.js-Umgebung dar, in der der Vitest-Server läuft. Er ist hauptsächlich nützlich zum Debuggen oder um Tests basierend auf der Umgebung einzuschränken.

export const server: {
  /**
   * Plattform, auf der der Vitest-Server läuft.
   * Entspricht dem Aufruf von `process.platform` auf dem Server.
   */
  platform: Platform;
  /**
   * Laufzeitversion des Vitest-Servers.
   * Entspricht dem Aufruf von `process.version` auf dem Server.
   */
  version: string;
  /**
   * Name des Browser-Providers.
   */
  provider: string;
  /**
   * Name des aktuellen Browsers.
   */
  browser: string;
  /**
   * Verfügbare Befehle für den Browser.
   */
  commands: BrowserCommands;
  /**
   * Serialisierte Testkonfiguration.
   */
  config: SerializedConfig;
};