Embedded Elements

One of the big challenges analysts face with Automation is the interaction with embedded elements.  Embedded elements are elements which are nested in other elements.

A simple example is to enter your email address on the Zoho CRM page.

URL for the webpage: https://www.zoho.com/crm/lp/login.html

To check if the text field exists we would do it by using basic Watir-WebDriver commands like:

b.text_field(:id ,’lid’).exists?

To enter an email address in the text field below we would fill the text field by using basic Watir-WebDriver commands like:

b.text_field(:id ,’lid’).set(‘[e-mail]’)

The output of the the above two commands is as follows:

The text field is not set. This is because the text field does not exist.

Now we traverse the DOM further up and check in which element is the text field embedded.

When we traverse up the DOM we see that the text_field is embedded in an iframe.

Here is a small snippet of the DOM which encompasses the iframe

<iframe marginwidth="0" marginheight="0" id="zohoiam" name="zohoiam" frameborder="0" scrolling="no" src="https://accounts.zoho.com/login?servicename=ZohoCRM&amp;serviceurl=/crm/ShowHomePage.do&amp;hide_signup=true&amp;css=https://www.zoho.com/css/prd-sign.css" style="width:430px;height:350px;margin: 0;float:left" allowtransparency="true"></iframe>

First we check if the frame exists

b.iframe(:id ,’zohoiam’).exists?

Now we check if the text field exists within the iframe

b.iframe(:id ,’zohoiam’).text_field(:id,’lid’).exists?

The output of the the above two commands is as follows:

Now we set the text field with [e-mail] by using the following command

b.iframe(:id ,’zohoiam’).text_field(:id,’lid’).set(‘[e-mail]’)

 

The text field is now set to [e-mail]