QATestBlog

QA Tester Beginner Series: A beginners guide to JavaScript Automation with Cypress (PART IV)- Page Object Design Pattern and Dashboard Services

Theodore Gerrad's photo
Theodore Gerrad
·

7 min read

POM is a design pattern where Page objects and their locators are separated from test automation scripts.

POM = Test-Cases(TC) + Page Object Classes(POC)

This allows for easy re-usability and maintainability of tests.

Just like with custom-commands, POM solves the problem of redundancy except in this case, we are concerned about the redundancy of page objects. Also in terms of maintainability, POM allows us to easily make changes to page objects whenever they undergo a change.

To accomplish this, we shall create separate classes for our application pages with each class containing locator elements from their respective application pages. While the test-cases will contain only the code or logic which will use the class locator elements.

Implementation

We'll be using the After assessing our AUT we proceed with the following

1) In the "integration" sub-folder, create a folder called "PageObjects".

2) In the PageObjects folder, create a file called "LoginPage.js".

On the LoginPage.js file, we create a LoginPage class using "class LoginPage{}" Within the LoginPage class, we need to create methods that will perform certain operations such as locating and performing actions on certain elements of the Page-object class. Our first method which we will call nav() will visit the url of our AUT.

                           nav()
                           {
                           cy.visit("page url")
                           }

If successful, this will launch the url

Since our aim is to login using an input-field, our next method should enter the test data into the locator element for that field. To make this action more dynamic and sophisticated, we will be entering the test data as a parameter instead of hard-coding the value. We shall then save the locator element in a JavaScript variable. We then write a command to type in the test data but again since we want this done dynamically, we enter the "value" parameter from before. In JavaScript, we use the "return this" to return the 

                       enterEmail(value)
                       {
                       const textfield = cy.get([cssSelector]).clear()
                       //textfield.clear()
                       textfield.type(value)
                       return this
                       }

After that we shall create another action method to enter test data into the locator element for the password field. 

                       enterPassword(value)
                       {
                       const passwordfield = cy.get([cssSelector]).clear()
                       //passwordfield.clear()
                       passwordfield.type(value)
                       return this
                       }

Finally we shall create another action method to click the login button. 

                    clickButton()
                    {
                    const submitbutton = cy.get([cssSelector])
                    submitbutton.click()
                     }

Because we need the elements in this LoginPage class to be available to all of our test-cases, we need to use an export command using 

                     export default "className"

This line of code should be written outside of the closing braces of the class.

Next, we shall create a "PageObjectPatternDemo.js" file which will contain our test code and call/use the action methods we created in the "LoginPage.js" file. Before we can use those methods, we must first import the "LoginPage.js" page using "import LoginPage" and specifiying the location it is to be imported from in single quotation. One "./" represents your current location in the directory. Adding another "." will take u back one sub-directory within the "integration" sub-directory where you should find the "PageObjects" sub-directory you created containing your "LoginPage.js" file. Therefore, we have

         "import LoginPage from '..PageObjects/LoginPage'"


         import LoginPage from '..PageObjects/LoginPage'

         describe('TestSuiteName', function() {
                         it('Valid Login Test', function() {
                          const lp = new LoginPage()
                          lp.nav()
                          lp.enterEmail('actualemailparametervalue')
                          lp.enterEmail('actualpasswordparametervalue')
                          lp.clickButton()
                          cy.title().should('be.equal', 'page title')

                          })
                          })

Within the "it" block, we need to create an instance of the LoginPage object using the "new" keyword that will be stored in a variable. This will allow us to reference all the methods created within this object using the variable it is stored in. For the methods that require a value to be entered as a parameter, you are required to enter those values in single quotes. Since this is still an actual test-case, we can also provide some form of validation as a best-practice

We can repeat the above for all of the other pages and tests we wish to carry out but again as we can see, our code is a lot more efficient.

Dashboard Services and the Cypress Command Line

How to run Cypress from the Command Line

1) Capture the location of your Cypress working directory.

2) Open a cmd window and change directory to that of your working directory by using the command "cd PATHTOYOURCYPRESSDIRECTORY".

3) Run cypress by typing the command "node_modules/.bin/cypress run" and hitting "ENTER". This command will run all the tests in the available ".spec" files which will take some time.

4) If you want to run a specific ".spec" file, you need to use the command from above with a minor alteration as shown below: node_modules/.bin/cypress run --spec "LOCATIONOFYOURSPECFILE" and execute by pressing "ENTER" e.g node_modules/.bin/cypress run --spec "cypress\integration\examples\TC1.js".

Cypress Dashboard Services

Cypress supports a dashbord feature which is basically a cloud-based service coupled with github repository. You can access this via a github account or a google account. What this allows you to do is configure your project by connecting to the dashboard service by using a github account. When you run your test-cases inside the dashboard, you can view not only the results but screenshots and video recordings as well all saved on the dashboard.

Implementation

1) Start the cypress test runner window using: "node_modules/.bin/cypress open".

2) Click on the "Runs" tab.

3) Click "Set up a project to record" to set-up a project in a github repository. NOTE: After the project is set up, you shall be given a "Project ID" as well as a "Key Value".

4) After clicking on "Set up a project to record", click on "Log in to Dashboard". This should connect you to the dashboard login page. To login to the dashboard login page, you can use a github account or a Google account like we mentioned earlier. If you choose to use your github account, click on that option, and it will ask you to authorize cypress by clicking on "Authorize cypress.io", after which you will be successfully logged into Cypress. Your Test Runner window should verify that your Login was successful.

5) Decide whether or not you want your project to be private or public. After you decide, click on "set up project".

6) You should automatically get a project ID and a "command" containing a "key" which you can use to run your tests locally and the results will be seen in the dashboard. Also this command can be used in a Continuous Integration (CI) environment. The "Project ID" should be automatically added to your "cypress.json" file but before you can use the command in cmd, you must first use the run cypress in the cypress working directory from the node module using: "node_modules/.bin/cypress run" followed by a space and then the "command" itself. When you execute this by pressing "ENTER", all of your ".spec" test files should run. After execution, you should be able to view the outcomes on your dashboard by navigating to the cypress Test Runner window and clicking on the "Runs" tab.

7) When the runs tab is completely refreshed, click on the pop-up item that indicates the most recent test run, this will again require you to login via your github or google account to view your dashboard.

8) After you're successfully logged in, you can now view your dashboard area containing the results of tests you just ran. ".spec" files colored in red are failed tests and those in green are passed tests. As well as the time taken for execution. Clicking on the "output" of a test on the far right of the dashboard, it should give you a log where you can see why the test failed. Failed tests also have a screenshot taken of them, passed tests do not. Video recordings are made whether or not the tests pass or fail.

That will do it for part four of our Cypress series. If you found this post helpful, feel free to share it with others like you or leave a comment telling what other topics you would like to see covered in this series. I've got a couple of ideas that I'm working on right now but it'll also be nice to hear from you as well; you can do that by reaching out to me on twitter @4EVER1CONIC. As always, take care, remain patient, stay grateful and keep coding.

JavaScriptDesignautomationWeb Development