TestCafe Implementation in DANA- Part 1 : Page Object Model
In this era, many web testing tools have been developed to help testers automate web pages. However, some of these tools might have problems if they are run on an older browser version. But thanks to Julian M Bucknall who have developed TestCafe to support running tests on older browser versions.
TestCafe — was created by DevExpress is a node.js tool to automate end-to-end web testing on cross platform and cross browser. TestCafe is free and open source test framework. It can be written in latest JavaScript or TypeScript.
TestCafe Implementation without POM
In TestCafe, we create a test case file inside the test folder. This folder is used when we run the TestCafe. Let’s see inside one of the test case file. For example, we test on game at dana.id webpage.
Based on the picture above, you can see there are 3 test cases on game page — “Open Game Page”, “Search Valid Game Name”, and “Search Invalid Game Name”. You can see that each test case uses the same data on red and green box. The data are title_game, search_box, and game_placeholder. They use the same function of click title and type text too.
Imagine that you have to make 20 test cases on that page using the same data and functions, and then there is a change in one of the data. Yes, it consumes more time to change all of the scripts and it’s difficult to maintain.
A good approach to handling data duplication and script maintenance is to input that data and functions into one separate file. If you need the data, you only need to call that file. Then ,what if there is a change on that data? The simple answer is you only need to change 1 file.
That approach is known as Page Object Model (POM). POM is a design pattern that popularly used in automation test for improving test maintenance and reducing code duplication. POM is suitable for very large test suite or application which have a lot of tests. In POM we build a page from components so it is more reusable and helps make the code more readable.
So let’s start to implement POM using TestCafe and find out what we did in DANA!
DANA POM architecture using TestCafe
In our way to build automated code in TestCafe, we use 2 big sections namely Test and Page Objects.
- Test section is a collection of test files or the pages that you want to test. That test file, for example pageA.test.js, contains of some test cases — known as test suite.
- Page Objects section consists of 2 parts namely components and pages. This section is a collection of data (elements, function, variable) that are used in test file. Components section consists of main data. Meanwhile Pages section consists of data that only exists on that page.
How to implement that?
First things first you have to separate which data will be used on each page and which data will be used only on certain pages. For Example in DANA website from picture above (Search Game Name without POM) for main data we use such as validGameName, invalidGameName, or any data that can be used as a variable.
Next step is we create the page objects file. In the page objects file, you can create 2 files namely components and pages.
Based on the picture above, in DANA we create MainData.js as components. Inside this file we input validGameName and invalidGameName as main data.
After we create the data components, we go to create the page components inside the pages file. This page component file consists of data on that file. For example we create GamePage.js.
Inside the GamePage.js file, we should create the constructor. Constructor is a part that stores all the elements or in TestCafe we call it selectors on that page. Based on the picture above, the constructor contains title of the page, search box and game placeholder. Beside selectors, we can create some functions. For example we create searchValidGame function with 1 parameter, validGameName. This function is used to search game with valid name.
After we create components and pages, now we can create the test case file inside the tests folder. In this case, we create game.test.js as a test page.
We can add the page objects file by adding the import function and creating objects. In this file, we only need to call the function that was created in the GamePage.js file. After that we can add the expected conditions of the function. Last step is you can run your test case use this command npm run test:chrome .
Summary
Creating a Page Object Model is very helpful to tester because it’s suitable for use in application that have many tests cases. So if there is an update, tester only need to change it on the page objects file not in the test case file.
And that’s all for this article. If you would like to learn more about TestCafe, don’t hesitate to visit this link. Happy trying and happy learning fellas! 😊
Sources:
- TestCafe Documentation
https://devexpress.github.io/testcafe/documentation/getting-started/ - Github Repo
https://github.com/magdalenavenli/dana-testcafe.git
