WEBDRIVER DOCS

WEBDRIVER-INTRODUCTION

WebDriver Protocol
Description: Protokol standar W3C untuk mengotomatisasi browser secara remote melalui HTTP.
Example: 
POST /session { capabilities: { alwaysMatch: { browserName: 'chrome' } } }
Output: Session ID
WebDriver vs Selenium
Description: WebDriver adalah standar W3C; Selenium adalah implementasi populer yang mendukung banyak bahasa (Java, Python, JS).
Example: 
const { Builder } = require('selenium-webdriver');
const driver = new Builder().forBrowser('chrome').build();
Output: Driver instance

SETUP

ChromeDriver / GeckoDriver
Description: Driver spesifik browser yang menjembatani WebDriver dengan browser. ChromeDriver untuk Chrome, GeckoDriver untuk Firefox.
Example: 
npm install chromedriver
Output: Driver binary tersedia
Selenium WebDriver (JS)
Description: Klien JavaScript untuk WebDriver.
Example: 
const webdriver = require('selenium-webdriver');
const driver = new webdriver.Builder().forBrowser('chrome').build();
Output: Driver siap
WebDriverIO
Description: Framework test automation populer berbasis WebDriver dengan sintaks deklaratif.
Example: 
const { remote } = require('webdriverio');
const browser = await remote({ capabilities: { browserName: 'chrome' } });
Output: Browser instance
Playwright vs Selenium
Description: Playwright menggunakan protokol DevTools, bukan WebDriver, tetapi memiliki API serupa untuk testing cross-browser.
Example: 
const { chromium } = require('playwright');
const browser = await chromium.launch();
Output: Browser Playwright

SESSION-MANAGEMENT

New Session
Description: Membuat sesi baru dengan browser tertentu.
Example: 
const session = await driver.getSession();
Output: { id: 'abc123...', capabilities: {...} }
Delete Session
Description: Menutup browser dan mengakhiri sesi.
Example: 
await driver.quit();
Output: Browser tertutup
Capabilities
Description: Konfigurasi browser (nama, versi, platform, headless, argumen).
Example: 
capabilities: { browserName: 'chrome', 'goog:chromeOptions': { args: ['--headless'] } }
Output: Chrome headless

NAVIGATION

Navigate To URL
Description: Membuka URL tertentu di browser.
Example: 
await driver.get('https://example.com');
Output: Halaman dimuat
Back / Forward
Description: Navigasi history.
Example: 
await driver.navigate().back();
await driver.navigate().forward();
Output: Pindah history
Refresh
Description: Memuat ulang halaman.
Example: 
await driver.navigate().refresh();
Output: Halaman direfresh
Get Current URL
Description: Mendapatkan URL halaman saat ini.
Example: 
const url = await driver.getCurrentUrl();
Output: 'https://example.com'
Get Title
Description: Mendapatkan judul halaman.
Example: 
const title = await driver.getTitle();
Output: 'Example Domain'

ELEMENT-RETRIEVAL

Find Element
Description: Mencari elemen pertama yang cocok dengan strategi locator.
Example: 
const el = await driver.findElement(By.id('myId'));
Output: WebElement
Find Elements
Description: Mencari semua elemen yang cocok.
Example: 
const els = await driver.findElements(By.css('.item'));
Output: [WebElement, WebElement]
Locator Strategies
Description: Cara menemukan elemen: By.id, By.css, By.xpath, By.name, By.className, By.linkText, By.partialLinkText, By.tagName.
Example: 
By.id('username'), By.css('input[type="email"]'), By.xpath('//button[text()="Submit"]')
Output: Locator
Relative Locators (Selenium 4)
Description: Mencari elemen relatif terhadap elemen lain (above, below, toLeftOf, toRightOf, near).
Example: 
const password = driver.findElement(locateWith(By.tagName('input')).below(By.id('username')));
Output: Input di bawah username

ELEMENT-INTERACTION

Click
Description: Mengklik elemen.
Example: 
await el.click();
Output: Klik dilakukan
Send Keys
Description: Mengirim input teks ke elemen (input, textarea).
Example: 
await el.sendKeys('Hello World');
Output: Teks diketik
Clear
Description: Menghapus nilai input.
Example: 
await el.clear();
Output: Input kosong
Submit
Description: Mengirim form yang memuat elemen.
Example: 
await el.submit();
Output: Form tersubmit
Select Dropdown
Description: Memilih opsi dari <select> menggunakan Select helper.
Example: 
const select = new Select(el);
await select.selectByVisibleText('Option 1');
Output: Opsi dipilih

