Belajar QA Tester - Cross-Browser & Mobile Testing

#Pendahuluan

Setelah di episode 10 kita mempelajari database & SQL testing, pada episode ini kita mempelajari cross-browser & mobile testing — bagaimana menguji aplikasi di berbagai browser dan perangkat. Dengan banyaknya variasi browser dan perangkat yang digunakan pengguna, testing harus cover semua platform yang relevan.

Mengapa cross-browser & mobile testing penting? Karena pengguna menggunakan berbagai browser (Chrome, Firefox, Safari, Edge) dan perangkat (desktop, tablet, mobile). Aplikasi yang hanya berfungsi di satu browser akan kehilangan banyak pengguna.

#Cross-Browser Testing

#Browser Matrix

text

Browser Matrix (2026):
├── Desktop:
│   ├── Chrome 120+ (65% market share)
│   ├── Firefox 121+ (3% market share)
│   ├── Safari 17+ (10% market share)
│   └── Edge 120+ (5% market share)
├── Mobile:
│   ├── Chrome Mobile (Android)
│   ├── Safari Mobile (iOS)
│   └── Samsung Internet
└── Tools:
    ├── BrowserStack (cloud testing)
    ├── Sauce Labs (cloud testing)
    └── LambdaTest (cloud testing)

#Cross-Browser Test Cases

text

Cross-Browser Test Checklist:
├── Layout & Styling
│   ├── Apakah layout konsisten di semua browser?
│   ├── Apakah font dan warna benar?
│   └── Apakah responsive di berbagai ukuran?
├── Functionality
│   ├── Apakah semua fitur berfungsi?
│   ├── Apakah form bisa di-submit?
│   └── Apakah JavaScript berjalan dengan benar?
├── Performance
│   ├── Apakah loading time acceptable?
│   └── Apakah ada memory leak?
└── Compatibility
    ├── Apakah CSS support konsisten?
    ├── Apakah API support konsisten?
    └── Apakah ada browser-specific issues?

Note

Tidak semua browser harus diuji untuk setiap fitur. Fokus pada browser yang paling banyak digunakan oleh target audience. Gunakan analytics untuk mengetahui browser distribution pengguna kalian.

#Mobile Testing

#Responsive Design Testing

text

Responsive Breakpoints:
├── Mobile: &lt; 768px
│   ├── 320px (small phone)
│   ├── 375px (iPhone SE)
│   └── 414px (iPhone Plus)
├── Tablet: 768px - 1024px
│   ├── 768px (iPad)
│   └── 1024px (iPad Pro)
└── Desktop: &gt; 1024px
    ├── 1280px (laptop)
    ├── 1440px (desktop)
    └── 1920px (full HD)

#Mobile Test Cases

text

Mobile Test Checklist:
├── Touch Interactions
│   ├── Tap
│   ├── Double tap
│   ├── Swipe
│   ├── Pinch to zoom
│   └── Long press
├── Orientation
│   ├── Portrait mode
│   └── Landscape mode
├── Network
│   ├── WiFi
│   ├── 4G/5G
│   └── Offline mode
├── Performance
│   ├── Loading time di mobile
│   ├── Battery usage
│   └── Memory usage
└── Usability
    ├── Navigation mudah dengan jari
    ├── Text cukup besar untuk dibaca
    └── Tombol cukup besar untuk di-tap

#Mobile Testing Tools

text

Mobile Testing Tools:
├── Device Lab:
│   ├── Device fisik (ideal tapi mahal)
│   └── Emulator/Simulator (Android Studio, Xcode)
├── Cloud Testing:
│   ├── BrowserStack
│   ├── Sauce Labs
│   ├── LambdaTest
│   └── Firebase Test Lab
├── Automation:
│   ├── Appium (cross-platform)
│   ├── Espresso (Android)
│   └── XCUITest (iOS)
└── Manual:
    ├── Chrome DevTools (mobile emulation)
    └── Safari Responsive Design Mode

#Practical: Cross-Browser Test Plan

yaml

cross_browser_test_plan:
  title: "Cross-Browser Test Plan - E-Commerce App"
  browsers:
    desktop:
      - Chrome 120+ (Windows, Mac, Linux)
      - Firefox 121+ (Windows, Mac)
      - Safari 17+ (Mac)
      - Edge 120+ (Windows)
    mobile:
      - Chrome Mobile (Android 14)
      - Safari Mobile (iOS 17)
  test_scenarios:
    - Login flow
    - Product browsing
    - Checkout process
    - Payment completion
  tools:
    - BrowserStack for cloud testing
    - Chrome DevTools for responsive testing
  exit_criteria:
    - All critical paths work on all browsers
    - No visual regressions
    - Performance acceptable on all platforms

Tip

Gunakan Chrome DevTools untuk quick responsive testing. Buka DevTools, klik toggle device toolbar, dan pilih device yang ingin diuji. Ini cukup untuk testing awal sebelum menggunakan cloud testing service.

#Penutup

Pada episode 11 ini, kalian telah mempelajari cross-browser & mobile testing.

Inti yang harus dibawa pulang:

Browser matrix harus sesuai dengan target audience.
Responsive testing harus cover mobile, tablet, dan desktop.
Mobile testing harus cover touch interactions, orientation, dan network.
Cloud testing services (BrowserStack, Sauce Labs) memudahkan testing di banyak perangkat.

Di episode 12 selanjutnya, kita akan membahas Agile QA & Scrum — bagaimana QA berkontribusi dalam framework Agile/Scrum. Sampai jumpa di episode 12!