Parancsok

A parancs egy olyan függvény, amely egy másik függvényt hív meg a szerveren, és az eredményt visszaadja a böngészőnek. A Vitest számos beépített parancsot tesz elérhetővé, amelyeket böngészőtesztjei során használhat.

Beépített parancsok

Fájlkezelés

A readFile, writeFile és removeFile API-kat használhatja a fájlok kezelésére a böngészőtesztjeiben. A Vitest 3.2 óta minden útvonal a projekt gyökeréhez képest oldódik fel (ami process.cwd(), hacsak nincs manuálisan felülírva). Korábban az útvonalak a tesztfájlhoz viszonyítva oldódtak fel.

Alapértelmezetten a Vitest utf-8 kódolást használ, de ezt az opciók segítségével felülírhatja.

TIP

Ez az API biztonsági okokból követi a server.fs korlátozásait.

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 munkamenet

A Vitest hozzáférést biztosít a nyers Chrome Devtools Protokollhoz a @vitest/browser/context modulból exportált cdp metóduson keresztül. Ez leginkább a könyvtárfejlesztők számára hasznos, akik eszközöket építhetnek rá.

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

A CDP munkamenet csak a playwright szolgáltatóval és csak a chromium böngésző használatakor érvényes. Erről bővebben a playwright CDPSession dokumentációjában olvashat.

Egyéni parancsok

Saját parancsokat is hozzáadhat a browser.commands konfigurációs beállításon keresztül. Ha könyvtárat fejleszt, akkor egy pluginon belüli config hookon keresztül is biztosíthatja őket:

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,
            },
          },
        },
      };
    },
  };
}

Ezután a @vitest/browser/context modulból importálva meghívhatja a tesztben:

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

Az egyéni függvények felülírják a beépített függvényeket, ha azonos nevük van.

Egyéni playwright parancsok

A Vitest számos playwright specifikus tulajdonságot tesz elérhetővé a parancs kontextusában.

• A page a teljes oldalt jelöli, amely tartalmazza a teszt iframe-et. Ez az orchestrator HTML, és valószínűleg nem szabad hozzányúlni, hogy ne okozzon problémát.
• A frame egy aszinkron metódus, amely feloldja a tesztelő Frame objektumot. Hasonló API-val rendelkezik, mint a page, de bizonyos metódusokat nem támogat. Ha elemet kell lekérdeznie, akkor inkább a context.iframe használatát részesítse előnyben, mert stabilabb és gyorsabb.
• Az iframe egy FrameLocator, amelyet más elemek lekérdezésére kell használni az oldalon.
• A context az egyedi BrowserContext objektumra hivatkozik.

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

Ha TypeScriptet használ, ne felejtse el hivatkozni a @vitest/browser/providers/playwright fájlra a beállítási fájljában vagy egy konfigurációs fájlban, hogy automatikus kiegészítést kapjon a konfigurációban, valamint a userEvent és page opciókban:

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

Egyéni webdriverio parancsok

A Vitest néhány webdriverio specifikus tulajdonságot tesz elérhetővé a kontextus objektumon.

• A browser a WebdriverIO.Browser API.

A Vitest automatikusan átállítja a webdriver kontextust a teszt iframe-re a browser.switchToFrame meghívásával a parancs meghívása előtt, így a $ és $$ metódusok az iframe-en belüli elemekre hivatkoznak, nem az orchestratorban, de a nem-webdriver API-k továbbra is a szülő frame kontextusára hivatkoznak.

TIP

Ha TypeScriptet használ, ne felejtse el hivatkozni a @vitest/browser/providers/webdriverio fájlra a beállítási fájljában vagy egy konfigurációs fájlban, hogy automatikus kiegészítést kapjon:

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