Javascript is your ally for Selenium / WebDriver

9 Feb

First a background introduction / discussion

When you run into issues or limitations for Selenium, particularly WebDriver, whether it be in Selenium itself or a browser specific limitation, javascript is your ally.

Though javascript isn’t all power and limitless, there’s much that can be done with javascript provided you know what to do with it and how to use it.

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

With Selenium 2 / WebDriver, you have even more power with javascript as you’re given direct access to javascript with the only security restrictions being that of the browser itself (e.g. no system file access, no cross domain AJAX calls w/o workarounds), whatever you can do with javascript, you can execute with the WebDriver JavascriptExecutor. Again, you can web search for some examples.

Now the goodies:

Unfortunately, most Selenium users are not well versed in javascript (not front end web developers), and fortunately, Selenium is good enough 80-95% of the time that you don’t need to resort to javascript. But for the 5-20% of the time where you need a workaround, javascript might be it. So first, it is good idea to learn javascript programming so it can help you be better with Selenium. Outside of Selenium, it also helps you better debug/troubleshoot front end web application bugs.

In this blog post, I’ll list some useful javascript related content links that apply towards Selenium. And I’ll update this post as I find more. Sort of acting as a central repository of useful Selenium javascript workaround hacks. Since it’s not easy scouring the web for such solutions. Feel free to contact me with additional hacks you find.

NOTE: to understand how these hacks work, you have to learn more about javascript…

List of useful Selenium workaround javascript hacks

Verifying images – “really” verifying an image is rendered/displayed on the browser, not just a broken link
http://watirmelon.com/2012/11/27/checking-an-image-is-actually-visible-using-webdriver/

Checking scrollbars – checking whether an element (div, iframe, textarea, etc.) that holds other content has scrollbars (vertical and/or horizontal). The solution here is for Selenium RC in Java, but can be adapted for WebDriver and other languages. A good javascript learning exercise on how to adapt it.
http://selenium-automation.blogspot.com/2010/10/selenium-automation-problems.html

Manipulating (or clearing) HTML5 local & session storage
https://gist.github.com/anonymous/3972875
Can add/remove, check for data, etc. but in terms of automated testing, we’re more likely just wanting to clear storage cache like clearing cookies. The above link is a Java example for session storage, but can be adapted to other languages, and local storage has the same API, just window.localStorage instead. And read this for more info on working with HTML5 local & session storage: http://diveintohtml5.info/storage.html

Drag & Drop using javascript instead of native interaction / Actions API
http://ynot408.wordpress.com/2011/09/22/drag-and-drop-using-selenium-webdriver
In case the native actions drag & drop fails to work for any given browser, or where not available like SafariDriver

Mouse over using javascript instead of native interaction / Actions API
http://code.google.com/p/selenium/issues/detail?id=2067, comment #60 & other related comments (before & after that are relevant). This method useful when the native method fails for any given browser, and currently is only option for SafariDriver.

Mouse click using javascript instead of native interaction / Actions API or WebElement.click()
See the mouse over link above for code. You then just need to modify the code to replace “mouseover” with “click” and “onmouseover” with “onclick”. How is this useful? When the regular WebElement.click() method fails to cause the expected click action, and in case the native interactions / Actions API fails to work either (or where not available like SafariDriver).

Force setting value to a (Web)Element – sometimes, you can’t seem to manipulate a WebElement as action does not seem to take effect or it is not allowed because the element is not visible/displayed (e.g. hidden). One trick is to use javascript to set the value (e.g. value of a form input field, or value of a hidden input field that is actually used by web app and set via javascript when you perform action against some other element that’s usually near it in the DOM tree). For an example of this, see my blog post (WebDriver update at the end): Special element state validation with Selenium and CSS and DOM

Mouse wheel zoom action
http://stackoverflow.com/questions/6735830/how-to-fire-mouse-wheel-event-in-firefox-with-javascript
This currently doesn’t appear to be available in Selenium, even with the native interactions / Actions API? Or I overlooked it. Here’s a possible javascript solution. I haven’t fully tested whether it works or not. As the link is to web developer/application code, you do have to adapt it to work within Selenium. Not simply copy, paste, and run.

Highlighting elements
http://selenium.polteq.com/en/highlight-elements-with-selenium-webdriver

Getting a WebElement from x and y coordinate among other neat stuff too
http://www.slideshare.net/nzakas/javascript-apis-youve-never-heard-of-and-some-you-have
you might be able to get the WebElement from WebDriver API too, not sure, but here’s a way to do it from javascript, and more that might be useful for QA test automation purposes although I’ve not found actual need for them myself at present besides getting element from given coordinates.

more to come…

Advertisements

3 Responses to “Javascript is your ally for Selenium / WebDriver”

  1. CREDO SYSTEMZ April 4, 2017 at 12:11 pm #

    A collection of the best practices and tools for building JavaScript applications. Built on top of jQuery, it consists of the following standalone components:

    StealJS – Dependency management and a stupidly easy build tool.
    FuncUnit – There’s no better functional testing solution available. Write tests in jQuery syntax, run them via command line or browser.
    CanJS – These plugins are the building blocks of large jQuery applications: model, view, controller, class, fixtures, and more.
    DocumentJS – A JSDoc compliant tool that turns comments into a searchable documentation app.

Trackbacks/Pingbacks

  1. Selenium automation with execution of custom site specific javascript « autumnator - February 21, 2013

    […] Expanding on my previous post: Javascript is your ally for Selenium / WebDriver […]

  2. Thoughts on a Selenium interactive exploratory test and debug tool | autumnator - January 24, 2014

    […] Expand the previous bullet to also offer a list of javascript emulated/simulated action commands (not native actions/interactions API from Selenium but pure javascript events & emulation of actions) to execute. This would be nice addition that even Selenium IDE/Builder doesn’t offer I think. It serves as a way to see if javascript workarounds for some Selenium commands will work against given browser or not. Without such feature, the only way to test this is to actually wrap & executed the needed javascript code within your test framework to then test & try out, which also requires trial test runs of some test case with setup & teardown that takes time, or using a Python/Ruby shell to execute it but which requires you to type it up or load a pre-written library. But why waste all that time when you can test out quickly in a special debugger tool like this. Examples of javascript wrapped commands: drag & drop, mouse click, mouse over, mouse up, mouse down, scroll mouse wheel. See this blog post about javascript workarounds for ideas. […]

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: