Skip to content

WebUI

Element Locator identification

set a timed spy tool

  1. Open your target web page.
  2. Press F12 (or Right-Click -> Inspect) to open Developer Tools.
  3. Click on the Console tab.
  4. Paste this exact command and press Enter: 
    setTimeout(() => { debugger; }, 5000);
  5. Immediately move your mouse to trigger the popover, dropdown, or dynamic element.
  6. At exactly 5 seconds, the screen will gray out, and the message "Paused in debugger" will appear.

Verifying xpath and css

  1. Using browser console
Locator Type Command for First Match Only Command for All Matching Elements Output Format
CSS Selector $('selector') $$('selector') $( ) returns a single element.
$$( ) returns an Array/List.
XPath $x('xpath') $x('xpath') Always returns an Array/List (even if there is only 1 match).
  1. Using browser dev tool's find option

HTML Element

The HTML element is everything from the start tag to the end tag.

Web Element

WebElement is an API interface provided by a test automation tool to programmatically interact with an HTML element.

Web Driver

WebDriver is an interface which allows programmers to assign one of its implementation class like ChromeDriver, FireFoxDriver objects.

Best Practices for Locators:

  1. Prefer IDs for speed

  2. Choose CSS Selectors if no IDs

  3. Use XPath carefully

  4. Avoid LinkText and Tag Name

  5. Keep locators simple and specific

Most Common Selenium Exceptions

1. NoSuchElementException

  • What it means: Selenium cannot find an element using the specified locator.
  • Common Cause: The element hasn't loaded yet, or the XPath/CSS selector is broken.
  • Quick Fix: Implement an explicit wait using WebDriverWait instead of hardcoding Thread.sleep().

2. StaleElementReferenceException

  • What it means: The element reference is no longer attached to the page DOM.
  • Common Cause: The web page reloaded, updated via AJAX, or a DOM modification occurred after finding the element.
  • Quick Fix: Re-initialize or re-locate the element immediately before interacting with it.

3. TimeoutException

  • What it means: A command or wait condition did not complete within the specified time limit.
  • Common Cause: The web page is loading slowly, or an explicit wait condition was never satisfied.
  • Quick Fix: Increase the wait duration or verify that the target element condition is achievable.

4. ElementClickInterceptedException

  • What it means: Selenium clicked the location, but a different element received the click.
  • Common Cause: Overlapping elements like loading spinners, sticky headers, cookie banners, or pop-up modals obscure the target.
  • Quick Fix: Wait for the overlay to disappear, scroll the element into view, or use a JavaScript click executor.

5. ElementNotInteractableException

  • What it means: The target element exists in the HTML DOM but cannot be interacted with.
  • Common Cause: The element is hidden behind CSS style attributes (like display: none) or is disabled.
  • Quick Fix: Check if the element needs to be scrolled into view or wait for it to become visible.

6. InvalidSelectorException

  • What it means: The syntax of the provided locator strategy is incorrect.
  • Common Cause: Typos or malformed syntax inside an XPath or CSS selector string.
  • Quick Fix: Copy and validate your selector strings inside the browser's Developer Tools Console.

Browser Compatibility Testing with Docker

To test application behavior on specific browser versions without polluting your local environment, you can run isolated, UI-accessible browser sessions using Docker.

Running a Specific Browser Version

docker run -d -p 4444:4444 -p 7900:7900 --shm-size=3g selenium/standalone-chrome:149.0-20260606

Configuration & Usage

Interactive VNC Viewer (UI): Open your web browser and navigate to http://localhost:7900/.

Password: secret

Automation Endpoint: If running automated scripts (Selenium WebDriver, Playwright, etc.), point your remote driver configuration to http://localhost:4444/.