The aim here is to create a Page Object for the Age Calculator application. Consider the Age Calculator application. The Age Calculator is a single-page application that takes the user's date of birth and calculates their age and zodiac sign:
<html lang="en">
<head>
<title>Lesson 6 - Age Calculator</title>
</head>
<body class="bg-light">
<div class="container">
<div class="py-5 text-center">
<h2>Lesson 6 - Age Calculator</h2>
</div>
<div class="row">
<div class="col-md-4 order-md-2 mb-4">
<h4 class="d-flex justify-content-between align-
items-center mb-3">
<span class="text-muted">Your data</span>
</h4>
<ul class="list-group mb-3">
<li class="list-group-item d-flex justify-
content-between lh-condensed">
<div>
<h6 class="my-0">Age</h6>
</div>
<span class="text-muted" id="age"></span>
</li>
<li class="list-group-item d-flex justify-content-
between lh-condensed">
<div>
<h6 class="my-0">Zodiac Sign</h6>
</div>
<span class="text-muted"
id="zodiacSign"></span>
</li>
</ul>
</div>
<div class="col-md-8 order-md-1">
<h4 class="mb-3">Enter your information</h4>
<form>
<div class="row">
//[…]
For the complete code, visit https://bit.ly/2NVcpGu.
The steps of achieving our aim are as follows:
- Review and analyze the DOM of the https://trainingbypackt.github.io/Beginning-Selenium/lesson_6/exercise_6_1.html file.
- Create a Page Object that recreates the WebElements of the Age Calculator application. Follow the best practices while naming classes, elements, and methods, and make sure to include the following:
- The name of the package
- The libraries required for the Page Object to work
- A class constructor method
Firstly, import all the packages:
package com.beginningselenium.examples.pageobjects;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
- Include all of the WebElements of the web page that you might have to use in the automation script:
public class AgeCalculatorPage {
//WebElements
private WebElement dayOfBirth;
private WebElement monthOfBirth;
private WebElement yearOfBirth;
private WebElement age;
private WebElement zodiacSign;
private WebElement calculate;
- Create the class constructor, ensuring that you include all of the WebElements that have to be initialized:
///WebDriver
private WebDriver driver;
private String url = "https://trainingbypackt.
github.io/Beginning-Selenium/lesson_6/exercise_6_1.
html";
//Class Constructor
public AgeCalculatorPage(WebDriver webDriver) {
driver = webDriver;
}
- Include methods to read the values of the required elements:
//Methods to read values from required WebElements
public String getAge() {
age = driver.findElement(By.id("age"));
return age.getText();
}
public String getZodiacSign() {
zodiacSign = driver.findElement(By.
id("zodiacSign"));
return zodiacSign.getText();
}
public WebElement getDayOfBirth() {
dayOfBirth = driver.findElement(By.
id("dayOfBirth"));
return dayOfBirth;
}
public WebElement getMonthOfBirth() {
monthOfBirth = driver.findElement(By.
id("monthOfBirth"));
return monthOfBirth;
}
public WebElement getYearOfBirth() {
yearOfBirth = driver.findElement(By.
id("yearOfBirth"));
return yearOfBirth;
}
public WebElement getCalculate() {
calculate = driver.findElement(By.
id("calculate"));
return calculate;
}
- Create a method that opens and closes the WebDriver, and a method that recreates clicking on the Calculate button:
//Methods to open and close the WebDriver
public void open() {
this.driver.get(url);
}
public void close() {
this.driver.quit();
}
//Method to execute the test
public void calculate(String day, String month,
String year) {
getDayOfBirth().sendKeys(day);
getMonthOfBirth().sendKeys(month);
getYearOfBirth().sendKeys(year);
getCalculate().click();
}
- Compile the class.