Pengantar Selenium WebDriver (dengan Contoh SauceDemo)

Apa itu Selenium WebDriver?

Selenium WebDriver adalah pustaka automasi browser lintas bahasa dan lintas browser untuk pengujian end-to-end.

Kapan Menggunakannya

• Validasi alur pengguna kritikal di UI.
• Uji kompatibilitas lintas browser.

Contoh: Login di SauceDemo

Target situs: https://www.saucedemo.com/.

JavaScript (Node.js) + selenium-webdriver (Chrome)

import { Builder, By, until } from 'selenium-webdriver';
import chrome from 'selenium-webdriver/chrome.js';

async function loginSauceDemo() {
  const options = new chrome.Options();
  options.addArguments('--headless=new');
  const driver = await new Builder().forBrowser('chrome').setChromeOptions(options).build();
  try {
    await driver.get('https://www.saucedemo.com/');
    await driver.findElement(By.id('user-name')).sendKeys('standard_user');
    await driver.findElement(By.id('password')).sendKeys('secret_sauce');
    await driver.findElement(By.id('login-button')).click();

    await driver.wait(until.elementLocated(By.css('.inventory_list')), 10000);
    const title = await driver.getTitle();
    console.log('Logged in, page title:', title);
  } finally {
    await driver.quit();
  }
}

loginSauceDemo();

Python + selenium (Chrome)

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.chrome.options import Options

options = Options()
options.add_argument('--headless=new')
driver = webdriver.Chrome(options=options)

try:
    driver.get('https://www.saucedemo.com/')
    driver.find_element(By.ID, 'user-name').send_keys('standard_user')
    driver.find_element(By.ID, 'password').send_keys('secret_sauce')
    driver.find_element(By.ID, 'login-button').click()

    WebDriverWait(driver, 10).until(EC.presence_of_element_located((By.CSS_SELECTOR, '.inventory_list')))
    print('Login sukses')
finally:
    driver.quit()

Tips Stabilitas

• Gunakan explicit wait, locator yang stabil (id/data-test), dan jalankan headless di CI.

Sumber situs uji: SauceDemo.

Page Object Model (ringkas)

// pages/LoginPage.js
import { By, until } from 'selenium-webdriver';
export class LoginPage {
  constructor(driver) { this.driver = driver; }
  async open() { await this.driver.get('https://www.saucedemo.com/'); }
  async login(user, pass) {
    await this.driver.findElement(By.id('user-name')).sendKeys(user);
    await this.driver.findElement(By.id('password')).sendKeys(pass);
    await this.driver.findElement(By.id('login-button')).click();
    await this.driver.wait(until.elementLocated(By.css('.inventory_list')), 10000);
  }
}

Menjalankan di CI (GitHub Actions contoh)

name: e2e
on: [push]
jobs:
  selenium:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: '20' }
      - run: npm ci
      - run: node e2e/login.test.js