Skip to content

Advanced Element Interactions

As the modern web application became prevalent, more complex and advanced user interactions with the web application became available to the users. We have to be able to simulate such user interactions in our automation scripts.

This code note will cover the following advanced user action:

  • Scrolling
  • Slider
  • Highlighting
  • Resizable element
  • File upload
  • iFrame



› Scrolling

Scrolling on the page is one of the most common user interactions. Since scroll actions are not part of the web application, the driver cannot simulate them on its own. Selenium provides access to the browser's JavaScript engine to address this shortcoming, where JavaScript code can be executed. All browser actions can be simulated by providing JavaScript code to the JavaScript engine. We can do this by casting the driver object to the JavascriptExecutor object. 

1
2
WebDriver driver = new ChromeDriver(); 
JavascriptExecutor jsEngine = (JavascriptExecutor)driver;

Through the JavascriptExecutor object, we can send custom JavaScript code that simulates complex user interactions with the browser.

Scrolling up and down on any web page is possible by following JavaScript code: 

1
2
3
// 1st arg: horizontal pixel count,  0 --> horizontal max
// 2nd arg: vertical pixel count,  0 --> vertical max, in this case 600px to the right
window.scrollBy(0, 600);

In this JS code, the window object refers to the open browser window. The first argument of the scrollBy method takes horizontal pixel counts for horizontal page scroll, and the second argument takes vertical pixel counts for vertical page scroll.

Scroll down the page by 600 pixel
1
2
3
4
5
6
7
WebDriver driver = new ChromeDriver();
driver.get("https://trello.com");

// Get access to JavaScript engine 
JavascriptExecutor jsEngine = (JavascriptExecutor) driver;
// Scroll the page vertically down 600px
jsEngine.executeScript("window.scrollBy(0,600)", "");

When we need to take a screenshot for test execution, the element we interact with needs to be present in the screenshot. We can scroll down to the element in the user's view by using the following JavaScript code.

Scroll to the element ( into view )
1
arguments[0].scrollIntoView(true);  // arguments[0] is the element

Using the JavaScript code, we can simulate the scrolling of the element into the view by: 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
By loc_element = By.cssSelector("#elementBelow");
WebElement element = driver.findElement(loc_element);

// Get access to JavaScript engine 
JavascriptExecutor jsEngine = (JavascriptExecutor) driver;

// JavaScript code that will scroll the page to the target element 
String jsCode = "arguments[0].scrollIntoView(true);";

// jsCode will be exected against the element (2nd argument)
jsEngine.executeScript(jsCode, element);



› Slider

Sliders allow users to select a value by dragging and dropping a handle, where the value can be a price, quantity, or time. The web page could use a textbox to get the same information from users; however, the page becomes much more engaging with the sliders.

Example of a slider :

Since the slider is part of the web app, the driver can simulate the usage by using the Actions class as follows: 

1
2
3
4
5
6
7
WebElement slider = driver.FindElement(By.XPath("//*[@id='mcl-range]")); 

Actions action= new Actions(driver);
action.clickAndHold(Slider)
      .moveByOffset(40,0)  // move 40px horizontally
      .release()
      .perform();

However, occasionally this code does not work. To ensure that the slider simulation code works at all times, we will once again use JavaScript to simulate the slider usage. 

1
2
3
4
5
6
7
8
9
String testUrl = "https://testautomationpractice.blogspot.com/";
driver.get(testUrl);

By loc_slider = By.cssSelector(".ui-slider-handle");
WebElement slider = driver.findElement(loc_slider);

// Move the slider from Left -> Right by 50%
String script = "arguments[0].setAttribute('style', 'left: 50%;'); ";
js.executeScript(script, slider);



› Highlighting

Often test automation execution requires taking a screenshot for reports. For this reason, we need to highlight every element we will be interacting with our automation script. The driver cannot highlight an element, but the JavaScriptExecutor object allows us to highlight an element through JavaScript code.

Example of element highlight:

JavaScript code for element highlighting: 

1
arguments[0].setAttribute('style', 'border: 3px solid red;');

Using this JavaScript, we can highlight the element we want to highlight:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
driver.get("https://trello.com");

