Příkazy

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

Vestavěné příkazy

Práce se soubory

Pro práci se soubory ve vašich prohlížečových testech můžete použít API readFile, writeFile a removeFile. Všechny cesty jsou vyhodnocovány relativně k testovacímu souboru, i když jsou volány v pomocné funkci umístěné v jiném souboru.

Ve výchozím nastavení Vitest používá kódování utf-8, ale můžete jej přepsat pomocí voleb.

TIP

Toto API z bezpečnostních důvodů respektuje omezení 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 raw Chrome Devtools Protocol prostřednictvím metody cdp exportované z @vitest/browser/context. Je většinou užitečné pro autory knihoven při vytváření nástrojů na jeho základě.

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 informací najdete v dokumentaci CDPSession od playwright.

Vlastní příkazy

Můžete také přidat své vlastní příkazy pomocí konfigurační volby browser.commands. Pokud vyvíjíte knihovnu, můžete je poskytnout prostřednictvím hooku config v rámci 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 v rámci svého testu importem 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 přepíší vestavěné, pokud mají shodný název.

Vlastní příkazy pro playwright

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

• page odkazuje na celou stránku, která obsahuje testovací iframe. Jedná se o řídicí stránku HTML a pravděpodobně byste se ho neměli dotýkat, abyste nenarušili funkčnost.
• frame je asynchronní metoda, která vrátí testovací Frame. Má podobné API jako page, ale nepodporuje určité metody. Pokud potřebujete vyhledat prvek, měli byste raději použít context.iframe, protože je stabilnější a rychlejší.
• iframe je FrameLocator, který slouží k vyhledávání dalších prvků 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 přidat @vitest/browser/providers/playwright do pole "compilerOptions.types" ve vašem tsconfig, abyste získali autocompletion v konfiguraci a u možností userEvent a page:

{
  "compilerOptions": {
    "types": ["@vitest/browser/providers/playwright"]
  }
}

Vlastní příkazy pro webdriverio

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

• browser je API WebdriverIO.Browser.

Vitest automaticky přepne kontext webdriver na testovací iframe voláním browser.switchToFrame před voláním příkazu. Metody $ a $$ tak odkazují na prvky uvnitř iframe, nikoli v řídicí stránce, ale API mimo webdriver budou stále odkazovat na kontext nadřazeného rámce.

TIP

Pokud používáte TypeScript, nezapomeňte přidat @vitest/browser/providers/webdriverio do pole "compilerOptions.types" ve vašem tsconfig, abyste získali autocompletion:

{
  "compilerOptions": {
    "types": ["@vitest/browser/providers/webdriverio"]
  }
}