コンテキスト API

Vitest は、@vitest/browser/context エントリポイントを通じてコンテキストモジュールを公開しています。バージョン 2.0 以降、テストに役立ついくつかのユーティリティを提供しています。

`userEvent`

TIP

userEvent API の詳細は、インタラクティビティ API で説明されています。

/**
 * ユーザー操作のハンドラー。サポートはブラウザプロバイダー（`playwright` または `webdriverio`）によって実装されます。
 * `preview` プロバイダーで使用する場合、`@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

この API の詳細は、コマンド API で説明されています。

/**
 * ブラウザで利用可能なコマンド。
 * `server.commands` へのショートカット。
 */
export const commands: BrowserCommands;

`page`

page エクスポートは、現在の page を操作するためのユーティリティを提供します。

WARNING

Playwright の page からいくつかのユーティリティを公開していますが、同じオブジェクトではありません。ブラウザコンテキストはブラウザで評価されるため、テストは Playwright の page にアクセスできません。Playwright の page はサーバー上で実行されるためです。

Playwright の page オブジェクトにアクセスしたい場合は、コマンド API を使用してください。

export const page: {
  /**
   * iframe のビューポートサイズを変更します。
   */
  viewport(width: number, height: number): Promise<void>;
  /**
   * テスト iframe または特定の要素のスクリーンショットを撮ります。
   * @returns スクリーンショットファイルへのパス、またはパスと base64 形式のデータ。
   */
  screenshot(
    options: Omit<ScreenshotOptions, 'base64'> & { base64: true }
  ): Promise<{
    path: string;
    base64: string;
  }>;
  screenshot(options?: ScreenshotOptions): Promise<string>;
  /**
   * デフォルトの `page` オブジェクトにカスタムメソッドを追加します。
   */
  extend(methods: Partial<BrowserPage>): BrowserPage;
  /**
   * HTML 要素を `Locator` でラップします。要素を検索すると、常にこの要素が返されます。
   */
  elementLocator(element: Element): Locator;

  /**
   * ロケーター API。詳細はドキュメントをご覧ください。
   */
  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

getBy* API は、ロケーター API で説明されています。

`cdp`

cdp エクスポートは、現在の Chrome DevTools Protocol セッションを返します。これは主にライブラリ開発者がこれを基盤としてツールを構築するのに役立ちます。

WARNING

CDP セッションは playwright プロバイダーを使用し、さらに chromium ブラウザを使用している場合にのみ機能します。詳細については、playwright の CDPSession ドキュメントを参照してください。

export const cdp: () => CDPSession;

`server`

server エクスポートは、Vitest サーバーが実行されている Node.js 環境を表します。これは主にデバッグや、環境に応じてテストを制限する場合に役立ちます。

export const server: {
  /**
   * Vitest サーバーが実行されているプラットフォーム。
   * サーバー上で `process.platform` を呼び出した場合と同じです。
   */
  platform: Platform;
  /**
   * Vitest サーバーのランタイムバージョン。
   * サーバー上で `process.version` を呼び出した場合と同じです。
   */
  version: string;
  /**
   * ブラウザプロバイダーの名前。
   */
  provider: string;
  /**
   * 現在のブラウザの名前。
   */
  browser: string;
  /**
   * ブラウザで利用可能なコマンド。
   */
  commands: BrowserCommands;
  /**
   * シリアライズされたテスト設定。
   */
  config: SerializedConfig;
};

コンテキスト API ​

userEvent ​

commands ​

page ​

cdp ​

server ​