Java / Selenium – Gui/Web Mapping

Sooner or later you need to map the data into web elements. Typically you are dealing with web forms where you have to enter a set of data. In most cases the input fields have a pattern, e.g.

<input type="text" name="customerCode">
<input type="text" name="customerName">
<input type="text" name="customerAddress">

In this particular case all the input fields have the attribute ‘name’.  First thing to do is to create a domain class/model, which represent the dataset, something like below:

**
 * Created by TripleQA
 */
public class Customer {
    private String code;
    private String name;
    private String address;

    public String getCode() {
        return code;
    }

    public void setCode(String code) {
        this.code = code;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getAddress() {
        return address;
    }

    public void setAddress(String address) {
        this.address = address;
    }

}

Let’s create class which represent the webform page.

package com.tripleqa.testsuite.test;

import org.openqa.selenium.By;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;

import java.util.HashMap;
import java.util.Map;

/**
 * Created by TripleQA
 */
public class AddCustomerPage extends BasePage {

    private static final int WAIT_PROCESS_MS = 10;

    public AddCustomerPage addCustomer(Customer customer){

        WebElement inputFormElement;

        clearElements();

        for (Map.Entry<String, String> entry : getWebMapping(customer).entrySet()) {
            String elementName = entry.getKey();
            String elementValue = entry.getValue();

            if(elementValue != null){
                inputFormElement  = chromeDriver.findElement(By.name(elementName));
                inputFormElement.sendKeys(String.valueOf(elementValue));
            }

        }

        WebElement addCustomerButton = chromeDriver.findElementByXPath("//button[contains(.,'Add')]");
        WebDriverWait wait = new WebDriverWait(chromeDriver, WAIT_PROCESS_MS);
        wait.until(ExpectedConditions.elementToBeClickable(addCustomerButton));

        addCustomerButton.click();

        return this;

    }


    public void clearElements(){
        String elements[] = {"customerCode","customerName","customerAddress"};
        for(String element : elements){
            chromeDriver.findElement(By.name(element)).clear();
        }

    }

    public Map<String,String> getWebMapping(Customer customer){
        Map<String,String> webMapping = new HashMap<String,String>();

        webMapping.put("customerCode",String.valueOf(customer.getCode()));
        webMapping.put("customerName",customer.getName());
        webMapping.put("customerAddress",customer.getAddress());

        return webMapping;
    }

}

As you can see there is a web/gui Mapping method which holds the input type web element name and the represented customer value. The customer object will be injected by the test scenario/code, which will be discussed later on. The method addCustomer loops through the Map and enters the customer value in the right input fields. The other way of doing is, is to use the if-else statement for every web element, which is not really neat and clear code. Furthermore it will be hard to maintain. Let’s assume another field will be added then you only have to update webmapping (that’s the win situation).

Now you can create test scenarios for the web page by using the above PageClass. See example below:

import org.testng.annotations.BeforeClass;
import org.testng.annotations.Test;

/**
 * Created by TripleQA
 */
public class CustomerTest {

    AddCustomerPage addCustomerPage;

    @BeforeClass
    public void init(){
        addCustomerPage = new AddCustomerPage();
    }

    @Test
    public void addNewCustomerTest(){
        Customer newCustomer = new Customer();
        newCustomer.setCode("1");
        newCustomer.setName("Johan");
        newCustomer.setAddress("Haarlem 4545X Holland");

        addCustomerPage.addCustomer(newCustomer);

    }

}

Hopefully this gives you new thoughts of how to deal with GUI web elements and the associated selenium driver. Your feedback is valuable, do please comment 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s