ELEMENT-INFORMATION

Get Text
Description: Mendapatkan teks yang terlihat dari elemen.
Example: 
const text = await el.getText();
Output: 'Hello World'
Get Attribute
Description: Mendapatkan nilai atribut elemen.
Example: 
const href = await el.getAttribute('href');
Output: 'https://example.com'
Get CSS Value
Description: Mendapatkan nilai properti CSS yang dihitung.
Example: 
const color = await el.getCssValue('color');
Output: 'rgba(0,0,0,1)'
Is Displayed
Description: Memeriksa apakah elemen terlihat.
Example: 
const visible = await el.isDisplayed();
Output: true/false
Is Enabled
Description: Memeriksa apakah elemen diaktifkan (tidak disabled).
Example: 
const enabled = await el.isEnabled();
Output: true/false
Is Selected
Description: Memeriksa apakah elemen (checkbox/radio/option) dipilih.
Example: 
const selected = await el.isSelected();
Output: true/false
Get Tag Name
Description: Mendapatkan nama tag elemen.
Example: 
const tag = await el.getTagName();
Output: 'input'
Get Size & Location
Description: Mendapatkan dimensi dan posisi elemen.
Example: 
const rect = await el.getRect();
Output: { x: 100, y: 200, width: 300, height: 50 }

COOKIES

Get All Cookies
Description: Mendapatkan semua cookie.
Example: 
const cookies = await driver.manage().getCookies();
Output: [{ name, value, domain, ... }]
Add Cookie
Description: Menambahkan cookie baru.
Example: 
await driver.manage().addCookie({ name: 'key', value: 'val' });
Output: Cookie ditambahkan
Delete Cookie
Description: Menghapus cookie berdasarkan nama.
Example: 
await driver.manage().deleteCookie('key');
Output: Cookie dihapus
Delete All Cookies
Description: Menghapus semua cookie.
Example: 
await driver.manage().deleteAllCookies();
Output: Semua cookie dihapus

ALERTS

Accept Alert
Description: Menerima dialog alert/confirm/prompt.
Example: 
await driver.switchTo().alert().accept();
Output: Alert diterima
Dismiss Alert
Description: Menolak dialog.
Example: 
await driver.switchTo().alert().dismiss();
Output: Alert ditolak
Get Alert Text
Description: Mendapatkan teks dialog.
Example: 
const text = await driver.switchTo().alert().getText();
Output: 'Are you sure?'
Send Keys to Alert
Description: Mengirim teks ke prompt.
Example: 
await driver.switchTo().alert().sendKeys('Hello');
Output: Prompt terisi

SCREENSHOTS

Take Screenshot
Description: Mengambil tangkapan layar halaman penuh atau viewport.
Example: 
const screenshot = await driver.takeScreenshot();
fs.writeFileSync('screenshot.png', screenshot, 'base64');
Output: File PNG
Element Screenshot
Description: Tangkapan layar hanya elemen tertentu.
Example: 
const base64 = await el.takeScreenshot();
Output: Gambar elemen

WINDOW-MANAGEMENT

Get Window Size / Position
Description: Mendapatkan ukuran dan posisi jendela.
Example: 
const { width, height } = await driver.manage().window().getRect();
Output: { width: 1024, height: 768, x: 0, y: 0 }
Set Window Size
Description: Mengatur ukuran jendela.
Example: 
await driver.manage().window().setRect({ width: 1280, height: 720 });
Output: Ukuran diubah
Maximize / Minimize / Fullscreen
Description: Operasi jendela umum.
Example: 
await driver.manage().window().maximize();
await driver.manage().window().minimize();
await driver.manage().window().fullscreen();
Output: Jendela diubah
Switch Window / Tab
Description: Pindah antar jendela atau tab berdasarkan handle.
Example: 
const handles = await driver.getAllWindowHandles();
await driver.switchTo().window(handles[1]);
Output: Pindah tab
Close Window / Tab
Description: Menutup jendela saat ini.
Example: 
await driver.close();
Output: Tab tertutup
New Window / Tab
Description: Membuka jendela atau tab baru.
Example: 
await driver.switchTo().newWindow('tab');
await driver.switchTo().newWindow('window');
Output: Jendela/tab baru

FRAMES

