Testy automatyczne z Test Cafe

Testy automatyczne z Test Cafe to pierwszy wpis na temat przedmiotowego narzędzia na naszym serwisie. Chcemy abyście jako użytkownicy i czytelni mogli poznawać różne narzędzia do testowania.

Wprowadzenie

• TestCafe to open-source’owe narzędzie do automatyzacji testów UI aplikacji webowych. Zostało stworzone przez firmę DevExpress, a jego celem było zapewnienie prostoty, stabilności i nowoczesnego podejścia do testowania interfejsów użytkownika. TestCafe działa w środowisku Node.js i pozwala pisać testy w językach JavaScript lub TypeScript, co czyni go świetnym wyborem dla zespołów frontendowych.

  W odróżnieniu od tradycyjnych rozwiązań, takich jak Selenium, TestCafe nie wymaga WebDrivera ani dodatkowych zależności przeglądarkowych. Wykorzystuje własny mechanizm proxy i działa bezpośrednio z przeglądarkami, co upraszcza konfigurację i zwiększa stabilność testów.

  Co wyróżnia TestCafe?

  Oto kilka cech, które sprawiają, że TestCafe jest tak atrakcyjny dla programistów i testerów:

  • Brak WebDrivera
    TestCafe działa z przeglądarkami natywnie, bez potrzeby konfiguracji sterowników czy środowiska uruchomieniowego. To ogromne ułatwienie, zwłaszcza przy uruchamianiu testów na różnych maszynach i systemach CI.

  • Wieloplatformowość
    Działa na wszystkich głównych systemach operacyjnych – Windows, macOS i Linux – co czyni go elastycznym wyborem dla zespołów rozproszonych.

  • Testy równoległe
    Dzięki wbudowanej obsłudze uruchamiania testów w wielu przeglądarkach jednocześnie, TestCafe pozwala znacząco skrócić czas wykonywania testów.

  • Łatwa integracja z CI/CD
    TestCafe świetnie współpracuje z systemami takimi jak GitHub Actions, GitLab CI, Jenkins, CircleCI i innymi. Generuje czytelne raporty i umożliwia eksport wyników w różnych formatach (np. JSON, JUnit).

  • Prosta składnia i czytelność kodu
    Testy pisane w TestCafe są zwięzłe, deklaratywne i łatwe do zrozumienia nawet dla osób spoza zespołu developerskiego.

  Dla kogo jest TestCafe?

  TestCafe to świetne narzędzie zarówno dla początkujących testerów, jak i dla doświadczonych developerów, którzy chcą szybko zautomatyzować testy UI. Jego niski próg wejścia sprawia, że można go wdrożyć nawet w niewielkich projektach, a jednocześnie skaluje się dobrze do większych środowisk produkcyjnych.

  Sprawdzi się szczególnie wtedy, gdy:

  • potrzebujesz niezawodnych testów E2E bez rozbudowanej infrastruktury,

  • zależy Ci na szybkim uruchamianiu testów lokalnie i w CI,

  • tworzysz aplikację SPA (np. w React, Angular, Vue),

  • chcesz pisać testy w nowoczesnym JavaScript/TypeScript.

Zanim zaczniemy pisać nasze pierwsze testy, musimy przygotować środowisko. Na szczęście TestCafe nie wymaga skomplikowanej konfiguracji – wystarczy Node.js i kilka poleceń w terminalu. C

Krok 1: Upewnij się, że masz Node.js

TestCafe działa w środowisku Node.js, więc jeśli jeszcze go nie masz, zainstaluj najnowszą wersję ze strony: https://nodejs.org

Krok 2: Utwórz nowy projekt (opcjonalnie)

Możesz zainstalować TestCafe globalnie lub jako zależność w konkretnym projekcie. Zalecane podejście to utworzenie dedykowanego projektu:

Krok 3: Instalacja TestCafe

Zainstaluj TestCafe lokalnie w projekcie:

npm install --save-dev testcafe

lub

npm install -g testcafe

Krok 4: Stwórz pierwszy plik testowy

Utwórz plik firstTest.test.js:

import { Selector } from 'testcafe';

fixture('Test strony głównej') // poprawiono składnię fixture
.page('https://example-page.pl'); // poprawiono składnię page

