Context API

Vitest는 @vitest/browser/context 엔트리 포인트를 통해 컨텍스트 모듈을 제공합니다. Vitest 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 export는 현재 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 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;
};

Context API ​

userEvent ​

commands ​

page ​

cdp ​

server ​