or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

advanced-interactions.mdbidi-protocol.mdbrowser-automation.mdbrowser-options.mddriver-management.mdelement-location.mderror-handling.mdindex.mdwait-conditions.md
tile.json

browser-automation.mddocs/

Browser Automation

Core browser control operations including navigation, element interaction, JavaScript execution, and session management for comprehensive web automation.

Capabilities

WebDriver Class

The main WebDriver interface providing comprehensive browser automation capabilities.

/**
 * Main WebDriver client for browser automation
 */
class WebDriver {  
  /** Navigate to a URL */
  get(url: string): Promise<void>;
  
  /** Get current page URL */
  getCurrentUrl(): Promise<string>;
  
  /** Get page title */
  getTitle(): Promise<string>;
  
  /** Get page source HTML */
  getPageSource(): Promise<string>;
  
  /** Find single element on page */
  findElement(locator: By): Promise<WebElement>;
  
  /** Find multiple elements on page */
  findElements(locator: By): Promise<WebElement[]>;
  
  /** Execute synchronous JavaScript */
  executeScript(script: string | Function, ...args: any[]): Promise<any>;
  
  /** Execute asynchronous JavaScript */
  executeAsyncScript(script: string | Function, ...args: any[]): Promise<any>;
  
  /** Take screenshot of current page */
  takeScreenshot(): Promise<string>;
  
  /** Wait for condition to be true */
  wait(condition: Condition<any>, timeout?: number, message?: string): Promise<any>;
  
  /** Sleep for specified milliseconds */
  sleep(ms: number): Promise<void>;
  
  /** Get session information */
  getSession(): Promise<Session>;
  
  /** Get session capabilities */
  getCapabilities(): Promise<Capabilities>;
  
  /** Close current window */
  close(): Promise<void>;
  
  /** Quit driver and end session */
  quit(): Promise<void>;
  
  /** Get options interface for cookies, windows, etc. */
  manage(): Options;
  
  /** Get navigation interface */
  navigate(): Navigation;
  
  /** Get target locator interface for windows/frames */
  switchTo(): TargetLocator;
  
  /** Get actions builder for complex interactions */
  actions(options?: object): Actions;
  
  /** Set file detector for file uploads */
  setFileDetector(detector: FileDetector): void;
  
  /** Get current window handle */
  getWindowHandle(): Promise<string>;
  
  /** Get all window handles */
  getAllWindowHandles(): Promise<string[]>;
  
  /** Get command executor */
  getExecutor(): Executor;
  
  /** Print current page as PDF */
  printPage(options?: object): Promise<string>;
  
  /** Get script manager for BiDi protocol */
  script(): ScriptManager;
  
  /** Get network manager for BiDi protocol */
  network(): NetworkManager;
}

Usage Examples:

const { Builder, By, until } = require('selenium-webdriver');

let driver = await new Builder().forBrowser('chrome').build();

try {
  // Navigation
  await driver.get('https://example.com');
  console.log('Current URL:', await driver.getCurrentUrl());
  console.log('Page title:', await driver.getTitle());
  
  // Element interaction
  let searchBox = await driver.findElement(By.name('q'));
  await searchBox.sendKeys('selenium');
  
  let submitButton = await driver.findElement(By.css('button[type="submit"]'));
  await submitButton.click();
  
  // Wait for results
  await driver.wait(until.titleContains('selenium'), 5000);
  
  // JavaScript execution
  let pageHeight = await driver.executeScript('return document.body.scrollHeight');
  console.log('Page height:', pageHeight);
  
  // Screenshot
  let screenshot = await driver.takeScreenshot();
  // screenshot is base64 encoded image data
  
} finally {
  await driver.quit();
}

WebElement Class

Represents individual web page elements with interaction and information retrieval methods.

/**
 * Web element for interaction and information retrieval
 */
class WebElement {
  /** Click the element */
  click(): Promise<void>;
  
  /** Submit form element */
  submit(): Promise<void>;
  
  /** Send keystrokes to element */
  sendKeys(...keys: (string | number)[]): Promise<void>;
  
  /** Clear element text content */
  clear(): Promise<void>;
  
  /** Get element text content */
  getText(): Promise<string>;
  
  /** Get element attribute value */
  getAttribute(name: string): Promise<string | null>;
  
  /** Get DOM attribute value */
  getDomAttribute(name: string): Promise<string | null>;
  
  /** Get element DOM property value */
  getProperty(name: string): Promise<any>;
  
  /** Get element CSS property value */
  getCssValue(propertyName: string): Promise<string>;
  
  /** Get element tag name */
  getTagName(): Promise<string>;
  
