Panduan Lengkap Playwright Cross-Browser Testing 2026

Strategi Tiered Testing untuk CI/CD

Menjalankan semua test di semua browser pada setiap pull request akan melipatgandakan waktu CI sebanyak tiga kali lipat tanpa proporsi bug coverage yang sepadan. Strategi praktis Playwright Cross-Browser Testing 2026 adalah tiered testing — membagi test ke dalam tiga tier berdasarkan frekuensi dan kedalaman.

Strategi tiered testing mengoptimalkan waktu CI/CD tetap cepat tanpa mengorbankan coverage browser

Tier 1: Setiap Pull Request (Chromium Saja)

• Jalankan semua test di Chromium saja untuk setiap pull request
• Waktu CI tetap cepat — sekitar 3-5 menit untuk suite 200 test
• Cukup untuk menangkap lebih dari 90% bug karena sebagian besar bug logic tidak spesifik browser

Tier 2: Merge ke Main (Chromium + Firefox + WebKit)

• Jalankan full cross-browser test saat merge ke branch main
• Menangkap browser-specific issues yang tidak terdeteksi di Tier 1
• Waktu eksekusi sekitar 10-15 menit — masih wajar untuk merge gate

Tier 3: Nightly (Semua Browser, Full Suite)

• Jalankan semua test di semua browser setiap malam
• Termasuk visual regression tests dan screenshot comparison
• Mendeteksi perubahan yang disebabkan oleh browser update otomatis

Berikut konfigurasi untuk strategi tiered:

// playwright.config.ts
import { defineConfig, devices } from '@playwright/test';

const isCIFullRun = process.env.CROSS_BROWSER === 'true';

export default defineConfig({
  projects: [
    // Selalu jalankan Chromium
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
    // Firefox dan WebKit hanya di cross-browser mode
    ...(isCIFullRun ? [
      {
        name: 'firefox',
        use: { ...devices['Desktop Firefox'] },
      },
      {
        name: 'webkit',
        use: { ...devices['Desktop Safari'] },
      },
    ] : []),
  ],
});

Contoh implementasi di GitHub Actions:

# .github/workflows/tests.yml
name: Playwright Tests
on: [push, pull_request]

jobs:
  test-chromium:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm ci
      - run: npx playwright test --project=chromium

  test-cross-browser:
    if: github.ref == 'refs/heads/main'
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm ci
      - run: CROSS_BROWSER=true npx playwright test

  test-nightly:
    if: github.event_name == 'schedule'
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm ci
      - run: CROSS_BROWSER=true npx playwright test

Handling Perbedaan Browser Behavior

Kadang test harus berperilaku berbeda di setiap browser. Playwright menyediakan properti browserName untuk menulis kondisional logic yang spesifik per browser:

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

test('date input works across browsers', async ({ page, browserName }) => {
  await page.goto('/form');
  
  if (browserName === 'webkit') {
    // WebKit date picker memiliki UI yang berbeda
    await page.click('input[type="date"]');
    await page.selectOption('.webkit-date-picker', '2026-07');
  } else {
    // Chrome dan Firefox bisa langsung fill
    await page.fill('input[type="date"]', '2026-07-15');
  }
  
  await expect(page.locator('.date-display')).toHaveText('July 15, 2026');
});

Pendekatan lain adalah membuat test fixtures terpisah per browser. Ini lebih bersih daripada menumpuk kondisional logic di dalam satu test:

// fixtures/cross-browser.ts
import { test as base } from '@playwright/test';

type Fixtures = {
  datePickerFill: (page: any, date: string) => Promise<void>;
};

export const test = base.extend<Fixtures>({
  datePickerFill: async ({ page, browserName }, use) => {
    const fill = async (p: any, date: string) => {
      if (browserName === 'webkit') {
        await p.click('input[type="date"]');
        await p.selectOption('.webkit-date-picker', date.slice(0, 7));
      } else {
        await p.fill('input[type="date"]', date);
      }
    };
    await use(fill);
  },
});

Best Practices Playwright Cross-Browser Testing untuk Produksi

Berikut praktik terbaik yang harus diikuti saat menjalankan Playwright Cross-Browser Testing di lingkungan produksi:

1. Gunakan auto-waiting: Playwright memiliki built-in auto-waiting yang mengurangi test flakiness secara signifikan. Gunakan locators seperti getByRole, getByText, dan getByTestId alih-alih XPath atau CSS selectors yang rapuh.
2. Parallel execution: Jalankan test secara paralel untuk mempercepat waktu eksekusi. Playwright Test mendukung parallel execution secara default dengan jumlah worker yang bisa dikonfigurasi.
3. Test retries: Konfigurasi retries untuk menangani flaky tests yang mungkin terjadi di browser tertentu. Gunakan retries: 2 di config untuk retry otomatis.
4. Visual regression testing: Gunakan fitur screenshot comparison untuk mendeteksi perubahan visual yang tidak diinginkan di setiap browser. Perbandingan screenshot antar browser membantu menemukan rendering issues.
5. CI/CD integration: Gunakan Playwright Docker image yang sudah termasuk semua browser untuk CI yang konsisten. Pelajari lebih lanjut tentang hardening keamanan Docker container untuk menjaga image testing tetap aman di produksi.
6. Trace viewer: Gunakan trace viewer untuk debug test failures — merekam screenshots, network requests, dan console logs dalam format yang bisa diputar ulang.
7. Page Object Model: Implementasi POM untuk memisahkan test logic dari page structure, memudahkan maintenance saat UI berubah.
8. Environment-specific config: Gunakan environment variables untuk mengatur URL, credentials, dan browser selection per environment.

Perbandingan Playwright vs Selenium untuk Cross-Browser Testing

Playwright dan Selenium adalah dua framework terpopuler untuk automated testing. Berikut perbandingan berdasarkan data benchmark tahun 2026:

Untuk project baru di tahun 2026, Playwright menjadi pilihan yang lebih praktis karena tidak memerlukan setup WebDriver dan memiliki fitur built-in yang mengurangi kode berulang. Selenium tetap relevan untuk project lama yang sudah terintegrasi mendalam dengan ekosistem Selenium.

FAQ: Pertanyaan Umum tentang Playwright Cross-Browser Testing

Sumber Referensi

1. Playwright Official Documentation — Browsers. https://playwright.dev/docs/browsers
2. BecomeQA — Cross-Browser Testing with Playwright. https://becomeqa.com/en/articles/cross-browser-testing-playwright
3. Codoid — Playwright Cross-browser Testing Tutorial. https://codoid.com/automation-testing/playwright-cross-browser-testing-tutorial/
4. Software Testing Tutorials — How to Perform Cross Browser Testing in Playwright. https://software-testing-tutorials-automation.com/2025/08/cross-browser-testing-in-playwright.html
5. BrowserStack — Cross-Browser Testing using Playwright. https://www.browserstack.com/guide/cross-browser-testing-using-playwright

Image Attribution

• Photo by Ilya Pavlov on Unsplash - Unsplash
• Photo by Arnold Francisca on Unsplash - Unsplash
• Photo by Kazden Cattuti on Unsplash - Unsplash