컨텍스트 API

Vitest는 @vitest/browser/context 진입점을 통해 컨텍스트 모듈을 제공합니다. 2.0 버전부터는 테스트에 유용한 소규모 유틸리티 집합을 제공합니다.

`userEvent`

TIP

userEvent API는 상호작용 API에서 자세히 설명합니다.

/**
 * 사용자 상호작용을 위한 핸들러입니다. 이 기능은 브라우저 제공자(`playwright` 또는 `webdriverio`)가 구현합니다.
 * `preview` 제공자와 함께 사용하면 `@testing-library/user-event`를 통한 시뮬레이션된 이벤트로 대체(fallback)됩니다.
 * @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 export는 현재 page와 상호작용하는 유틸리티를 제공합니다.

WARNING

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;

  /**
   * 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 export는 현재 Chrome DevTools Protocol 세션을 반환합니다. 주로 라이브러리 개발자에게 이를 기반으로 도구를 구축하는 데 유용합니다.

WARNING

CDP 세션은 playwright 제공자에서만 작동하며 chromium 브라우저를 사용할 때만 작동합니다. Playwright의 CDPSession 문서에서 자세히 읽을 수 있습니다.

export const cdp: () => CDPSession;

`server`

server export는 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 ​