Strategi Ujian Hujung ke Hujung

Untuk menulis ujian E2E, anda memerlukan rangka kerja pengujian. Pilihan popular termasuk Playwright dan Cypress. Kedua-duanya membolehkan anda mengautomatikkan interaksi pelayar dan membuat penegasan tentang keadaan aplikasi.

• Playwright: Dikenali kerana sokongan berbilang pelayarnya (Chromium, Firefox, WebKit), keupayaan berjalan selari yang kukuh dan keupayaan menunggu automatik yang teguh.
• Cypress: Menawarkan pengalaman pembangun yang cemerlang dengan muat semula masa nyata dan alat penyahpepijatan berkuasa terus dalam pelayar.

Untuk contoh kita, kita akan menumpukan pada Playwright kerana kepelbagaian keupayaannya.

Menyediakan Playwright adalah mudah. Biasanya, anda memulakannya dalam projek anda dan Playwright menguruskan pemasangan pelayar. Kemudian, ia mencipta fail konfigurasi dan ujian contoh.

Untuk bermula, buka terminal dalam akar projek anda dan jalankan:

npm init playwright@latest
# Follow prompts: choose TypeScript, add a test file

Perintah ini memasang Playwright, binari pelayar dan menyediakan fail playwright.config.ts untuk tetapan ujian anda.

Playwright membolehkan anda mensimulasikan tindakan pengguna seperti mengklik butang, menaip dalam medan dan menavigasi halaman. Anda menggunakan 'pencari lokasi' untuk mencari elemen pada halaman.

Berikut ialah petikan kod yang menunjukkan cara menavigasi dan mengisi borang log masuk:

// tests/login.spec.ts
import { test, expect } from '@playwright/test';

test('should navigate to login and fill form', async ({ page }) => {
  await page.goto('http://localhost:3000/login');
  await page.locator('input[type="email"]').fill('test@example.com');
  await page.locator('input[type="password"]').fill('password123');
  await page.locator('button', { hasText: 'Login' }).click();
  // Further assertions would go here
});

Penting untuk diingat bahawa ujian E2E tidak memanggil prosedur bahagian belakang tRPC anda secara terus. Sebaliknya, ujian ini berinteraksi dengan antara muka pengguna (UI) bahagian hadapan anda.

Apabila UI anda mencetuskan pertanyaan atau mutasi tRPC (contohnya, menghantar borang), ujian E2E memerhatikan perubahan yang terhasil pada halaman. Anda mengesahkan bahawa UI dikemas kini dengan betul, yang menunjukkan panggilan tRPC dan logik bahagian belakang yang mendasarinya berfungsi seperti yang dijangka.

Mari kita teliti satu contoh: menguji penciptaan catatan baharu dalam aplikasi anda. Ujian E2E akan mensimulasikan pengguna yang menavigasi ke halaman 'cipta catatan', mengisi borang, menghantarnya dan kemudian mengesahkan bahawa catatan baharu muncul dalam senarai.

// tests/post-creation.spec.ts
import { test, expect } from '@playwright/test';

test('should allow a user to create a new post', async ({ page }) => {
  await page.goto('http://localhost:3000/posts/new');
  await page.locator('input[placeholder="Title"]').fill('My New E2E Post');
  await page.locator('textarea[placeholder="Content"]').fill('This is content from an E2E test.');
  await page.locator('button', { hasText: 'Create Post' }).click();

  // Assert redirection and new post visibility
  await expect(page).toHaveURL(/posts$/); // Should redirect to /posts
  await expect(page.locator('h2', { hasText: 'My New E2E Post' })).toBeVisible();
});

Untuk ujian E2E yang boleh dipercayai, anda memerlukan keadaan permulaan yang boleh diramal. Ini bermakna anda perlu mengurus data ujian dengan teliti. Anda biasanya perlu 'mengisi' pangkalan data dengan data tertentu sebelum ujian dijalankan dan 'membersihkan' data tersebut selepasnya.

Strateginya termasuk memanggil titik akhir API khas (contohnya, /api/test/reset-db) sebelum setiap ujian atau berinteraksi terus dengan tika pangkalan data ujian. Ini memastikan setiap ujian bermula dengan keadaan bersih dan terasing daripada ujian lain.

Selepas melakukan tindakan, ujian E2E menggunakan penegasan untuk memeriksa sama ada aplikasi berada dalam keadaan yang dijangka. Playwright menyediakan kaedah penegasan berkuasa dengan penantian automatik.

Ciri 'penantian automatik' ini amat penting untuk menguji kemas kini UI tak segerak, bagi memastikan elemen kelihatan atau boleh digunakan sebelum penegasan atau tindakan dicuba.

// Example assertions after actions
await expect(page.locator('.success-message')).toBeVisible();
await expect(page.locator('#item-count')).toHaveText('10');
await expect(page).toHaveURL(/dashboard/); // Checks the current URL
await expect(page.locator('button', { hasText: 'Delete' })).toBeDisabled();

Kita telah meneroka pengujian Hujung ke Hujung dan memahami peranannya dalam mengesahkan perjalanan pengguna yang lengkap dalam aplikasi tRPC. Dengan mensimulasikan interaksi pengguna sebenar menggunakan alat seperti Playwright, anda boleh memastikan bahagian hadapan dan bahagian belakang anda berkomunikasi dengan lancar serta memberikan pengalaman yang dijangka.

Ujian E2E ialah benteng pertahanan terakhir anda, yang mengesan isu integrasi dan memastikan aplikasi anda berfungsi seperti yang dimaksudkan dari perspektif pengguna. Teruskan berlatih strategi ini untuk membina aplikasi tRPC yang kukuh dan boleh dipercayai!