Special element state validation with Selenium and CSS and DOM

6 Nov

This is primarily for Selenium RC, but should be adaptable for Selenium 2 / Web Driver.

I recently stumbled across this. If ever one has issues validating element state such as if element is checked or selected, or what item in menu is the selected item. There are some alternate ways to validate the element state other than the given default Selenium API methods.

For example using CSS selectors, particularly the Sizzle/JQuery engine:

result = selenium.isElementPresent(“css=input[id*=’chkbxId’]:checked”);

Will either return true if the element/checkbox is checked or false if not. If using other Selenium methods against this selector, it will either work if element is checked or fail if not checked because element is not found because per the selector rules, it is not checked.

And for getting the selected text/option in a select list element, the following may work:

result = selenium.getText(“css=select[name=’selectElementName’] > option:selected”);

Which will return text of the option element that is selected and is also a child of the specified select element.

And for example using the DOM (via javascript)

result = selenium.getEval(“this.browserbot.findElement(\”id=chkboxId\”).checked”);

Will return true if element checked, or false if not. It would basically return the state of the element’s checked status via DOM javascript property.

And for getting the selected text/option in a select list element, the following might work:

index = selenium.getEval(“this.browserbot.findElement(\”id=select Element Id\”).selectedIndex”);
result = selenium.getEval(“this.browserbot.findElement(\”id=selectElementId\”)[” + index + “].value”);

where we get the selected index of the select element via DOM javascript property, then use the index to fetch the value of the selected option at the given index.

I didn’t fully test out the select list element methods above, but I did test out the checked elements for checkbox and it does work.

These ideas were adapted from web development concepts using the DOM and CSS selectors, for cases where checking element state is problematic in Selenium for whatever reason. References I used for the adaptation:

http://api.jquery.com/checked-selector/

http://stackoverflow.com/questions/473562/javascript-to-check-whether-a-checkbox-is-being-checked-or-unchecked

Update 2/7/2013:

Thought I’d provide some context examples for WebDriver, for the DOM examples above, you can adapt to WebDriver as follows

Method 1

use WebElement.getAttribute() method, attribute name will be the javascript DOM property (e.g. value, selectedIndex, checked, innerHTML)

Method 2

execute javascript passing in the WebElement to manipulate it like

int index = (int) ((JavascriptExecutor) driver).executeScript(“return arguments[0].selectedIndex;”element);

where element is a select list element and we want the selected option index

For the CSS examples above, if they’re valid CSS3/CSS2 selector, they would still work in WebDriver, otherwise, you’ll have to inject Sizzle or jQuery library into website (via WebDriver) to use it, either all via javascript execution or by creating your own findElement/By method for Sizzle/jQuery.

Advertisements

One Response to “Special element state validation with Selenium and CSS and DOM”

Trackbacks/Pingbacks

  1. Javascript is your ally for Selenium / WebDriver « autumnator - February 9, 2013

    […] With Selenium RC, you have access to the browserbot object that gives you javascript-based access to windows and the HTML Document Object Model (DOM) via Selenium. You can do web search on Selenium browserbot to learn more about it or find usage examples. One of my posts show how to use it in interesting ways (under the DOM examples): Special element state validation with Selenium and CSS and DOM […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Pete Zybrick

Bell Labs to Big Data

Seek Nuance

Python, technology, Seattle, careers, life, et cetera...

TELLURIUM

New Era of Test Automation

Der Flounder

Seldom updated, occasionally insightful.

The 4T - Trail, Tram, Trolley, Train

Exploring Portland with the 4T

Midnight Musings

Thoughts on making art

Automation Guide

The More You Learn The More You Play...!

The Performance Engineer

Code.Test.Tune.Optimize.

humblesoftwaredev

Thoughts related to software development

Yi Wang's Tech Notes

A blog ported from http://cxwangyi.blogspot.com

Appium Tutorial

Technical…..Practical…..Theoretically Interesting

LinuxMeerkat

I swear! Meerkats can do Linux

PacketsDropped

Requeuing the packets dropped in my memory.

Two cents of software value

Writing. Training. Consulting.

@akumar overflow

wisdom exceeding 140 chars.

%d bloggers like this: