Pliki, które użytkownik naprawdę wysyła

Ten wpis jest częścią serii Podstawy Playwright. Jeśli pominąłeś poprzedni, przeczytaj Część 13 — Uprawnienia, których użytkownik odmawia.

---

Wprowadzenie — przycisk był włączony

Test klika „Wyślij”, przycisk jest włączony, test przechodzi. Plik użytkownika to CSV na 40 MB. Serwer go odrzucił. UI nic nie powiedziało. Suite nigdy nie podpięła pliku.

Testy plików są o bajtach, nazwie i odmowie. Nie o atrybucie disabled kontrolki.

Wgraj plik, o który ci chodzi

setInputFiles działa na input[type=file], także na inputach schowanych wizualnie.

import path from 'node:path';

test('accepts a small CSV and shows the row count', async ({ page }) => {
  await page.goto('/import');
  await page.getByLabel('Spreadsheet').setInputFiles(
    path.join(__dirname, 'fixtures', 'three-rows.csv'),
  );
  await page.getByRole('button', { name: 'Import' }).click();
  await expect(page.getByRole('status')).toHaveText('3 rows ready');
});

Fixture mają być małe i w repozytorium. Test, który zależy od pliku na czyimś pulpicie, nie jest testem.

Sprawdzaj coś, co może być prawdą tylko wtedy, gdy treść została odczytana: liczbę wierszy, nazwę kolumny, sumę. „Plik wybrany” jest tą samą klasą asercji co „przycisk włączony”.

Odrzuć plik, którego nie chcesz

Dodaj jedną odmowę typu i jedną rozmiaru, jeśli produkt ma te reguły.

test('refuses an executable', async ({ page }) => {
  await page.goto('/import');
  await page.getByLabel('Spreadsheet').setInputFiles(
    path.join(__dirname, 'fixtures', 'not-a-sheet.bin'),
  );
  await expect(page.getByRole('alert')).toHaveText('Use a CSV file');
  await expect(page.getByRole('button', { name: 'Import' })).toBeDisabled();
});

Jeśli sprawdzenie jest tylko na serwerze, wyślij formularz i sprawdź komunikat serwera. Atrybut accept po stronie klienta nie jest regułą. Użytkownik go obejdzie.

Pobieranie

Czekaj na pobranie, potem je przeczytaj. Nie sprawdzaj samego kliknięcia.

test('downloads the invoice with the order number in the name', async ({ page }) => {
  await page.goto('/orders/1001');
  const [download] = await Promise.all([
    page.waitForEvent('download'),
    page.getByRole('link', { name: 'Download invoice' }).click(),
  ]);
  expect(download.suggestedFilename()).toBe('invoice-1001.pdf');
  const file = await download.path();
  expect(file).toBeTruthy();
});

Otwórz plik, gdy format jest prosty. Porównanie fixture CSV albo wyciąg numeru zamówienia z PDF łapie pobranie, które jest stroną błędu HTML nazwaną .pdf. Porównanie każdego bajtu wygenerowanego PDF padnie na znacznikach czasu. Porównuj pola, za które użytkownik zapłacił.

Podsumowanie

Podepnij prawdziwy plik. Sprawdź fakt z jego środka. Odrzuć jeden niedozwolony plik. W drodze powrotnej czekaj na pobranie i sprawdź nazwę oraz jedno pole.

Zadanie na ten tydzień: Zamień jeden test uploadu, który nigdy nie woła setInputFiles, na fixture z dwoma albo trzema wierszami. Sprawdź wartość, która jest w środku pliku.

---

Następny wpis w serii: Część 15 — Sprawdzaj stronę, którą otworzyło kliknięcie.