Context API

Vitest stellt ein Kontextmodul über den @vitest/browser/context Entry-Point bereit. Ab Version 2.0 bietet es eine Auswahl an Utilities, die in Ihren Tests nützlich sein könnten.

userEvent

TIP

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

/**
 * Event-Handler für Benutzerinteraktionen. Die Unterstützung erfolgt durch den Browser-Provider (`playwright` oder `webdriverio`).
 * Wenn der `preview`-Provider verwendet wird, greift er auf simulierte Events über `@testing-library/user-event` zurück.
 * @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 detailliert unter Commands-API erklärt.

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

page

Das Exportobjekt page stellt Utilities zur Interaktion mit der aktuellen page bereit.

WARNING

Obwohl es einige Utilities 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 diese auf dem Server läuft.

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

export const page: {
  /**
   * Ändert die Größe des Viewports des iFrames.
   */
  viewport(width: number, height: number): Promise<void>;
  /**
   * Erzeugt einen Screenshot des Test-iFrames oder eines bestimmten Elements.
   * @returns Pfad zur Screenshot-Datei oder Pfad und Base64.
   */
  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;
  /**
   * Kapselt ein HTML-Element in einem `Locator`. Bei der Abfrage von Elementen gibt die Suche immer dieses Element zurück.
   */
  elementLocator(element: Element): Locator;

  /**
   * Locator-APIs. Siehe Dokumentation für weitere Details.
   */
  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.

WARNING 3.2.0+

Beachten Sie, dass screenshot immer einen Base64-String zurückgibt, wenn save auf false gesetzt ist. Der path wird in diesem Fall ebenfalls ignoriert.

cdp

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

WARNING

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

export const cdp: () => CDPSession;

server

Das Exportobjekt server repräsentiert die Node.js-Umgebung, in der der Vitest-Server läuft. Es ist hauptsächlich nützlich zum Debuggen oder zur Einschränkung Ihrer Tests basierend auf der Umgebung.

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