Excellence in Software Engineering
BLOG | Testing
Developing an End-to-End UI Test Automation Framework of a Web Application
20 September 2023

Author: Ceyda ÖZAYDIN KASA / SW Test Architect – Test Services

Today, UI test automation is one of the most popular topics encountered during test automation discussions. In order to accomplish any UI test automation task effectively, framework usage is strongly suggested. When building up a test automation framework, variety of models and tools can be used.

Now, let’s describe a test automation framework for the user interface of a web application.

  • Development environment: Eclipse IDE with Java
  • Testing tool: Selenium WebDriver
  • Design pattern: Page Object Model with Page Factory class
  • Testing framework: TestNG
  • Reporting library: Extent Reports
  • Scheduled build & run: Maven and Jenkins

Once all of these instruments are integrated, the architecture of the UI-Test Automation Framework seems as below:

Let’s explain the components of the framework.

Page Object Class:

Page Object Model, also known as POM, is a design pattern in Selenium that creates an object repository for storing all web elements. It helps improve code reusability and test case maintenance. In Page Object Model, consider each web page of an application as a class file. Each class file contains only corresponding web page elements, their locators, and the actions needed to interact with them.

Assume a simple e-Commerce web application, and here are some of these POM classes:

Web Page

Correponding Page Object Class

Home Page

User enters email and password. User clicks on “Login” button. Application navigates to “Product Catalogue” page.

LoginPage.java

Product Catalogue Page

User selects some products from the catalogue. User clicks on “Add to Basket” button.

ProductCataloguePage.java

Basket Page

When user clicks on “Basket” icon on the header, application navigates immediately  to “Basket” page. Then user clicks on “Checkout” button and application navigates to “Checkout” page.

BasketPage.java

Checkout Page

User enters payment information and clicks on “Submit Order” button. Application navigates to “Order” page.

CheckoutPage.java

Order Page

Here user can see the order history.

OrderPage.java

 

Reusable Components Class:

This class offers some common, reusable methods to be inherited by Page Object classes, i.e. to handle synchronization issues:

public void waitForElementToAppear(By findBy)

public void waitForElementToDissappear(WebElement ele)

Or to provide navigation shortcuts to some common web pages:

public BasketPage goToBasketPage()

 

Test Class:

The test class itself is totally unaware about the web element locators, but it can still interact with web elements by means of some specific methods delivered by Page Object Classes.

Now look at the method submitOrder() in Test Class 1.

//In a happy path, user simply picks some products from the catalogue and performs an order.

The method submitOrder() itself is actually a test case –because of the @Test annotation on top of it-. It obtains its input data from an another method, getData(). Finally, it belongs to the group Smoke. All of these attributes are provided by TestNG library.

 

@Test(dataProvider=”getData”, groups= {“Smoke”})

public void submitOrder(HashMap<String,String> input) throws IOException {

 

//On Login Page, user provides valid login information to sign in.

ProductCatalogue productCatalogue = loginPage.loginApplication(input.get(“email”), input.get(“password”));

 

//On Product Catalogue Page, user picks a product, of which name is delivered as test input data. Then user navigates to product basket.

productCatalogue.addProductToBasket(input.get(“product”));

BasketPage basketPage = productCatalogue.goToBasketPage();

 

//On Basket Page, user verifies whether the selected product is really added to the basket, or not. Then user navigates to checkout page.

Boolean match = basketPage.verifyItemsInCard(input.get(“product”));

Assert.assertTrue(match);

CheckoutPage checkoutPage = basketPage.goToCheckout();

 

//On Checkout Page, user enters additional information to accomplish an order.

checkoutPage.selectCountry(“TUR”);

OrderPage orderPage = checkoutPage.submitOrder();

 

//On Confirmation Page, user receives a confirmation message and checks its validity.

String confMsg = orderPage.getOrderMessage();

Assert.assertTrue(confMsg.equalsIgnoreCase(“Thank you for the order.”));

}

