While automating commands like clicking with Selenium is fairly straightforward once you get it down, more advanced user actions such as scrolling, controlling mouse movements, navigating forms, and handling pop-ups will prove to be more difficult.

However, while performing user actions with Selenium can be challenging, they’re an important part of writing an end-to-end test that accounts for common user behavior. Follow along with this installment of our Selenium 101 Series to get a better understanding of how to automate them.

Scrolling

The command scrollIntoView is used in Selenium testing to scroll the div content into view while running the tests. scrollIntoView() is a predefined method in JavaScript. This method brings scrolls into the viewport to perform the test commands. If the element does not exist, the attribute returns NULL. scrollIntoView() is used when there are hidden elements in the web page.

ScrollIntoView allows you to specify whether the top or the bottom of the element will be put into view. By default, the top of the element will be aligned to the top of the scrollable object.

Let’s look at an example:

var webdriver = require('selenium-webdriver');

var driver = new webdriver.Builder()

.forBrowser('chrome')
.build();

//driver.manage().timeouts().implicitlyWait(10);
 function scrollingIntoView() {

element = driver.findElement(webdriver.By.id("featurette-13"))

.then(function(element) {

var element1 = driver.executeScript("arguments[0].scrollIntoView();", element);

});

}

driver.get('https://smartbear.com')

.then(scrollingIntoView());

driver.quit()

In the example, we are searching for an element by ID, which is in the bottom of the page. For Selenium to click that element, it needs to be scrolled to that viewport. While executing that function, arguments object is created. It has an array structure where the total number of parameters passed is specified, then it executes to scroll the element into the viewport.

Drag and Drop

While testing some websites, we encounter dragging and dropping like a target element moved to another element location. A dragAndDrop(element, location) function is defined to drag to a web element or to an offset in pixels.

Let’s look into an example:

var webdriver = require('selenium-webdriver');
var assert = require('selenium-webdriver/testing/assert');
var droppable
var draggable
var driver = new webdriver.Builder()

.forBrowser('chrome')
.build();

function draggingAndDropiing() {

draggable = driver.findElement(webdriver.By.id("draggable"))
droppable = driver.findElement(webdriver.By.id("droppable"))
driver.actions().dragAndDrop(draggable,droppable).perform();

}
/*
//move draggable to droppable and release via actions
function draggingAndDropiing() {

draggable = driver.wait(webdriver.until.elementLocated(webdriver.By.id("draggable"), 500))
droppable = driver.wait(webdriver.until.elementLocated(webdriver.By.id("droppable"), 500)) 
driver.actions()
.mouseMove(draggable)
.mouseDown()
.mouseMove(droppable)
.mouseUp()
.perform();

}
*/
function dropable() {

dropped = droppable.findElement(webdriver.By.css("p")).getText()

.then(function(dropped){

assert(dropped).equalTo('Dropped!');

});

}

driver.get('http://crossbrowsertesting.github.io/drag-and-drop.html')

.then(draggingAndDropiing())
.then(dropable());

driver.quit()

In the webpage, there are two web elements that draggable which are dragged into the other web droppable element. In the first function, a predefined dragAndDropdriver function is called and the parameters will be the element that needs to be dragged. Another parameter will be located where the element should be dropped and then perform() will execute the action sequence.

In a similar way, this dragAndDrop action can be performed with the mouse movements. In another function, we can observe a mouseMove() function is called by specifying the first parameter as the location to move to.

After driver encounters the element, mouseDown() and mouseUp() actions are done. What these do is press a mouse button without releasing until mouseup is called and vice-versa for mouseUp. All the actions are executed in sequence by perform().

Forms

In web automation, it is common practice to automate forms that have dropdowns, radio buttons, or checkboxes. We’ll look into how to test radio buttons and dropdowns.

Dropdowns

A dropdown list allows the user to select a single option out of a large number of items. This is an ust like selecting any other type of element on a webpage. Dropdowns can be selected by ID, Name, CSS & Xpath.

var webdriver = require('selenium-webdriver');
const util = require('util');
//create driver object for chromedriver
var driver = new webdriver.Builder()

.forBrowser('chrome')
.build();

