Komutlar

Komut, sunucudaki belirli bir fonksiyonu tetikleyen ve sonucunu tarayıcıya geri ileten bir fonksiyondur. Vitest, tarayıcı testlerinizde kullanabileceğiniz birkaç yerleşik komut sunar.

Yerleşik Komutlar

Dosya İşleme

Tarayıcı testlerinizde dosyaları işlemek için readFile, writeFile ve removeFile API'lerini kullanabilirsiniz. Tüm yollar, başka bir dosyada yer alan bir yardımcı fonksiyonda çağrılmış olsalar bile test dosyasına göre çözümlenir.

Varsayılan olarak, Vitest utf-8 kodlamasını kullanır, ancak bu seçeneklerle değiştirilebilir.

TIP

Bu API, güvenlik nedenleriyle server.fs sınırlamalarına tabidir.

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 Oturumu

Vitest, @vitest/browser/context'ten içe aktarılan cdp yöntemi aracılığıyla ham Chrome Devtools Protokolüne erişim sağlar. Bu özellik, genellikle kütüphane yazarlarının bunun üzerine araçlar geliştirmesi için kullanışlıdı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

CDP oturumu yalnızca playwright sağlayıcısında ve yalnızca chromium tarayıcısı kullanılırken çalışır. Bu konuda daha fazla bilgiyi Playwright'ın CDPSession belgelerinde bulabilirsiniz.

Özel Komutlar

Ayrıca browser.commands yapılandırma seçeneğini kullanarak kendi komutlarınızı ekleyebilirsiniz. Bir kütüphane geliştiriyorsanız, bunları bir eklenti içindeki config kancasını kullanarak sağlayabilirsiniz:

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

Ardından, @vitest/browser/context'ten içe aktararak testinizde çağırabilirsiniz:

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

Özel fonksiyonlar, aynı isme sahip olmaları durumunda yerleşik olanları geçersiz kılar.

Özel playwright komutları

Vitest, komut bağlamında birkaç playwright'a özgü özellik sağlar.

• page, test iframe'ini içeren tam sayfaya referans verir. Bu, orchestrator HTML'idir ve bozulmaması için dokunmamanız önerilir.
• frame, test Frame nesnesini çözümleyen bir async yöntemidir. page'e benzer bir API'ye sahiptir, ancak belirli yöntemleri desteklemez. Bir öğe sorgulamak isterseniz, daha kararlı ve hızlı olduğu için bunun yerine context.iframe kullanmayı tercih etmelisiniz.
• iframe, sayfadaki diğer öğeleri sorgulamak için kullanabileceğiniz bir FrameLocator'dır.
• context, benzersiz BrowserContext'e referans verir.

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

TypeScript kullanıyorsanız, yapılandırmada, userEvent ve page seçeneklerinde otomatik tamamlama almak için @vitest/browser/providers/playwright'ı tsconfig "compilerOptions.types" alanınıza eklemeyi unutmayın:

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

Özel webdriverio komutları

Vitest, bağlam nesnesinde bazı webdriverio'ya özgü özellikler sağlar.

• browser, WebdriverIO.Browser API'sidir.

Vitest, komut çağrılmadan önce browser.switchToFrame çağrısı yaparak webdriver bağlamını otomatik olarak test iframe'ine değiştirir, böylece $ ve $$ yöntemleri düzenleyicide değil, iframe içindeki öğelere referans verir, ancak webdriver olmayan API'ler yine de üst çerçeve bağlamına referans vermeye devam edecektir.

TIP

TypeScript kullanıyorsanız, otomatik tamamlama almak için @vitest/browser/providers/webdriverio'yu tsconfig "compilerOptions.types" alanınıza eklemeyi unutmayın:

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