Context API

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

`userEvent`

TIP

userEvent API の詳細については、Interactivity 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 の詳細については、Commands API を参照してください。

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

`page`

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

WARNING

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

Playwright の page オブジェクトにアクセスする必要がある場合は、Commands 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;

  /**
   * 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 は Locators API で説明されています。

WARNING 3.2.0+

save が false に設定されている場合、screenshot は常に base64 文字列を返します。この場合、path は無視されます。

`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;
};

Context API ​

userEvent ​

commands ​

page ​

cdp ​

server ​