#33: Client Membership (Transformed Controls)

Click transformed (styled) web controls.

Learning Objectives

• Locate a Transformed Web Control

• Review: find_elements

• Review: Using XPath to go up to parent nodes

Knowledge Point: Transformed Web Control

A transformed web control is a web element that is transformed that look 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.

The original <select> dropdown control is now put into under <div class=’hide-select’>, hidden. The JavaScript generates a list of options in a new <ul> elements.

Although the functionality remains unchanged, the behaviour of a transformed web control can differ.

This certainly affects the automated test scripts. For starters, the element in the raw HTML source is hidden. We need to drive the newly-generated transformed control instead.

Example: Select an option in a Dropdown List

For a standard dropdown, a typical Selenium test step as below.