Selenium-5: Webdriver Manipulation


Outline

In test automation manipulation means to do something on a page such as click on a button, select a radio button, select a dropdown box item, write a text into a text box, etc. To do these events first we have to interrogate (find) that web element, then do an action on it. In this post, we will focus on doing an action on a web element.

Audience

This post is designed for beginners who have little or no automation experience. At the end of this tutorial, you will have knowledge on Selenium Webdriver manipulation features.

Prerequisites

Nice to have: Before starting to read this post it is better to read previous selenium tutorials.

Webdriver Main Manipulation Methods

Webdriver API has got a bunch of methods you can find all the list below link.

https://www.mindmeister.com/280141421/selenium-2-webdriver-commands

However, the most common manipulation methods are:

  • .click() [Click a button or link]
  • .clear() [Clear text]
  • .sendKeys(String) [Write text or perform keyup, keydown, etc.]
  • .submit [Submit a form]

I want to continue this post with examples. The best way to understand Manipulation methods of webdriver is to do exercises.

Mouse Interactions

The most common mouse interactions are

.click

.doubleClick (Deprecated)

.release (Deprecated)

.clickAndHold (Deprecated)

.contextClick (means Right Click) (Deprecated)

First, we have to find the web element which is a button, link, etc. then we will apply mouse interaction for our test scenario.

For example:

Keyboard Interactions

The most common keyboard interactions are:

.sendKeys

.keyUp (Deprecated)

.keyDown (Deprecated)

For example:

Radio Button Interactions

Our test site is www.facebook.com and our scenario is described as follows.

  1. Go to facebook.com
  2. Click male radio button
  3. Check male radio button is Displayed/Enabled/Selected
  4. Click female radio button
  5. Check female radio button is Displayed/Enabled/Selected

Css path of male radio button is: #u_0_o

Css path of female radio button is: #u_0_n

Test code is shown below:

Check Box Interactions

Our test site is www.facebook.com and our scenario is described as follows.

  1. Go to facebook.com
  2. Check “Keep me logged in” check box is NOT selected
  3. Click “Keep me logged in” button.
  4. Check “Keep me logged in” check box is selected

Css path of “keep me logged in” check box is: #persist_box

Our test code is shown below:

Drop Down Interactions

Our test site is www.facebook.com and our scenario is described as follows.

  1. Go to facebook.com
  2. Set Birthday as follows Oct – 29 – 1990

We have some options to select dropdown items. I explained three of them below. We can select dropdown items also with webdriver’s sendkeys method.

1) Chain of Find Elements and Direct Access to Dropdown Item

Month dropdown select CSS Path: #month

Day dropdown select CSS Path: #day

Year dropdown select CSS Path: #year

manipulation

October option full CSS path: #month>option[value=’10’]

October option CSS path: option[value=’10’]

manipulation

29th day’s full CSS Path: #day>option[value=’29’]

29th day’s CSS Path: option[value=’29’]

manipulation

We have two options now:

1.1) Click full CSS Path of dropdown items. (Direct Access to Drop Down Options)

1.2) First find Dropdown’s select CSS path and then find the required option.

2) Webdriver Select Method

We have three options to select dropdown item with Select method.

2.1) selectByIndex

2.2) selectByValue

Month value is: 10

manipulation

Day Value is: 29

manipulation

Year Value is: 1990

manipulation

2.3) selectByVisibleText

Multi-Select Interactions

Our test site is http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select_multiple and our scenario is described as follows.

  1. Go to http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select_multiple
  2. Select Volvo and Open
  3. Click Submit Query
  4. Check Volvo and Opel selected

Multiple Select CSS Path: select[name=’cars’]

Submit Query CSS Path: input[type=’submit’]

Result Part’s second line CSS Path: html>body>h3:nth-of-type(2)

Note: All elements are located in an iframeResult iframe so we have to switch to this iframe to locate elements.

First we need to find the multiple select and then get all the options into a list. After that, we can do all kind of manipulations with these options.

Multi-select with Select Class

Also, Select webdriver comprises of deselect methods as follows:

Deselect methods only works with Multi Selects!

  • deselectByIndex
  • deselectByValue
  • deselectByVisibleText
  • deselectAll

Submitting Forms

When we fill the web form, the last step is submitting filled values. To do this, we have some options. These are:

  1. Submitting with form
  2. Submitting with form button
  3. Submitting with keyboard keys

Here are the examples of all options.

1) Submitting with form

Our test site for this example is www.linkedin.com and our scenario is described as follows.

  1. Go to linked.com
  2. Find join form
  3. Submit form without entering any value
  4. Find first name error alert
  5. Check first name error

Forms’s CSS Path:

manipulation

Alert’s CSS Path:

manipulation

And our scenario’s test code is shown below:

2) Submitting with form button

Our scenario is same but this time we should find the join form submits button locator and click it. Then check the error message.

Submit button’s css is .btn.btn-primary.join-btn

And test code is shown below:

3) Submitting with keys

This time you should again find join form’s button and instead of using .click() or .submit() functions. You can use joinFormButton.sendKeys(Keys.SPACE) or joinFormButton.sendKeys(Keys.ENTER). I generally do not prefes to use this option.

Submitting a File

Our test site for this example is http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_type_file

  1. Go to http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_type_file
  2. Click “Browse” button
  3. Select sample_text.txt
  4. Click “Submit Query” button
  5. Check the result

Browse button’s CSS path: input[name=img]

Submit Query CSS path: input[type=submit]

Check text CSS path: html>body>h3:nth-of-type(2)

First we will click the browse button, then select the test_file.txt file and submit the form. At the end we will check the result.

Interaction Sequences

Webdriver provides us to perform interactions in an order. We can do that like sample below code:

You can find all other interactions on manipulation section of below link.