Switch to Frame
Description: Beralih ke dalam iframe berdasarkan indeks, nama/id, atau WebElement.
Example: 
await driver.switchTo().frame(0);
await driver.switchTo().frame(driver.findElement(By.css('iframe')));
Output: Konteks di dalam frame
Switch to Parent Frame
Description: Kembali ke konteks induk.
Example: 
await driver.switchTo().parentFrame();
Output: Kembali ke parent
Switch to Default Content
Description: Kembali ke halaman utama.
Example: 
await driver.switchTo().defaultContent();
Output: Konteks root

ACTIONS

Actions API (W3C)
Description: API untuk simulasi interaksi kompleks: keyboard, mouse, pen, touch.
Example: 
const actions = driver.actions();
await actions.move({ origin: el }).click().perform();
Output: Klik dilakukan
Keyboard Actions
Description: Menekan tombol keyboard (keyDown, keyUp, sendKeys).
Example: 
await actions.keyDown(Key.SHIFT).sendKeys('a').keyUp(Key.SHIFT).perform();
Output: Huruf 'A' besar
Mouse Actions
Description: Gerakan mouse: move, click, doubleClick, contextClick, dragAndDrop.
Example: 
await actions.move({ origin: el1 }).press().move({ origin: el2 }).release().perform();
Output: Drag and drop
Scroll to Element
Description: Menggulir ke elemen menggunakan Actions atau JavaScript.
Example: 
await driver.executeScript('arguments[0].scrollIntoView(true);', el);
Output: Tergulir

JAVASCRIPT-EXECUTION

Execute Script
Description: Menjalankan JavaScript sinkron di halaman.
Example: 
const title = await driver.executeScript('return document.title;');
Output: 'Judul Halaman'
Execute Async Script
Description: Menjalankan skrip asinkron dengan callback.
Example: 
await driver.executeAsyncScript('var callback = arguments[arguments.length - 1]; setTimeout(callback, 1000);');
Output: Menunggu 1 detik

TIMEOUTS

Implicit Wait
Description: Waktu tunggu global untuk mencari elemen sebelum melempar error.
Example: 
await driver.manage().setTimeouts({ implicit: 5000 });
Output: Timeout 5 detik
Explicit Wait (WebDriverWait)
Description: Menunggu kondisi tertentu terpenuhi (misal elemen terlihat) dengan polling.
Example: 
const wait = new WebDriverWait(driver, 10000);
const el = await wait.until(ExpectedConditions.elementLocated(By.id('result')));
Output: Elemen ditemukan
Script Timeout
Description: Batas waktu untuk executeAsyncScript.
Example: 
await driver.manage().setTimeouts({ script: 10000 });
Output: Timeout 10 detik

ADVANCED-FEATURES

Virtual Authenticator (WebAuthn)
Description: Mensimulasikan autentikator untuk menguji WebAuthn (fingerprint, security key).
Example: 
await driver.addVirtualAuthenticator({ protocol: 'ctap2', transport: 'usb' });
Output: Autentikator virtual ditambahkan
Print Page
Description: Mengubah halaman menjadi PDF.
Example: 
const pdf = await driver.printPage({ orientation: 'landscape' });
Output: Base64 PDF
Network Interception (CDP)
Description: Mengintersep permintaan jaringan melalui Chrome DevTools Protocol (ChromeDriver).
Example: 
const cdp = await driver.createCDPConnection('page');
await cdp.execute('Network.setBlockedURLs', { urls: ['*.css'] });
Output: CSS diblokir
Permissions
Description: Mengatur izin browser (geolocation, notifications, dll).
Example: 
await driver.setPermission('geolocation', 'granted');
Output: Izin diberikan

BEST-PRACTICES

Gunakan Page Object Model
Description: Abstraksi halaman menjadi objek terpisah untuk pemeliharaan yang lebih baik.
Example: 
class LoginPage { constructor(driver) { this.driver = driver; } async login(user, pass) { ... } }
Output: Test mudah dirawat
Hindari Thread.sleep, gunakan Explicit Wait
Description: Menunggu waktu tetap tidak efisien dan flaky.
Example: 
await driver.wait(until.elementLocated(By.id('result')), 10000);
Output: Tes lebih stabil
Headless Mode untuk CI/CD
Description: Jalankan browser dalam mode headless agar lebih cepat dan tidak membutuhkan display.
Example: 
capabilities: { 'goog:chromeOptions': { args: ['--headless'] } }
Output: Browser tanpa GUI
Tangkap Screenshot saat Gagal
Description: Ambil screenshot ketika test gagal untuk debugging.
Example: 
afterEach(async function() { if (this.currentTest.state === 'failed') { await driver.takeScreenshot() } });
Output: Bukti kegagalan