Komutlar

Komut, sunucuda başka bir işlevi çağıran ve sonucu tarayıcıya döndüren bir fonksiyondur. Vitest, tarayıcı testlerinizde kullanabileceğiniz birçok yerleşik komut sunar.

Yerleşik Komutlar

Dosya İşleme

Tarayıcı testlerinizde dosyaları işlemek için readFile, writeFile ve removeFile API'lerini kullanabilirsiniz. Vitest 3.2'den itibaren, tüm yollar proje kök dizinine göre çözümlenir (manuel olarak geçersiz kılınmadıkça process.cwd()'dir). Daha önce, yollar test dosyasına göre çözülüyordu.

Varsayılan olarak, Vitest utf-8 kodlamasını kullanır, ancak bu, seçeneklerle geçersiz kılınabilir.

TIP

Bu API, güvenlik nedeniyle server.fs kısıtlamaları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 dışa aktarılan cdp yöntemi aracılığıyla ham Chrome Devtools Protokolü'ne (CDP) erişim sağlar. Bu özellik, özellikle kütüphane geliştiricilerinin üzerine araçlar inşa etmesi 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 sadece playwright sağlayıcısıyla ve yalnızca chromium tarayıcısı kullanılırken çalışır. Bu konuda daha fazla bilgiyi Playwright'ın CDPSession belgelerinde okuyabilirsiniz.

Özel Komutlar

Kendi komutlarınızı browser.commands yapılandırma seçeneği aracılığıyla da ekleyebilirsiniz. Bir kütüphane geliştiriyorsanız, bunları bir eklentideki config hook'u ile 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,
            },
          },
        },
      };
    },
  };
}

Daha sonra @vitest/browser/context'ten içe aktararak testlerinizde ç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 });
});

// TypeScript kullanıyorsanız, modülü genişletebilirsiniz
declare module '@vitest/browser/context' {
  interface BrowserCommands {
    myCustomCommand: (
      arg1: string,
      arg2: string
    ) => Promise<{
      someValue: true;
    }>;
  }
}

WARNING

Özel işlevler, aynı ada sahip olmaları durumunda yerleşik olanları geçersiz kılar.

Özel playwright komutları

Vitest, komut bağlamında birkaç playwright'a özgü özellik sunar:

• page, test iframe'ini içeren tam sayfayı ifade eder. Bu, orkestratör HTML'idir ve sistemin bozulmaması için dokunmamanız önerilir.
• frame, test edicinin Frame'ini çözümleyecek eşzamansız bir yöntemdir. page'e benzer bir API'ye sahiptir, ancak belirli yöntemleri desteklemez. Bir öğeyi sorgulamanız gerekiyorsa, daha kararlı ve hızlı olduğu için bunun yerine context.iframe'i kullanmayı tercih etmelisiniz.
• iframe, sayfadaki diğer öğeleri sorgulamak için kullanılması gereken bir FrameLocator'dır.
• context, benzersiz BrowserContext'i ifade eder.

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();
    // ekran görüntüsü üzerinde işlem yap
    return difference;
  }
};

TIP

TypeScript kullanıyorsanız, yapılandırmada, userEvent ve page seçeneklerinde otomatik tamamlama elde etmek için kurulum dosyanızda veya bir yapılandırma dosyanızda @vitest/browser/providers/playwright'ı referans göstermeyi unutmayın:

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

Özel webdriverio komutları

Vitest, webdriverio'ya özgü bazı özellikleri bağlam nesnesinde sunar:

• browser, WebdriverIO.Browser API'sidir.

Vitest, komut çağrılmadan önce browser.switchToFrame'i çağırarak webdriver bağlamını otomatik olarak test iframe'ine geçirir. Bu sayede $ ve $$ yöntemleri orkestratördeki değil, iframe içindeki öğeleri ifade eder. Ancak, webdriver olmayan API'ler yine de üst çerçeve bağlamını ifade etmeye devam edecektir.

TIP

TypeScript kullanıyorsanız, otomatik tamamlama almak için kurulum dosyanızda veya bir yapılandırma dosyanızda @vitest/browser/providers/webdriverio'yu referans almayı unutmayın:

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