  /** Get element rectangle (position and size) */
  getRect(): Promise<Rectangle>;
  
  /** Check if element is selected (checkboxes, radio buttons, options) */
  isSelected(): Promise<boolean>;
  
  /** Check if element is enabled */
  isEnabled(): Promise<boolean>;
  
  /** Check if element is displayed */
  isDisplayed(): Promise<boolean>;
  
  /** Find child element */
  findElement(locator: By): Promise<WebElement>;
  
  /** Find child elements */
  findElements(locator: By): Promise<WebElement[]>;
  
  /** Take screenshot of element */
  takeScreenshot(scroll?: boolean): Promise<string>;
  
  /** Get shadow root from element */
  getShadowRoot(): Promise<ShadowRoot>;
  
  /** Get ARIA role */
  getAriaRole(): Promise<string>;
  
  /** Get accessible name */
  getAccessibleName(): Promise<string>;
}

Usage Examples:

// Element interaction
let usernameField = await driver.findElement(By.id('username'));
await usernameField.clear();
await usernameField.sendKeys('testuser');

// Element information
let submitButton = await driver.findElement(By.id('submit'));
console.log('Button text:', await submitButton.getText());
console.log('Button enabled:', await submitButton.isEnabled());
console.log('Button visible:', await submitButton.isDisplayed());

// Element attributes and properties
let link = await driver.findElement(By.tagName('a'));
console.log('Href attribute:', await link.getAttribute('href'));
console.log('Target attribute:', await link.getAttribute('target'));
console.log('InnerHTML property:', await link.getProperty('innerHTML'));

// Element styling
let header = await driver.findElement(By.tagName('h1'));
console.log('Font size:', await header.getCssValue('font-size'));
console.log('Color:', await header.getCssValue('color'));

// Element dimensions and position
let image = await driver.findElement(By.tagName('img'));
let rect = await image.getRect();
console.log(`Position: (${rect.x}, ${rect.y})`);
console.log(`Size: ${rect.width} x ${rect.height}`);

// Form element handling
let checkbox = await driver.findElement(By.id('agree'));
if (!(await checkbox.isSelected())) {
  await checkbox.click();
}

let dropdown = await driver.findElement(By.name('country'));
await dropdown.sendKeys('United States');

Navigation Interface

Browser navigation controls for page history and refresh operations.

/**
 * Browser navigation interface
 */
interface Navigation {
  /** Navigate to URL */
  to(url: string): Promise<void>;
  
  /** Navigate back in history */
  back(): Promise<void>;
  
  /** Navigate forward in history */
  forward(): Promise<void>;
  
  /** Refresh current page */
  refresh(): Promise<void>;
}

Usage Examples:

let navigation = driver.navigate();

// Navigate to different pages
await navigation.to('https://example.com/page1');
await navigation.to('https://example.com/page2');

// Use browser history
await navigation.back();    // Back to page1
await navigation.forward(); // Forward to page2
await navigation.refresh(); // Refresh page2

Options Interface

Browser options management for cookies, windows, timeouts, and logs.

/**
 * Browser options and management interface
 */
interface Options {
  /** Get cookies interface */
  getCookies(): Promise<Cookie[]>;
  getCookie(name: string): Promise<Cookie | null>;
  addCookie(cookie: Cookie): Promise<void>;
  deleteCookie(name: string): Promise<void>;
  deleteAllCookies(): Promise<void>;
  
  /** Get window management interface */
  window(): Window;
  
  /** Get timeouts interface */
  getTimeouts(): Promise<Timeouts>;
  setTimeouts(timeouts: Timeouts): Promise<void>;
  
  /** Get logs interface */
  logs(): Logs;
}

interface Cookie {
  name: string;
  value: string;
  domain?: string;
  path?: string;
  expiry?: number;
  secure?: boolean;
  httpOnly?: boolean;
  sameSite?: string;
}

interface Window {
  /** Get window rectangle */
  getRect(): Promise<Rectangle>;
  
  /** Set window rectangle */
  setRect(rect: Rectangle): Promise<Rectangle>;
  
  /** Get window size */
  getSize(): Promise<Size>;
  
  /** Set window size */
  setSize(size: Size): Promise<void>;
  
  /** Get window position */
  getPosition(): Promise<Point>;
  
  /** Set window position */
  setPosition(position: Point): Promise<void>;
  
  /** Maximize window */
  maximize(): Promise<void>;
  
  /** Minimize window */
  minimize(): Promise<void>;
  
  /** Make window full screen */
  fullscreen(): Promise<void>;
}

interface Timeouts {
  implicit?: number;
  pageLoad?: number;
  script?: number;
}