test('Strona główna wyświetla nagłówek i obrazek', async t => {
const naglowek = Selector('h1'); // lub inny selektor np. '#main-title'
const obrazek = Selector('img[alt="Logo"]'); // dopasuj do rzeczywistego ALT lub ID

await t
.expect(naglowek.exists).ok('Nagłówek nie istnieje na stronie')
.expect(naglowek.innerText).contains('Witaj', 'Nagłówek nie zawiera oczekiwanego tekstu')
.expect(obrazek.visible).ok('Obrazek nie jest widoczny');

});

Następnie uruchom test z linii komend:

npx testcafe chrome firstTest.test.js

Inne przykłady testów

Jeżeli chciałbyś zalogować się do przykładowej strony, to najprostszy sposób to:

import { Selector } from 'testcafe';

fixture('Login Page') 
.page('https://example-page.pl/login'); 

test('Użytkownik może się zalogować', async t => {
await t
.typeText('#username', 'test_user')
.typeText('#password', 'tajnehaslo')
.click('#login-button')
.expect(Selector('#welcome-message').innerText).contains('Hello');
});

Praca z checkboxami / radio / select (formularz)

import { Selector } from 'testcafe’;

fixture('Formularz - pola wyboru')
.page('https://example-page.pl/form');

test('Użytkownik wypełnia formularz i wysyła', async t => {
const imie = Selector('#name');
const newsletter = Selector('#newsletter');
const plecMezczyzna = Selector('input[name="gender"][value="male"]');
const kraj = Selector('#country');
const submit = Selector('button[type="submit"]');
const successMsg = Selector('.success-message');

await t
.typeText(imie, 'Rafał')
.click(newsletter) // checkbox
.click(plecMezczyzna) // radio
.click(kraj)
.click(kraj.find('option').withText('Polska')) // select
.click(submit)
.expect(successMsg.innerText)
.contains('Dziękujemy', 'Nie pojawił się komunikat sukcesu');
});

Upload pliku (np. avatar, faktura, dokument)

import path from 'path';
import { Selector } from 'testcafe';

fixture('Upload pliku')
.page('https://example-page.pl/profile');

test('Użytkownik może wgrać plik', async t => {
const fileInput = Selector('input[type="file"]#avatar');
const uploadBtn = Selector('#upload-button');
const avatarPreview = Selector('.avatar-preview img');

const filePath = path.join(__dirname, 'test-data', 'avatar.png');

await t
.setFilesToUpload(fileInput, [filePath])
.click(uploadBtn)
.expect(avatarPreview.exists)
.ok('Podgląd avatara nie pojawił się po uploadzie');
});

Test listy / tabeli + filtr + asercja elementów

import { Selector } from 'testcafe';

fixture('Lista produktów')
.page('https://example-page.pl/products');

test('Filtrowanie produktów po nazwie', async t => {
const search = Selector('#search-input');
const products = Selector('.product-item');
const firstProductTitle = products.nth(0).find('.title');

await t
.typeText(search, 'Laptop', { replace: true })
.pressKey('enter')
.expect(products.count)
.gt(0, 'Brak wyników po filtrowaniu')
.expect(firstProductTitle.innerText)
.contains('Laptop', 'Pierwszy wynik nie pasuje do filtra');
});

Ostatnie zmiany

Test Cafe nadal się rozwija – mimo, że na ich stronie od dawna zaniedbane są tematy zmian. Warto spojrzeć na inne źródła. Zerknij np. na npmjs.com.

• TestCafe rozwija ostatnio głównie obszary stabilności i kompatybilności z nowoczesnym ekosystemem (Chrome/Node/ESM).

• Wprowadzono t.getCurrentCDPSession() dla użytkowników Native Automation (CDP), co ułatwia debugging i analizę problemów po stronie przeglądarki.

• Dodano wsparcie dla nowego headless Chromium (lepsza zgodność z realnym trybem przeglądarki).

• W konfiguracji pojawiła się opcja esm, a także uporządkowano typy (Metadata jako interface).

• W wydaniach 3.7.x skupiono się na naprawach typowych problemów E2E: proxy mode, Angular, Docker, drag&drop, CodeMirror.

Podsumowanie