How to Drive a Transformed Web Control with Selenium WebDriver?

Simple and logical way to automate transformed web controls.

Included in my “How to in Selenium WebDriver” series.

Some web frameworks, such as Materialize, display a different set of web controls (e.g., radio and select dropdown boxes) derived from the standard ones in the source. This presents some challenges to test automation, and some QA engineers have given up automating those websites for this reason.

During the consulting, I heard this a few times, “Selenium WebDriver won’t be able to automate this kind of web page?”. I would say, “Selenium can handle that easily, and if you give me two minutes, I will demonstrate now against your web page”.

I will show how to drive these transformed web controls in this article.

Table of Contents:
· What is Transformed Web Control?
· Does it affect Test Automation?
∘ Example: Select an option in a Dropdown List
· How to drive a transformed control?
∘ Example: Select Transformed ‘Gender’ Dropdown Step by Step

What is Transformed Web Control?

This is not an official term, I named it this way. From experience, mentees seemed to accept this term well.

A transformed web control is a web element that looks different from the standard ones, as shown below.

This is commonly accomplished using (on the fly) JavaScript, which conceals the original web control and replaces it with a styled control that serves the same purpose.

For example, the HTML source (get by ‘View Page Source’ in Chrome) for the above Gender dropdown box:

<select name="staff[gender]" id="staff_gender">
  <option selected="selected" value="">- Please select -</option>
  <option value="Male">Male</option>
  <option value="Female">Female</option>
 </select>
 <label for="staff_first_name">Gender</label>