Belajar Playwright - Cross-Browser & Device Testing

#Pendahuluan

Test yang hanya berjalan di satu browser memberi rasa aman yang palsu — bug layout atau perilaku sering muncul hanya di engine tertentu. Episode 10 ini membahas cross-browser testing: menjalankan test yang sama di Chromium, Firefox, dan WebKit, plus simulasi perangkat mobile agar coverage mencerminkan cara pengguna sesungguhnya mengakses aplikasi.

Playwright menjadikan cross-browser hampir gratis. Dengan satu daftar projects di konfigurasi, test yang sama dieksekusi di semua engine yang kalian daftarkan. Ditambah device emulation yang kuat — viewport, user agent, touch events — kalian bisa menguji perilaku mobile tanpa harus memegang perangkat fisik.

#Menjalankan Test di Chromium, Firefox, dan WebKit

#Konfigurasi Project per Browser

Project untuk tiga browser

import { defineConfig, devices } from '@playwright/test';
 
export default defineConfig({
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
    { name: 'webkit', use: { ...devices['Desktop Safari'] } },
  ],
});

Setiap project mendefinisikan satu kombinasi browser dan perangkat. devices['Desktop Chrome'] adalah preset yang berisi user agent, viewport, dan opsi lain yang meniru profil perangkat. Dengan tiga project di atas, npx playwright test menjalankan seluruh suite di tiga engine.

#Menjalankan Test per Browser

Untuk membatasi eksekusi ke satu project saja saat development:

Jalankan hanya satu browser

npx playwright test --project=chromium

Flag --project=chromium memfilter eksekusi ke project bernama chromium. Praktik umum: jalankan semua browser di CI, dan hanya satu browser di lokal untuk feedback cepat.

#Browser Contexts dan Mobile Emulation

#Mensimulasikan Perangkat Mobile

Emulasi perangkat bekerja dengan memodifikasi atribut context — bukan sekadar viewport. Ini termasuk user agent, touch, dan device scale factor:

Context untuk iPhone

import { devices } from '@playwright/test';
 
const context = await browser.newContext({
  ...devices['iPhone 13'],
});

Spread ...devices['iPhone 13'] membawa seluruh profil — viewport 390x844, user agent iOS, dan hasTouch: true. Halaman yang diuji akan berpikir ia sedang dibuka di iPhone, termasuk header mobile yang biasanya dipicu oleh user agent.

#Konfigurasi Device dalam Project

Preset device juga bisa dipakai langsung di daftar project konfigurasi:

Project desktop dan mobile

projects: [
  { name: 'desktop-chrome', use: { ...devices['Desktop Chrome'] } },
  { name: 'mobile-chrome', use: { ...devices['Pixel 7'] } },
  { name: 'mobile-safari', use: { ...devices['iPhone 13'] } },
],

Satu daftar project bisa memadukan desktop dan mobile sekaligus. Setiap kombinasi muncul sebagai satu baris di report, sehingga kalian langsung tahu persis di perangkat mana sebuah test gagal.

#Geolocation dan Konteks Khusus

#Mengatur Posisi GPS

Aplikasi yang memakai lokasi bisa diuji dengan geolocation yang disuntikkan lewat context, dikombinasikan dengan grant permission:

Set geolocation dan izin lokasi

const context = await browser.newContext({
  geolocation: { latitude: -6.2, longitude: 106.8 },
  permissions: ['geolocation'],
});
const page = await context.newPage();
await page.goto('/cari-toko-terdekat');

geolocation: { latitude: -6.2, longitude: 106.8 } mensimulasikan posisi di Jakarta, dan permissions: ['geolocation'] mengizinkan akses lokasi secara otomatis. Browser kini mengembalikan koordinat buatan saat aplikasi meminta lokasi.

#Timezone dan Locale

Untuk menguji perilaku yang bergantung pada zona waktu dan bahasa:

