API di contesto

Vitest espone un modulo di contesto tramite il punto di ingresso @vitest/browser/context. A partire dalla versione 2.0, espone un piccolo set di utilità che possono esserti utili nei test.

userEvent

TIP

L'API userEvent è spiegata in dettaglio in API di interazione.

/**
 * Gestore delle interazioni utente. Il supporto è implementato dal provider del browser (`playwright` o `webdriverio`).
 * Se utilizzato con il provider `preview`, utilizza eventi simulati tramite `@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

Questa API è spiegata in dettaglio in API dei comandi.

/**
 * Comandi disponibili per il browser.
 * Un alias di `server.commands`.
 */
export const commands: BrowserCommands;

page

L'export page fornisce utilità per interagire con la page corrente.

WARNING

Sebbene esponga alcune utilità dalla page di Playwright, non è lo stesso oggetto. Poiché il contesto del browser viene valutato nel browser, i tuoi test non hanno accesso alla page di Playwright perché viene eseguita sul server.

Utilizza l'API dei comandi se hai bisogno di accedere all'oggetto page di Playwright.

export const page: {
  /**
   * Cambia la dimensione del viewport dell'iframe.
   */
  viewport(width: number, height: number): Promise<void>;
  /**
   * Acquisisce uno screenshot dell'iframe di test o di un elemento specifico.
   * @returns Percorso del file dello screenshot o percorso e base64.
   */
  screenshot(
    options: Omit<ScreenshotOptions, 'base64'> & { base64: true }
  ): Promise<{
    path: string;
    base64: string;
  }>;
  screenshot(options?: ScreenshotOptions): Promise<string>;
  /**
   * Estende l'oggetto `page` di default con metodi personalizzati.
   */
  extend(methods: Partial<BrowserPage>): BrowserPage;
  /**
   * Incapsula un elemento HTML in un `Locator`. Durante le ricerche, verrà sempre restituito questo elemento.
   */
  elementLocator(element: Element): Locator;

  /**
   * API dei Locator. Consulta la sua documentazione per maggiori dettagli.
   */
  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

L'API getBy* è spiegata in API dei Locator.

cdp

L'export cdp restituisce la sessione attuale del Chrome DevTools Protocol. È principalmente utile agli sviluppatori di librerie per creare strumenti basati su di essa.

WARNING

La sessione CDP è compatibile solo con il provider playwright e solo quando si utilizza il browser chromium. Puoi leggere di più a riguardo nella documentazione di CDPSession di Playwright.

export const cdp: () => CDPSession;

server

L'export server rappresenta l'ambiente Node.js in cui è in esecuzione il server Vitest. È utile principalmente per il debug o per filtrare i test in base all'ambiente.

export const server: {
  /**
   * Piattaforma su cui il server Vitest è in esecuzione.
   * Lo stesso di chiamare `process.platform` sul server.
   */
  platform: Platform;
  /**
   * Versione del runtime del server Vitest.
   * Lo stesso di chiamare `process.version` sul server.
   */
  version: string;
  /**
   * Nome del provider del browser.
   */
  provider: string;
  /**
   * Nome del browser corrente.
   */
  browser: string;
  /**
   * Comandi disponibili per il browser.
   */
  commands: BrowserCommands;
  /**
   * Configurazione di test serializzata.
   */
  config: SerializedConfig;
};