// Locate the page banner element
By loc_page_banner = By.xpath("//h1");
WebElement pageBanner = driver.findElement(loc_page_banner);

// Highlight the element with JavaScript code 
JavascriptExecutor jsEngine = (JavascriptExecutor) driver;
String code = "arguments[0].setAttribute('style', 'border: 3px solid red;')"; 
js.executeScript(code, pageBanner);

We will use this code extensibility for the production level test automation framework. Please make sure to memorize the code.



› Resizable element

In some web applications, you will see a resizing functionality where you can resize an element by either increasing or decreasing its width and height. To automate resizing functionality, you can combine the clickAndHold() and moveByOffset() methods of the Actions class to achieve that.

1
2
3
4
5
6
7
8
By loc_resize_icon = By.xpath("//div[@id='resizable']");
WebElement resizeIcon = driver.findElement(loc_resize_icon);

Actions actionsDriver = new Actions(driver);
actionsDriver
    .clickAndHold(resizeIcon)
    .moveByOffset(400, 600)  // move 400px horizontal right, move 600 vertical down
    .perform();

The clickAndHold() method needs the current web element as a parameter.

  • resizeIcon: The element on this example code that is to be clicked and held.

The moveByOffset() method needs the horizontal and vertical offsets as parameters.

  • offsetX: The horizontal offset in pixels to which to move the mouse, 400 pixels in the example code above.
  • offsetY: The vertical offset in pixels to which to move the mouse, 600 pixels in the example code above



› File Upload

File upload is performed when there is a need to upload any file or a document on a specific website, such as forms, registration pages, document uploaders, etc. Uploading a file process includes browsing a file from the desired location or your computer and uploading it to the website.

As you can see from the above image, uploading a file requires you to work with your operating system. Regardless, the web application receives the target file that must be uploaded as a file path string. We can send this file path string in our code to accomplish the file upload.

Simulating file upload

1
2
3
4
5
6
String filePath = System.getProperty("user.dir") + "/files/sample.csv";

By loc_file_upload = By.cssSelector(".file_upload_button");
WebElement uploadFile = driver.findElement(loc_file_upload);

uploadFile.sendKeys(filePath);  // file upload

As you can see, we just extracted the file upload input element and sent the file path string as a text. That is all required for simulating users uploading a file in web applications.



› iFrame

Some web applications embed the content of the external websites into the web page. This can be achieved by using an iframe element to load the entire external site within the containing site. Although it is not common on modern web applications, you should see its usage.

In our example above, we have the original site marked at A that contains another site within the iframe marked as B where, on its own, it has an inner site within the iframe marked as C.

Working with the element inside an iframe is exactly the same as we already know how to work with elements. The only thing special about working with an iframe is to switch the focus of the driver to the target iframe so that we can interact with the elements within it.

Switching to iframe B and click ButtonTwo

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
// Location of iframe marked as B
By loc_iframe_B = By.xpath("//iframe[@id='B']");

// Extract the iframe B as an element 
WebElement iframeB = driver.findElement(loc_iframe_B);

// Switching driver's focus to iframe B 
driver.switchTo().frame(iframeB);

// Interacting with the ButtonTwo 
By loc_button_two = By.xpath("//button[@id='two']");
WebElement buttonTwo = driver.findElement(loc_button_two);
buttonTwo.click();

Switching to iframe C from the iframe B

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
// Location of iframe marked as C
By loc_iframe_C = By.xpath("//iframe[@id='C']");

// Extract the iframe C as an element 
WebElement iframeC = driver.findElement(loc_iframe_C);

// Switching driver's focus to iframe C 
driver.switchTo().frame(iframeC);

// Interacting with the ButtonThree 
By loc_button_three = By.xpath("//button[@id='three']");
WebElement buttonThree = driver.findElement(loc_button_three);
buttonThree.click();

Now that the focus of the driver is on the iframe marked as C. We can go back to the original site or we can go back to the parent iframe marked as B.

Going back to parent iframe B from iframe C

1
driver.switchTo().parentFrame();

Going back to the original site marked as A from either iframe B or iframe C

1
driver.switchTo().defaultContent();