How to Select Elements in Selenium With Selenium Automation Scripts

Selenium is the leading test automation framework for web apps, allowing teams to create browser-based automation scripts using a plethora of languages. The Selenium framework comprises Selenium WebDriver, Selenium IDE, and Selenium Grid. Selenium allows testers and developers to experience browser-based regression automation tests with language-specific support on Chrome, Firefox, and Edge, as well as automated exploratory testing and bug recreation scripts.

Selenium operates using multiple programming languages, such as C#, JavaScript, Perl, PHP, Python, and Ruby.

Selenium automation scripts can help you select elements in Selenium. Selenium automation scripts simulate user interactions using a synthetic sequence of user behavior representing a test case, including selecting options, entering data, and specifying wait times for each interaction, among other features.

Here, I will explain how to use the execute JavaScript option to manipulate the SelectField values as part of the automation scripts.

What Selenium Automation Scripts Do

Selenium automation scripts need to control all the Page Elements and Selenium provides a very robust solution for EditField, Button, and EditBox.

Examples

.Click For Button:

webdriver.findElement(By.xpath(".//*

[@id='imgSubmit']")).click();

.sendKeys for editField:

webdriver.findElement(By.xpath("(//input[@id=\"email\"])")).sendKeys("[email protected]");

.sendKey also works for editBox by sending [0 or 1] or click:

webdriver.findElement(By.xpath(".//*[@id='remember']")).sendKeys("1");

The .sendKeys command works on basic SelectField. In this case the option to use JavaScript as part of the automation helps us to handle the Selenium SelectField.

Using JavaScript For Selenium Automation Scripts

Selenium automation scripts need to control all of the object elements. This includes Selenium SelectField. In some cases, the basic Selenium/WebDriver .sendKeys command does not work with Select Elements.

For example, on advanced implementations like the ones listed below, the only way to automate is using JavaScript:

• Changing SelectField value triggers refresh for the page to update other fields.
• In mobile, a very common usage is to build two objects, one being EditBox and TextField on top, selecting value for the EditBox updates the TextField.
• Selenium automation action like select by index or by name.

Selenium WebDriver allows you to execute JavaScript on your browser. For example, in order to set an alert I can execute the following command:

_webdriver.executeScript("Alert(\"Perfecto Mobile\"");

The result follows. 

Here's what this executeScript command looks like this on mobile using Perfecto (which integrates with Selenium:

How to Select Objects in Selenium With JavaScript

Here's how to use select Selenium objects in JavaScript.

1. Find Selenium Objects in JavaScript

In order to manipulate the SelectField, the first step is to find the objects in JavaScript.

JavaScript provides two functions we can use:

• Function document.getElementById('ID') returns the field
• Function document.getElemenstByName('Name') returns an array with all the fields with the specific name (name is not unique id)

Remember: ID is better than name so if your object contains ID, use it!

2. Update the Value

After finding the object, the next step is to change the value using the following JavaScripts: JavaScript to find element by ID and select item number 2:

sf = document.getElementById('ID'); sf.selectedIndex=2 ;

JavaScript to find element by name and select item number 2, getElementsByName returned an array, so in this case I’m going to change the first element:

sf = document.getElementsByName('NAME')[1]; sf.selectedIndex=2 ;

In order select specific value from SelectField we need to loop over all of the values and use the value index. JavaScript needs to find element by id and select item with the value 1997.

sf = document. getElementById ('year'); 
for (i=0; i<sf.options.length; i++) 
{
if (sf.options[i].value.localeCompare('1997')==0)
{
sf.selectedIndex = i;
}
}

JavaScript to select the item with the value 1997:

sf = document.getElementsByName('year')[1];
for (i=0; i<sf.options.length; i++)
{
if (sf.options[i].value.localeCompare('1997')==0)
{
sf.selectedIndex = i;
}
}

3. Refresh Elements

It is a good practice to execute refresh on the object after the update in order to update other relative objects. The Java code executes a fresh command, it uses the same SF variable and needs to be added to the update code (above):

if ("createEvent" in document) 
{
var evt = document.createEvent("HTMLEvents");
evt.initEvent("change", false, true);
sf.dispatchEvent(evt);
}
else
sf.fireEvent("onchange");

The last step is to use the scripts above and execute them from the Selenium/WebDriver execute Java scripts command. There is Java code in GitHub which gets WebDriver, SelectField identifier, and index or ID — and executes the JavaScript on the relevant browser (for PC or mobile).

Use Selenium Automation Scripts With Perfecto

Perfecto integrates seamlessly with the Selenium framework, allowing you to boost test coverage and test faster. When paired with Perfecto, testers and dev teams can run Selenium automation scripts on real browsers in a secure, enterprise-grade testing cloud. 

You can even run Selenium cloud testing in any supported language and any supported test framework, allowing you to execute at unlimited scale from within your IDE, your CI, or command line. 

To start testing with Selenium automation scripts, start your Perfecto free trial today. 

StART TRIAL

Related Content

• Limitations of Selenium
• Testing With Selenium
• Responsive Web Design Testing Using Selenium