Keep in mind that all assertions are implemented in Test cases only.

The method getData() –with the @DataProvider annotation on top of it- has only one task: It converts the content of a .json file (Data Source) into a 2-dimensional Hashmap array and then passes it further to submitOrder(), which at the final consumes the input data (user email, user password, product name). A library called Jackson-databind is responsible to convert .json file’s content into Hashmap array in the background.

 

Base Test Class:

This class offers some common, reusable methods to be inherited by Test classes, i.e.

public WebDriver initializeDriver()

public LoginPage launchApplication()

public void tearDown()

public String getScreenshot(String testCaseName, WebDriver driver)

 

Extent Report: Once an automated test script runs, testers need to generate a test execution report. Extent Reports is an open-source reporting library which can be easily integrated with TestNG and generate reports as HTML.

TestNG: TestNG is a testing framework inspired from JUnit but introducing some new functionalities that make it more powerful and easier to use. Some of the capabilities we’ve used – in addition to annotations described above – are here:

TestNG Listeners:  They listen to i.e. every test start and end, take screenshots on test failure. As the result, they provide test result records which can be gathered and displayed by Extent Report utility. Some of the Listener methods we’ve used:

public void onTestStart(ITestResult result)

public void onTestSuccess(ITestResult result)

public void onTestFailure(ITestResult result)

public void onFinish(ITestContext context)

 

TestNG Retry Analyzer: Sometimes we come across with flaky tests, which are expected to execute successfully, but are failing in reality, because of slow network or other, not-test-relevant problems. In such a case, tests can be repeated. Retry Analyzer listens to them, and in case of a failure, repeats the test execution.

TestNG Test Runners: These are shown as TestSuite.xml files in the diagram.They can contain several test cases based of groupings such as “Smoke”, “Regression” etc. Executing a Testsuite.xml means running all relevant test cases listed in it.

Maven: Apache Maven is a software project management tool. Based on Project Object Model (POM) file, Maven can manage a project’s build, reporting and documentation. In our project’s POM file, we defined profiles for each TestSuite.xml as below. In this way, we could start TestSuite.xml execution from command line with the command:

> mvn test -PRegression

POM file includes:

<profiles>

<profile>

<id>Regression</id>

<build>

<pluginManagement>

<plugins>

<plugin>

<groupId>org.apache.maven.plugins</groupId>

<artifactId>maven-surefire-plugin</artifactId>

<version>3.0.0-M8</version>

<configuration>

<suiteXmlFiles>

<suiteXmlFile>TestSuites\TestSuite1.xml</suiteXmlFile>

</suiteXmlFiles>

</configuration>

</plugin>

</plugins>

</pluginManagement>

</build>

</profile>

</profiles>

Jenkins: Jenkins is an open-source automation tool for continuous integration. It is used to build and execute software projects continuously. In our project, we fed Jenkins with our Maven commands, and let Jenkins run these commands automatically on a scheduled basis.

So far, main components of a Selenium Webdriver based Test Automation Framework and the interaction between these components are explained. On this basis, essential test automation tasks such as executing tests and assessing test results can be performed. This infrastructure can be enhanced upon request by adding new components (class libraries, database etc.)

Past Articles

Using ChatGPT for Rest Endpoint Testing

Using ChatGPT for Rest Endpoint Testing

Today, UI test automation is one of the most popular topics encountered during test automation discussions. In order to accomplish any UI test automation task effectively, framework usage is strongly suggested. When building up a test automation framework, variety of models and tools can be used.

An Introduction to Test Automation Tools

An Introduction to Test Automation Tools

As the software testers, many of us have some familiarity with test automation tools. Some of us may have used them for a long period, some of us may have played with them a little only, or have heard about their names, without even knowing their functionality.

Test Automation

Test Automation

Software test automation has a very important place today. Over time, manual tests have started to give way to test automation to a large extent. This does not mean that manual testing is losing its importance. While some test scenarios are suitable for automation, some scenarios must be tested manually.

Navigation