Pengalaman Menggunakan Playwright untuk E2E Testing

Saya pernah mendengar berbagai alat untuk pengujian: Selenium, Cypress, ataupun yang lain. Tetapi, Playwright adalah nama yang baru saya dengar di awal tahun 2025, dan popularitasnya meroket di GitHub.

Pada project tugas akhir yang saya kerjakan, awalnya saya menggunakan Cypress—yang tentunya memiliki reputasi bagus di ranah software quality assurance. Cypress memiliki fitur yang memungkinkan kita untuk melakukan pengujian secara interaktif, yaitu Cypress Studio. Hanya dengan mengklik tombol, elemen, navigasi halaman, dan mengisi formulir, kode uji akan ter-generate secara otomatis.

Meskipun kedengarannya sederhana, selama menggunakan Cypress Studio, saya mengalami kesulitan; UI terlalu ramai bagi saya yang baru mencoba, dan banyak menu yang tidak saya pahami. Dari fitur interaktif ini, Cypress juga menginstal aplikasi pengujian secara terpisah, sehingga memakan banyak ruang padahal saya hanya memerlukan fitur E2E testing saja.

Dari sini, saya mencari alternatif alat pengujian lain, meriset di komunitas Reddit dan YouTube, yang pada akhirnya membawa saya untuk mencoba Playwright.

Playwright memiliki fitur serupa dengan Cypress Studio, namanya Codegen. Bedanya, Codegen sangat mudah digunakan dan merupakan produk yang sudah matang, sementara Cypress Studio masih produk eksperimental. Hanya dengan menonton satu video tutorial singkat, saya langsung paham bagaimana cara kerja fitur Codegen. Selain itu, Playwright juga terintegrasi dengan VS Code, yang memungkinkan proses pengujian dilakukan dengan cepat. Alih-alih menginstal aplikasi terpisah, Playwright terintegrasi dengan development environment yang familiar, inilah yang saya suka dari Playwright.

Cara kerja Codegen adalah seperti berikut:

npx playwright codegen http://localhost:3000

Playwright akan membuka browser otomatis dan merekam semua interaksi kita dengan halaman tersebut (klik, ketik, scroll, dan sebagainya), kemudian menghasilkan kode uji otomatis secara real-time.

Hasilnya biasanya akan seperti ini:

import { test, expect } from '@playwright/test';

test('basic test', async ({ page }) => {
  await page.goto('http://localhost:3000');
  await page.getByRole('button', { name: 'Login' }).click();
  await page.getByPlaceholder('Email').fill('test@example.com');
  await page.getByPlaceholder('Password').fill('yourpassword');
  await page.getByRole('button', { name: 'Submit' }).click();
});

Kode ini bisa langsung dimasukkan ke dalam test file .spec.ts dan dijalankan menggunakan:

npx playwright test

Secara keseluruhan, saya sangat senang menemukan teknologi seperti Playwright, khususnya Codegen. Saya harap banyak teknologi lain yang mengadopsi pendekatan yang sama, di mana fitur inti dapat dikerjakan dengan mudah dan tidak mengintimidasi.