Příkazy

Příkaz je funkce, která vyvolá jinou funkci na serveru a předá výsledek zpět do prohlížeče. Vitest zpřístupňuje několik vestavěných příkazů, které můžete použít ve svých prohlížečových testech.

Vestavěné příkazy

Manipulace se soubory

Pro manipulaci se soubory ve vašich prohlížečových testech můžete použít API readFile, writeFile a removeFile. Od Vitest 3.2 jsou všechny cesty řešeny relativně k projektovému kořenu (což je process.cwd(), pokud není ručně přepsáno). Dříve byly cesty řešeny relativně k testovému souboru.

Ve výchozím nastavení Vitest používá kódování utf-8, ale můžete ho změnit pomocí voleb.

TIP

Toto API z bezpečnostních důvodů podléhá omezením server.fs.

import { server } from '@vitest/browser/context';

const { readFile, writeFile, removeFile } = server.commands;

it('handles files', async () => {
  const file = './test.txt';

  await writeFile(file, 'hello world');
  const content = await readFile(file);

  expect(content).toBe('hello world');

  await removeFile(file);
});

CDP Session

Vitest zpřístupňuje přístup k syrovému Chrome Devtools Protocol prostřednictvím metody cdp exportované z @vitest/browser/context. Je to většinou užitečné pro autory knihoven k vytváření nástrojů na základě toho.

import { cdp } from '@vitest/browser/context';

const input = document.createElement('input');
document.body.appendChild(input);
input.focus();

await cdp().send('Input.dispatchKeyEvent', {
  type: 'keyDown',
  text: 'a',
});

expect(input).toHaveValue('a');

WARNING

CDP session funguje pouze s poskytovatelem playwright a pouze při použití prohlížeče chromium. Více si o tom můžete přečíst v dokumentaci CDPSession od Playwrightu.

Vlastní příkazy

Můžete také přidat své vlastní příkazy prostřednictvím konfigurační volby browser.commands. Pokud vyvíjíte knihovnu, můžete je poskytnout prostřednictvím config hooku uvnitř pluginu:

import type { Plugin } from 'vitest/config';
import type { BrowserCommand } from 'vitest/node';

const myCustomCommand: BrowserCommand<[arg1: string, arg2: string]> = (
  { testPath, provider },
  arg1,
  arg2
) => {
  if (provider.name === 'playwright') {
    console.log(testPath, arg1, arg2);
    return { someValue: true };
  }

  throw new Error(`provider ${provider.name} is not supported`);
};

export default function BrowserCommands(): Plugin {
  return {
    name: 'vitest:custom-commands',
    config() {
      return {
        test: {
          browser: {
            commands: {
              myCustomCommand,
            },
          },
        },
      };
    },
  };
}

Poté jej můžete volat uvnitř svého testu importováním z @vitest/browser/context:

import { commands } from '@vitest/browser/context';
import { expect, test } from 'vitest';

test('custom command works correctly', async () => {
  const result = await commands.myCustomCommand('test1', 'test2');
  expect(result).toEqual({ someValue: true });
});

// if you are using TypeScript, you can augment the module
declare module '@vitest/browser/context' {
  interface BrowserCommands {
    myCustomCommand: (
      arg1: string,
      arg2: string
    ) => Promise<{
      someValue: true;
    }>;
  }
}

WARNING

Vlastní funkce nahradí vestavěné, pokud mají stejný název.

Vlastní příkazy playwright

Vitest zpřístupňuje několik vlastností specifických pro playwright v kontextu příkazu.

• page odkazuje na celou stránku, která obsahuje testovací iframe. Toto je orchestrátor HTML a pravděpodobně byste se ho neměli dotýkat, aby nedošlo k narušení funkčnosti.
• frame je asynchronní metoda, která vyřeší tester Frame. Má podobné API jako page, ale nepodporuje určité metody. Pokud potřebujete vyhledat element, měli byste raději použít context.iframe, protože je stabilnější a rychlejší.
• iframe je FrameLocator, který by měl být použit k dotazování dalších elementů na stránce.
• context odkazuje na unikátní BrowserContext.

import { BrowserCommand } from 'vitest/node';

export const myCommand: BrowserCommand<[string, number]> = async (
  ctx,
  arg1: string,
  arg2: number
) => {
  if (ctx.provider.name === 'playwright') {
    const element = await ctx.iframe.findByRole('alert');
    const screenshot = await element.screenshot();
    // do something with the screenshot
    return difference;
  }
};

TIP

Pokud používáte TypeScript, nezapomeňte odkazovat na @vitest/browser/providers/playwright ve vašem setup souboru nebo konfiguračním souboru, abyste získali automatické doplňování v konfiguraci a v možnostech userEvent a page:

/// <reference types="@vitest/browser/providers/playwright" />

Vlastní příkazy webdriverio

Vitest zpřístupňuje některé vlastnosti specifické pro webdriverio na objektu kontextu.

• browser je API WebdriverIO.Browser.

Vitest automaticky přepne kontext webdriver na testovací iframe voláním browser.switchToFrame před spuštěním příkazu. Díky tomu metody $ a $$ odkazují na elementy uvnitř iframe, ne v orchestrátoru. Nicméně API, která nejsou součástí webdriveru, budou stále odkazovat na kontext rodičovského rámce.

TIP

Pokud používáte TypeScript, nezapomeňte odkazovat na @vitest/browser/providers/webdriverio ve vašem setup souboru nebo konfiguračním souboru, abyste získali automatické doplňování:

/// <reference types="@vitest/browser/providers/webdriverio" />