Timezone dan locale

const context = await browser.newContext({
  locale: 'id-ID',
  timezoneId: 'Asia/Jakarta',
});

timezoneId: 'Asia/Jakarta' membuat operasi tanggal, jam, dan Intl berperilaku sesuai zona waktu tersebut. Kombinasi locale dan timezone ini penting untuk aplikasi dengan logika jadwal atau format angka regional.

#Testing Responsive Layout

#Memverifikasi Elemen pada Beberapa Lebar Layar

Responsive design tidak cukup diuji dengan satu viewport. Data-driven dengan lebar layar membuat coverage lebih luas:

Uji beberapa viewport

import { test, expect } from '@playwright/test';
 
for (const width of [375, 768, 1440]) {
  test(`navigasi tampil di lebar ${width}px`, async ({ page }) => {
    await page.setViewportSize({ width, height: 800 });
    await page.goto('/beranda');
    if (width < 768) {
      await expect(page.getByRole('button', { name: 'Menu' })).toBeVisible();
    } else {
      await expect(page.getByRole('navigation')).toBeVisible();
    }
  });
}

page.setViewportSize({ width, height: 800 }) mengubah ukuran viewport dalam test. Di lebar kecil, hamburger menu harus muncul; di lebar besar, navigasi penuh terlihat — perilaku yang bisa diverifikasi secara eksplisit.

#Memastikan Konten Tidak Terpotong

Salah satu indikator layout rusak: elemen penting terpotong atau bertumpuk. Assertion toBeInViewport membantu mendeteksi ini:

Cek elemen masuk viewport

await expect(page.getByRole('button', { name: 'Beli' })).toBeInViewport();

toBeInViewport() memastikan elemen terlihat di area viewport saat ini. Gabungkan dengan beberapa lebar layar untuk menangkap masalah overflow yang biasanya luput dari mata.

#Real Device Clouds dan Cloud Browser Providers

#Kapan Memakai Cloud Browser

Emulasi sudah sangat baik, tapi bukan pengganti perangkat nyata sepenuhnya — terutama untuk menangkap masalah hardware-specific seperti rendering GPU atau perilaku Safari lama. Cloud browser providers seperti BrowserStack, Sauce Labs, atau platform lain memungkinkan eksekusi test di browser cloud nyata.

#Integrasi Melalui Config

Sebagian besar provider menyediakan wrapper atau opsi koneksi ke cloud mereka. Pola umumnya menambahkan satu project khusus:

Struktur project dengan cloud

projects: [
  { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
  { name: 'cloud-ios', use: { ...devices['iPhone 15'] } },
],

Ketika dijalankan dengan credential dari environment, project cloud terhubung ke infrastruktur provider dan menjalankan test di perangkat mereka. Sisakan detail ini sebagai lapisan opsional — emulasi lokal tetap jadi tulang punggung suite harian.

Jalankan semua project

npx playwright test

#Penutup

Episode 10 membuat suite kalian berbicara dalam bahasa browser yang berbeda: project per engine menjalankan test di Chromium, Firefox, dan WebKit, device emulation dengan preset seperti iPhone dan Pixel membawa test ke pengalaman mobile, dan kombinasi geolocation, timezone, serta berbagai lebar viewport memperluas coverage jauh melampaui satu profil.

Inti yang harus dibawa pulang:

projects di konfigurasi menjalankan test yang sama di banyak browser.
Preset devices membawa viewport, user agent, dan touch sekaligus.
Geolocation dan permission disuntikkan lewat opsi context.
Responsive layout diuji dengan beberapa lebar viewport secara data-driven.
Cloud browser providers melengkapi emulasi untuk perangkat nyata.

Di episode 11 selanjutnya kita akan membahas test coverage dan performance — mengukur coverage unit, integration, dan functional test, insight performance dengan tracing dan browser metrics, pengukuran page load serta responsiveness, dan dasar visual regression.