Belajar QA Automation Engineer - Cross-Browser & Device Automation

#Pendahuluan

Setelah di episode 14 kita mengintegrasikan performance checks, pada episode ini kita memastikan aplikasi bekerja di semua browser dan devices — critical untuk user experience yang konsisten.

#Browser Matrix

#Playwright Multi-Browser

typescript

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

#Run Specific Browser

bash

# Run only Chromium
npx playwright test --project=chromium
 
# Run all browsers
npx playwright test
 
# Run specific test in all browsers
npx playwright test login.spec.ts

#Device Emulation

#Mobile Devices

typescript

// playwright.config.ts
export default defineConfig({
  projects: [
    {
      name: 'iPhone 14',
      use: { ...devices['iPhone 14'] },
    },
    {
      name: 'Pixel 7',
      use: { ...devices['Pixel 7'] },
    },
    {
      name: 'iPad',
      use: { ...devices['iPad Pro 11'] },
    },
  ],
});

#Custom Viewport

typescript

// Custom viewport size
test('tablet viewport', async ({ browser }) => {
  const context = await browser.newContext({
    viewport: { width: 768, height: 1024 },
  });
  const page = await context.newPage();
  await page.goto('/');
  // Test tablet layout
  await context.close();
});

#Responsive Testing

typescript

test('responsive layout', async ({ page }) => {
  // Desktop
  await page.setViewportSize({ width: 1920, height: 1080 });
  await expect(page.locator('.sidebar')).toBeVisible();
 
  // Tablet
  await page.setViewportSize({ width: 768, height: 1024 });
  await expect(page.locator('.sidebar')).toBeHidden();
 
  // Mobile
  await page.setViewportSize({ width: 375, height: 667 });
  await expect(page.locator('.mobile-menu')).toBeVisible();
});

#Touch Events

typescript

// Mobile touch interactions
test('mobile swipe', async ({ page }) => {
  await page.goto('/carousel');
  await page.locator('.carousel-item').first().swipeLeft();
  await expect(page.locator('.carousel-item').nth(1)).toBeVisible();
});

#Network Throttling

typescript

// Simulate slow network
test('slow network', async ({ page }) => {
  const context = await page.context();
  await context.route('**/*', route => {
    route.continue();
  });
 
  // Throttle network
  await page.route('**/*', async route => {
    await new Promise(resolve => setTimeout(resolve, 100));
    await route.continue();
  });
});

Note

Cross-browser testing harus jadi bagian dari CI pipeline. Jalankan full matrix setidaknya di pull request untuk mendeteksi compatibility issues.

#Praktik: Cross-Browser Suite

typescript

// playwright.config.ts
export default defineConfig({
  projects: [
    { name: 'chrome', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
    { name: 'safari', use: { ...devices['Desktop Safari'] } },
    { name: 'mobile-chrome', use: { ...devices['Pixel 7'] } },
    { name: 'mobile-safari', use: { ...devices['iPhone 14'] } },
  ],
});

#Penutup

Browser matrix: Chrome, Firefox, Safari — test semua di CI.
Device emulation: mobile, tablet dengan Playwright devices.
Responsive: test layout berubah di viewport berbeda.
Network throttling: simulasi slow network untuk performance.

Di episode 16 selanjutnya kita akan membahas parallel execution & speed — parallelism, sharding, dan optimasi runtime untuk test suite yang cepat. Sampai jumpa di episode 16!