Automating user interface testing is an important part of quality assurance, but it can be very difficult and time-consuming to do. This blog will help you to write GUI tests for any component/functionality. Basically, we’re using Selenide (uses Selenium Webdriver under the hood), TestNG using POM (Page Object Model).
In a nutshell, POM is one of the many ways to write UI tests. In POM, different pages of the application are defined in different classes and all the locators/elements present on that specific page are defined at a single place (inside their respective page classes). The biggest advantage of using POM is highly maintainable test cases (because each locator is only defined once) which in turn help with scalability.
Table of Contents
Understanding Folder Structure
Inside the src/test/java, the folder is similar to the given screenshot:
- models package contains model classes like User. Basically anything that is used by testcases to encapsulate data.
- pages package contains classes for each page/component of the application. For example – a different class for dashboards, loginpage, license, modals, users, etc.
- shareddata package as the name suggests contains any data to be shared. For example, it contains default login URL, list of users, etc.
- testcases package contains the essence of the tests i.e. the test cases using TestNG syntax.
Writing our First Test
I guess the easiest way to document this would be to write a test case together. So let’s say we want to test the login functionality on the new GUI version.
- Create a new page class inside the pages package. Now since we’re testing the login page of our web app, we can name the class LoginPage.
2. Now this class should have all the locators for HTML DOM elements that we want to interact with. For example, the LoginPage class should have locators for the username and password field as shown below:
Here we’re using the “name” attribute of the HTML input elements to locate them on the login page.To understand the syntax above, please refer to Selenide Page Objects documentation (links given in the first section).
3. Let’s create another class for the DashboardPage because it’ll be required for this test. So, create a new Java class under the pages package and name it DashboardPage. For now, let’s only include one locator from the dashboard i.e. the dashboard title element. Here we’ve used the id of the HTML DOM element to locate it.
And also create a better method to provide access to this title element as shown below
4. Now let’s come back to the LoginPage class and create a method for successful login as shown below:
Let’s try to understand this method, it has two parameters for username and password. It fills the username and password in the respective elements that we defined in the Step2 and presses enter after filling the password. Then it returns a page object of DashboardPage. (This is Selenide syntax which uses Selenium Webdriver under the hood, please refer to the Selenide Documentation for more information).
One important concept to understand POM is the flow of the application and it’s pages. Whenever a user logs in successfully they’re taken from the login page to the dashboard page, that is why upon a successful login the method returns a Page Object of DashboardPage class.
5. Now our LoginPage class is setup, and let’s create our first test. Create a new TestNG class inside testcases package. You can call it PAGENAMETEST depending on the test case you’re developing.
Once the class is created as a TestNG class, let’s write our first test as shown below:
Here the @Test is a TestNG decorator that declares a method as a test. In the regularLogin() method, we’re using the open(url, pageObjectClass) method from Selenide to open a web browser using the given URL and return a LoginPage object.
In the next line, we’re using the loginPage to call the regularLogin(String username, String password) method defined in the LoginPage class. The regularLogin(String username, String password) method returns a dashboardPage object, so store it in a variable of the same type.
In the third line, we’re getting the title element of from the dashboard page and then asserting that it’s text should be “Welcome Dashboard“ i.e. the current default dashboard.
6. Now you can run a particular test by clicking on the Run | Debug button under @Test decorator to run a specific test or click on Run All above the TestNG class. The results are shown on the console as well on a separate tab
Different types of selectors available within Selenide are mentioned on their official documentation, a glimpse of the section is given below
Selenide provides the additional features needed to make the Selenium Web Driver a full-fledged testing tool instead of just a web interface driver. Convenient methods and the Page Object Model make the tests more maintainable and easier to develop. If you are looking for a UI testing solution, this could be the solution for you.
With the above steps, you should be able to set up a basic UI automated test for your program, and maybe build a better and more comprehensive version than me. Selenide + TestNG + POM together is a highly manageable, modular, and object-oriented design that makes the lives of the test developers easier and saves a lot of time in the long run. Give it a try and share your success with us.
The Indellient Difference
Indellient provides IT Services with expertise in Cloud Services, Application Development, Data & Analytics Solutions, DevOps Services and Training, and Cloud Managed Services. Contact our team for a no-obligation conversation on planning, executing, and maintaining your technical projects.
Blue Relay is a Document Process Automation Tool by Indellient that can help your company adjust to working remotely and remain HIPAA Compliant. Blue Relay helps with Workflow Automation, Team Collaboration, and Document Review and Approval Get your company back on track while remaining compliant.