Web Element Operations

Web Element Operations

Context:

Once we identify elements using a suitable locator/selector strategy , we will need to interact with the elements. For a text field – set text, for a checkbox – check, select list – select an option and so on.

The api’s/methods we will be using depends on the type of WebElement we interact with. For example, we can sendKeys() to a text field, click() on a link etc. In ths section, we will interact with a web form having different kinds of html elements (text box, radio, checkbox, select etc.). Some of the common web element operations are as follows:

  • sendKeys()
  • click()
  • selectByVisibleText()
  • selectByValue()
  • getAttribute()
  • …Many more

Pre-requisites:

  1. You have completed the section “Set up Env” and have your environment ready with JDK, maven and Eclipse (+plugins)
  2. You have read and understood HTML DOM
  3. You were able to comprehend “Find Element Strategies” post
  4. You downloaded the project code base for class3 under – https://github.com/machzqcq/CucumberJVMExamples and imported into Eclipse and the structure should look as below

class3_eclipse_project_structure

If you are using intellij [which I would recommend over Eclipse], then imported project should look as below

class3_intellij_project_structure

Syntax: 

  • We use sendKeys() method and send any string we want to set inside the text field
  • We use click() to click on a link or button or any WebElement
  • Select is a type in itself, hence we wrap a WebElement into a Select type and then select its options using selectByVisibleText and pass the option text to it.

Scenario Outline:

If we need to execute a set of cucumber steps with different data sets, we can use scenario outline. We will talk in detail about scenario outline again in “Intermediate Tutorial”, however I thought to include a scenario here, because it is applicable on a form that we will use in this section.

Faker

There will be situations where we might have to key in fake data into fields. In this section we will use a library Faker that will key in random data. In the pom.xml, include the below dependency.

Scenario 1

In this scenario, we fill the form on “http://www.practiceselenium.com/practice-form.html” with values and then submit the form. We call the scenario “Complete registration form

step_defintions/Submitform.java

Scenario 2 (Data Table)

In this scenario, we fill the form on “http://www.practiceselenium.com/practice-form.html” with various data sets supplied as a data table. This is extremely powerful for data-driven framework and we will examine more in Intermediate tutorial.

step_defintions/Submitform.java

Scenario 3 (Fake data)

In this scenario, we fill the form on “http://www.practiceselenium.com/practice-form.html” with fake data generated by Faker a library that can generate random data.

step_defintions/Submitform.java

 

Execution Output

IntelliJ Execution (how to execute is explained in previous post)

class3_intellij_output

If you executed SubmitForm.feature from eclipse plugin, then it should look similar to the below

Eclipse Execution

class3_eclipse_output

Command Line Execution

If you execute “mvn test” from command line, then the output should be similar to the below

class3_cmd_output

CI Server

class3_ci_output

class3_drill_features_ci