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

.release

.clickAndHold

.contextClick (means Right Click)

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

.keyDown

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

Also Select webdriver comprises of deselect methods as follows:

  • deselectByIndex
  • deselectByValue
  • deselectByVisibleText
  • deselectAll

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.

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 is 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’s submit 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.