https://www.mindmeister.com/280141421/selenium-2-webdriver-commands

Examples:

1) Move an element to another element (Move to):

We should use below functions in order.

  • clickAndHold()
  • moveToElement()
  • release()
  • perform()
2) Drag one element and drop it to another element (Drag and Drop):

We should use below functions in order.

  • dragAndDrop()
  • release()
  • perform()
3) Key Sequence:

For example if you want to perform ctrl+enter, you can use actions to do this. First we should use keyDown(), then sendKeys(), and finally keyUp().

Summary

  • We learned and did exercises of Selenium Webdriver’s manipulation methods
  • We learned mouse, keyboard, radio button, check box, drop-down, multi-select, form, file interactions and actions.

javafx

Database Operations in JavaFX

By Onur Baskirt / Apr 1, 2016 / 59 Comments
Before started this section, please check the first article and learn How to Start JAVAFX! http://www.swtestacademy.com/getting-started-with-javafx/ At first, part of JavaFX tutorial series, we created a sample JavaFX project, designed the draft version of the UI and set up an...
rest assured

REST API Testing with Rest Assured

By Onur Baskirt / Mar 8, 2016 / 32 Comments
Outline In this post, I will explain what is API and API testing, what is the difference between SOAP and REST services, and how to test REST APIs with Rest Assured Library. What is API? API stands for Application Programming...
selenium

How to Write Smart XPath Locators

By Onur Baskirt / Sep 24, 2017 / 5 Comments
Hi all, in this tutorial, I will describe you how to write smart and non-brittle XPath locators. When we write our test scripts, we generally prefer to use id, name, class, etc. these kinds of locators. However, sometimes we could not...
selenium

How to Write Effective CSS Locators

By Onur Baskirt / Oct 1, 2017 / 0 Comments
Hi all, in this tutorial, I will describe you how to write effective CSS locators to interrogate web elements for your automation projects. As a rule of thumb, your interrogation strategy should be in below order: First try to use...
selenium

Selenium-1: Quick Start to Automation with Selenium WebDriver & JAVA & JUnit & Maven & IntelliJ

By Onur Baskirt / Sep 8, 2015 / 26 Comments
Outline Selenium Webdriver is the most popular open source web test automation framework across the wide range of browsers and platforms. In this tutorial, you will learn how to do web test automation with Selenium Webdriver and the related tools....
allure

Test Automation Reporting with Allure and TestNG

By Onur Baskirt / Oct 21, 2017 / 13 Comments
Hi all, in my last article I explained how to integrate ExtentReports reporting framework with TestNG for shiny and beautiful test automation reports [link]. In this article, I will explain you another popular test reporting framework which is developed by...
selenium

Selenium-11: Execute JavaScript with JavascriptExecutor

By Onur Baskirt / Jan 27, 2016 / 16 Comments
Outline Sometimes we cannot handle some conditions or problems with Webdriver, web controls don't react well against selenium commands. In this kind of situations, we use Javascript. It is useful for custom synchronizations, hide or show the web elements, change...

Getting Started with RobotFramework on Windows

By Onur Baskirt / Apr 25, 2016 / 12 Comments
What is RobotFramework? RobotFramework is a GENERIC test automation framework for acceptance testing and acceptance test-driven development (ATTD). What it means that you can do web, mobile, desktop and other test automation activities with related test libraries. These libraries can...
page object model

Page Object Model with C#

By Ege Aksoz / Jun 18, 2017 / 8 Comments
In the previous tutorial, we’ve taken the initial steps and entered the world of automated testing. We also wrote our first automated test. From this point on, since we are not just going to write one test, we need to...
javafx

Getting Started with JavaFX

By Onur Baskirt / Mar 25, 2016 / 0 Comments
When I started to work in my current position, one of my task is to do manual operations for campaign products  every week. After the second week, I thought that I have to automate this task using a GUI based...
By | 2017-10-22T02:10:50+00:00 December 13th, 2015|Selenium, Test Automation, Web Automation|6 Comments

About the Author:

Onur Baskirt

Onur Baskirt is a senior IT professional with 10+ years of experience. He worked at Bahçesehir University, ST Microelectronics, Huawei and Ericsson as research assistant, design verification engineer and software test leader. Also, he worked as software test leader and software operations manager at Turkey’s biggest technology retailer, Teknosa. Now, he is working as Head of Software Testing and Manager of two Development Teams at Kariyer.net. His current research areas are technical software testing, programming, and computer science. Formerly, he has several research works and papers on digital chip design & verification. His hobbies are sport, dancing, traveling, and nutrition. You can find detailed information about him on his linked-in page.

6 Comments

  1. ali December 17, 2015 at 8:31 pm - Reply

    Merhaba onur çok güzel bir site açmışsın.Youtube video nasıl yükleyebilirim selenium ile onunla ilgili bir makale hazırlarmısın.Karşılıgında sana bir adet backlink vereceğim blogumdan.

  2. Onur Baskirt
    Onur Baskirt December 17, 2015 at 8:36 pm - Reply

    Merhaba Ali, öncelikle bize heyecan veren güzel sözlerin için çok teşekkür ederim. İleride Selenium ile ilgili tüm konuları tamamladıktan sonra bu tarz örneklere yer verebiliriz.Bahsetmiş olduğun örneği önceliklendirmeye çalışırız. Linkedin, facebook ve twitter dan duyurusunu yaparız.

  3. Nenita Moncur April 5, 2017 at 12:01 am - Reply

    Hello! I just would like to give a huge thumbs up for the great info you have here on this post. I will be coming back to your blog for more soon.

  4. Salvador Calaycay April 5, 2017 at 1:43 pm - Reply

    that’s good, thanks for sharing,.. I think this is great blog

Leave A Comment Cancel reply