function dropable() {

driver.findElement(webdriver.By.id("dropdown")).click()

.then(function(element){

driver.findElement(webdriver.By.css("#dropdown > option:nth-child(3)")).click()
element2 = driver.findElement(webdriver.By.id("submitbtn")).click();

});

}

driver.get('http://crossbrowsertesting.github.io/selenium_example_page.html?text=&select=&radio=&textarea=')

.then(dropable());

driver.quit()

In the webpage, there is a dropdown list where we might need to select an option while using automation to perform some other actions. We have selected the dropdown list to make it active and selected the third option with CSS element.

Radio Boxes

If ID/CSS is given for the Radio Button and you just want to click on it irrespective of its value, then the command will be like this:

var searchbar;

var webdriver = require('selenium-webdriver');

//create driver object for chromedriver
var driver = new webdriver.Builder()

 .forBrowser('chrome')
 .build();

function radioButton() {

searchbar = driver.findElement(webdriver.By.css('#myform > input[type="radio"]:nth-child(7)')).click();
 
 driver.findElement(webdriver.By.id("submitbtn")).click(); 
 
 }

driver.get('http://crossbrowsertesting.github.io/selenium_example_page.html?text=&select=&radio=&textarea=')

 .then(radioButton());

driver.quit()

WebDriver provides the methods to find the elements. findElement() finds a single web element and returns as a WebElement object.

We have created an example which selects a radio button and is toggled on by using click() method. These selections are then submitted to the form.

Pop-ups and Alerts

Alerts are pop-up windows which may appear after clicking or filling form. Alert window block the underlying webpage without performing any actions. Testing these alerts in a web page node allows interactions with JavaScript-based dialog boxes. driver.switchTo().alert() is a method which will allow to you switch from main window to an alert so that you may properly handle it.

Once the command focus is switched to the alert interface, there are few methods that can be use to deal with the dialog box like, accept() , dismiss(), getText() , and sendKeys().

var webdriver = require('selenium-webdriver');
const util = require('util');
//create driver object for chromedriver
var driver = new webdriver.Builder()

.forBrowser('chrome')
 .build();

function alert() {

 element = driver.findElement(webdriver.By.css("body > div > div:nth-child(12) > button")).click()

 .then(function(element){

 var alert = driver.switchTo().alert();
 alert.getText().then(function(text) {

 console.log('alert text: ' + text);
 alert.accept();
 });

});
 }

driver.get('http://crossbrowsertesting.github.io/selenium_example_page.html?text=&select=&radio=&textarea=')

.then(alert());

driver.quit()

Simple alerts will only have an “OK” button in addition to displaying some information to the user. Some alerts will have options of “OK” and “Cancel” where we can choose Alert.Accept() or Alert.dismiss() based on our requirements. If there is an option of filling out a text box in an alert window, there is a predefined method called sendkeys() to send the text to the alert and accept it.

var webdriver = require('selenium-webdriver');
const util = require('util');
//create driver object for chromedriver
var driver = new webdriver.Builder()

 .forBrowser('chrome')
 .build();

function alert() {

 element = driver.findElement(webdriver.By.css("#pop-up-page > button:nth-child(2)")).click()
 driver.findElement(webdriver.By.id("closepopup")).click()

}

driver.get('http://crossbrowsertesting.github.io/selenium_example_page.html?text=&select=&radio=&textarea=')

 .then(alert());

driver.quit()

In this example, we have a simple alert window that has sample text and an “OK” button. After the button is clicked, this will return the currently open alert object. With this object, you can now accept, dismiss, read its contents or even type into a prompt. Here the object gets the content from the alert window with getText() method and accepts the alert.

Conclusion

Mastering automating user actions is key to mastering automated testing. Elements like scrolling, drag and drog, filling out forms, and handling pop-ups will have to be addressed during testing, so it’s probably you’ll come the need to automate them as well.

For more on getting started with test automation, check out the rest of our Selenium 101 series:

• Selenium 101: How to Automate Your Login Process
• Selenium 101: Running Your Test Against Two Browsers at Once
• Selenium 101: Navigating Waits and Sleeps
• Selenium 101: How to Take Screenshots During Automated Tests
• Selenium 101: Generating Test Reports
• Selenium 101: Mastering Selenium Design Patterns
• Selenium 101: Managing Multiple Tabs