Usage Examples:

let options = driver.manage();

// Cookie management
await options.addCookie({
  name: 'session_id',
  value: 'abc123',
  domain: 'example.com',
  path: '/',
  secure: true
});

let cookies = await options.getCookies();
console.log('All cookies:', cookies);

let sessionCookie = await options.getCookie('session_id');
console.log('Session cookie:', sessionCookie);

await options.deleteCookie('session_id');
await options.deleteAllCookies();

// Window management
let window = options.window();
await window.maximize();

let size = await window.getSize();
console.log(`Window size: ${size.width} x ${size.height}`);

await window.setSize({ width: 1024, height: 768 });
await window.setPosition({ x: 100, y: 100 });

// Timeout configuration
await options.setTimeouts({
  implicit: 10000,      // 10 seconds
  pageLoad: 30000,      // 30 seconds
  script: 5000          // 5 seconds
});

TargetLocator Interface

Interface for switching between windows, frames, and alerts.

/**
 * Target locator for switching context
 */
interface TargetLocator {
  /** Switch to window by handle */
  window(handle: string): Promise<void>;
  
  /** Switch to new window */
  newWindow(type: string): Promise<void>;
  
  /** Switch to frame by index, name, or element */
  frame(frame: number | string | WebElement | null): Promise<void>;
  
  /** Switch to parent frame */
  parentFrame(): Promise<void>;
  
  /** Switch to default content */
  defaultContent(): Promise<void>;
  
  /** Switch to active element */
  activeElement(): Promise<WebElement>;
  
  /** Switch to alert dialog */
  alert(): Promise<Alert>;
}

interface Alert {
  /** Get alert text */
  getText(): Promise<string>;
  
  /** Accept alert (OK button) */
  accept(): Promise<void>;
  
  /** Dismiss alert (Cancel button) */
  dismiss(): Promise<void>;
  
  /** Send text to alert prompt */
  sendKeys(text: string): Promise<void>;
}

Usage Examples:

let targetLocator = driver.switchTo();

// Window management
let originalWindow = await driver.getWindowHandle();
let allWindows = await driver.getAllWindowHandles();

// Open new window and switch to it
await targetLocator.newWindow('tab');
await driver.get('https://example.com');

// Switch back to original window
await targetLocator.window(originalWindow);

// Frame handling
let frame = await driver.findElement(By.tagName('iframe'));
await targetLocator.frame(frame);

// Work in frame
let frameElement = await driver.findElement(By.id('frame-content'));
await frameElement.click();

// Switch back to main content
await targetLocator.defaultContent();

// Alert handling
await driver.findElement(By.id('alert-button')).click();

let alert = await targetLocator.alert();
console.log('Alert text:', await alert.getText());
await alert.accept();

JavaScript Execution

Execute custom JavaScript code in the browser context with parameter passing and return value handling.

/**
 * JavaScript execution methods
 */
interface WebDriver {
  /** Execute synchronous JavaScript */
  executeScript(script: string | Function, ...args: any[]): Promise<any>;
  
  /** Execute asynchronous JavaScript with callback */
  executeAsyncScript(script: string | Function, ...args: any[]): Promise<any>;
}

Usage Examples:

// Simple script execution
let pageTitle = await driver.executeScript('return document.title');
let url = await driver.executeScript('return window.location.href');

// Script with parameters
let result = await driver.executeScript(
  'return arguments[0] + arguments[1]',
  10, 20
);
console.log('Result:', result); // 30

// DOM manipulation
await driver.executeScript(`
  let element = document.getElementById('hidden-content');
  element.style.display = 'block';
`);

// Element interaction via JavaScript
let element = await driver.findElement(By.id('target'));
await driver.executeScript('arguments[0].click()', element);

// Scroll operations
await driver.executeScript('window.scrollTo(0, document.body.scrollHeight)');

// Get element information
let elementInfo = await driver.executeScript(`
  let elem = arguments[0];
  return {
    text: elem.textContent,
    visible: elem.offsetParent !== null,
    position: elem.getBoundingClientRect()
  };
`, element);

// Async script execution
let asyncResult = await driver.executeAsyncScript(`
  let callback = arguments[arguments.length - 1];
  
  setTimeout(() => {
    callback('Async operation completed');
  }, 1000);
`);

Types

interface Rectangle {
  x: number;
  y: number;
  width: number;
  height: number;
}

interface Size {
  width: number;
  height: number;
}

interface Point {
  x: number;
  y: number;
}

interface Session {
  getId(): string;
  getCapabilities(): Capabilities;
}

interface Condition<T> {
  description(): string;
}