Blog

Page Object Model in Cypress Tutorial with Example

by Anika Chakraborty | Dec 20, 2022 | Automation Testing, Blog | 0 comments

Designing an effective test automation framework is an integral part of automation testing. It is important that your test automation framework has no code duplication, great readability, and is easy to maintain. There are many design patterns that you can use to achieve these goals, but in our experience, we have always found Page Object Model to be the best and would recommend you follow the same. As Cypress has been gaining a lot of popularity over the years, we will be looking at how you can implement Page Object Model in Cypress. To help you understand easily, we have even used a Cypress Page Object Model example. So let’s get started.

In a Page Object Model, the page objects are always separated from the automation test scripts. Since Cypress has the ability to enable Page Object Model, the page files in POM are separated into different page objects and the test cases are written in test scripts.

How to Implement the Page Object Model in Cypress?

Being an experienced automation testing company, we have implemented Page Object Model in Cypress for various projects. Based on that experience, we have created a Cypress Page Object Model example that will make it easy for you to understand.

• Create a Pages Folder
• Add Methods & Locators
• Create a Step Definition Folder
• Import & Execute

Let’s assume that we have to automate the login process in a sample page and that we have two pages (Home Page & Login Page) to focus on.

Create a Pages Folder

The project structure is an aspect we’ll need to know for implementing Page Object Model in Cypress. So we have created a separate folder called pages under the Cypress folder to store both the Home and Login pages.

In the example above, we can see both the CodoidPortalHomePage.js and CodoidPortalLoginPage.js. Under the ‘pages’ folder we created.

Add Methods & Locators

Now that we have created separate pages, we have added all the required methods related to Codoid’s home page to CodoidPortalhomePage.js and the ones related to Codoid’s login page to CodoidPortalLoginPage.js.

To increase the reusability, we have added the locators as variables in both instances.

Home Page

export class CodoidPortalHomePage{
 
    txtBox_Search = ':nth-child(2) > .oxd-input-group > :nth-child(2) > .oxd-input'
    codoidLogo = ':nth-child(3) > .oxd-input-group > :nth-child(2) > .oxd-input'
    btnSearchIcon = '.oxd-button'
 
    enterSearchKeyword(Username){
        cy.get(this.txtBox_Search).type(Username)
    }
 
    verifyCodoidLogo(Password){
        cy.contains(this.codoidLogo)
    }
 
    clickSearchIcon(){
        cy.get(this.btnSearchIcon).click()
    }
}

Login Page

export class CodoidPortalLoginPage{
    txtBox_UserName = ':nth-child(2) > .oxd-input-group > :nth-child(2) > .oxd-input'
    txtBox_Passwords = ':nth-child(3) > .oxd-input-group > :nth-child(2) > .oxd-input'
    btnLogin = '.oxd-button'
    txtDashBoardInHomePage = '.oxd-topbar-header-breadcrumb > .oxd-text'
    txtInvalidcredentials = 'Invalid credentials'
    subTabAdmin = 'Admin'
    txtSystemUserInAdminTab = 'System Users'
    enterUserName(Username){
        cy.get(this.txtBox_UserName).type(Username)
    }
    enterPassword(Password){
        cy.get(this.txtBox_Passwords).type(Password)
    }
    clickLoginBtn(){
        cy.get(this.btnLogin).click()
    }
    verifyHomePage(){
        cy.get(this.txtDashBoardInHomePage)  
     }
     verifyAdminSection(){
        cy.contains(this.subTabAdmin).click()
     }
     verifySystemUser(){
        cy.contains(this.txtSystemUserInAdminTab)
     }
}

Create a Step Definition Folder

The next step in implementing Page Object Model in Cypress would be to create a ‘Step Definition folder. We have created it under the ‘e2e’ folder, which stores all the test cases. We have then created a test spec file by the name ‘testFile.js’ under the ‘step definitions’ folder.

Note: If you are using a Cypress version that is below 10, you’ll have to create a ‘step definitions’ folder under ‘integration’ and not under e2e.

Import & Execute

The final step in implementing the Page Object Model in Cypress would be to import the pages we have created to access its methods and execute them. So we will be creating instances of the CodoidPortalHomePage.js and CodoidPortalLoginPage.js classes and call the respective methods as shown in the code snippet below.

import {
    Given,
    When,
    Then,
  } from "@badeball/cypress-cucumber-preprocessor";

import { HomePage } from "../../pages/CodoidPortalHomePage";
import { LoginPage } from "../../pages/CodoidPortalLoginPage";

const homeage = new CodoidPortalHomePage()
const loginPage = new CodoidPortalLoginPage()


Given('User is at the login page', () => {
    cy.visit('https://opensource-demo.orangehrmlive.com/')
})

When('User enters username as {string} and password as {string}', (username, password) => {
    loginPage.enterUserName('Admin')
    loginPage.enterPassword('admin123')
})

When('User clicks on login button', () => {
    loginPage.clickLoginBtn()
})

Then('User is able to successfully login to the Website', () => {
    homeage.verifyHomePage()
})

Now that we have implemented Page object model in Cypress, it’s time to execute the test file in Cypress. So you can open Cypress by running the following command in the terminal.

npx cypress open

Once you have opened Cypress, all you have to do is run the testfile.spec.js file.

Best Practices for Page Object Model in Cypress

Assertions should not be included in page objects

When building end-to-end test scripts, aim to include only one main assertion or a set of assertions per script. Additionally, you should not place assertions in any of the functions provided by your page objects.

Identify the page object class by using a clear name

It’s important to make sure the name you choose makes it 100% clear what’s inside the page object. If there is a scenario where you are unable to pinpoint what the page object does, then it is a sign that the page object does too much. So make sure to keep your page objects focused on particular functions.

Methods in the page class should interact with the HTML pages or components

Make sure your page class has only the methods that an end user can use to interact with the web application.

Use Locators as variables

There are high chances for the “Xpath” of an element changes in the future. So if you use a locator as a variable, you can just change the Xpath of the single file, and it will be applied to all the other files that call the same “Xpath”.

Separate the Verification Steps

Ensure to separate the UI operations and flow from the verification steps to make your code clean and easy to understand.

Conclusion:

So in addition to using a Cypress Page Object Model example, we have also listed the best practices that you can use to implement the same in your project. Implementing Page Object Model in Cypress will make it very easy when you have to scale your project and make maintaining it seamless as well. Being a leading automation testing service provider, we will be publishing such insightful blogs regularly. So make sure you subscribe to our newsletter to never miss out.

Jetbrains Aqua: The Must-Know Features for Testers

by Hannah Rivera | Dec 13, 2022 | Automation Testing, Blog | 0 comments

JetBrains (formerly IntelliJ Software ) is a Czech software development company that specializes in tools for programmers and project managers. Jetbrains has developed many popular Integrated Development Environments (IDEs) such as Intellij IDEA, Pycharm, WebStorm and so on. Their IDEs support various programming languages such as Java, Groovy, Kotlin, Ruby, Python, PHP, C, Objective-C, C++, C#, F#, Go, JavaScript, and SQL. And Aqua is their newest addition to their existing lineup. It is a powerful IDE developed by keeping Test Automation in focus. It is a treat for QA and test engineering professionals in modern software development. Being a leading automation testing company, we are always on the lookout for new tools and technologies that can help us enhance our testing process. So in this blog, we will be focusing on Jetbrains Aqua and its features that make it a great IDE for testers.

There are a lot of features in Aqua that a test automation engineer needs on a daily basis, which includes

• A Multi-language IDE (with support for JVM, Python, JavaScript, and so on)
• A new, powerful web inspector for UI automation
• Built-in HTTP client for API Testing
• Database management functionality

Intelligent Coding Assistance

As with other JetBrains IDEs, Aqua checks your code on-the-fly for quality and validity. If issues are found, the IDE suggests context actions to help you resolve them. As of writing this blog, Aqua provides intelligent coding assistance for Java, Kotlin, Python, JavaScript, TypeScript, and SQL. To use the context action, click the light bulb icon (or press Alt+Enter).

In addition to that, clicking Shift twice allows you to search across classes, files, Action, and Database.

Starting a New Project

Creating a new project is so cool in Jetbrains Aqua as you can choose the build tool (Maven or Gradle), Test runner (JUnit or TestNG), JDK, and language for the project. To make it even easier for you, JetBrains Aqua even provides you with a sample script when you are creating a project for the first time.

Aqua supports JUnit, TestNG, Pytest, Jest, Mocha, and other popular frameworks for writing, running, and debugging unit tests. Code insights are also provided by Jetbrains Aqua for CSS, XPath, and many other libraries used in UI testing.

You can choose the page object pattern you want to use in the IDE and Jetbrains Aqua will use the corresponding pattern when adding the locators. Though the URL field is optional, it will be useful when identifying the locators.

Web Inspector

Now that there is an inbuilt Web Inspector in Jetbrain Aqua, you can explore the web application you want to perform automation for and collect the required page elements. Aqua provides CSS or XPath locators for the chosen elements on the webpage and aids in adding it to the source code.

The best part is that it will assign a valid name to the web elements you chose instead of assigning a random name. It is known by all that an element might have more than one unique Xpath or CSS for a web element. So the Web Inspector will fetch all the available variations as shown in the below screenshot.

If you are working with multiple sites, the web inspector has a history feature that will come in handy. You can use it to select the site you want from the drop-down in the search bar as shown below.

HTTP Client

Every web service will send and receive numerous HTTP requests. As Jetbrain Aqua has an inbuilt HTTP client, you will be able to create and edit the requests. So you will be able to perform API tests where you can use commands such as get, post, put, etc in the IDE to check the response body and response code.

In the above image, we have used the GET command and got 200 as the response code.

Database Management

If you have been performing automated data analytics testing, you’ll definitely love this new feature in Jetbrain Aqua. Using Aqua, you’ll be able to handle multiple databases, develop SQL scripts, and perform data assertions to a certain extent right from the IDE. So you’ll be able to connect to live databases, run & validate the required queries, export the data, and manage the schemes with the help of a visual interface. Some of the well-known databases that you can access are Oracle, SQL Server, PostgreSQL, MySQL, and so on.

If you take a look at the above image, we have connected to an SQL server and used the Select command to extract the required details.

Conclusion

Even if you have existing projects in Maven, Eclipse, and Gradle, you can import those projects to Jetbrains Aqua and make use of all these new features. As one of the leading automation testing companies in the industry, we are excited to use Jetbrains Aqua in our projects. Hopefully, we have explained the features of Jetbrains Aqua in a way that has encouraged you to use it as well. Subscribe to our newsletter to stay updated with all the latest test automation tools, methods, and so on.

Cypress vs Selenium. Should you Switch?

by Arthur Williams | Dec 6, 2022 | Automation Testing, Blog | 0 comments

Selenium is a popular open-source test automation tool that has been in the software industry for nearly 2 decades. It has been the go-to tool for testers when it comes to web automation. Even we have been using Selenium to deliver exceptional automation testing services to our clients all these years. But we are always focused on using the best tools, and so when Cypress started to gain a lot of popularity in recent years, we keenly looked into it and now have a clear understanding of both these tools. So in this blog, we will be pitting Cypress vs Selenium to help you choose the right tool for your needs with our analysis.

Selenium:

By now almost everyone in software testing would be aware of Selenium. But if in case you are new, you might need an introduction. Selenium is an open-source automation testing framework for web applications that was initially released in 2004. Selenium 4 is the most recent and stable version of Selenium.

Cypress:

Despite being used for the same purpose as Selenium, Cypress does differ architecturally from Selenium. It uses a DOM manipulation technique to directly interact with the web browsers without needing specific browser drivers in Selenium. Since it uses JavaScript for its automation test scripts, it is popular with developers.

Cypress vs Selenium: Points that Matter

No single tool can cater to the wide range of needs of different people. That is why it is important to opt for the tool that is the most suitable for your particular needs. In addition to that, choosing the right automation framework plays an integral part in your automation testing’s success. So before we head to the Cypress vs Selenium comparison table, let’s first learn what are the main aspects to look into when choosing between Cypress and Selenium or any other automation tool for that matter.

• Testing
• Language support
• Cross-Browser Testing
• Performance
• In-Built Features
• Ease of Use
• Community & Support

Testing

The first and foremost factor is the type of automation tests you are looking to execute or in need of for your project. When it comes to Cypress vs Selenium, they do support a wide range of tests. Cypress in specific supports API testing, whereas Selenium doesn’t support it. Cypress is also great for unit testing as developers are more comfortable with it when compared to Selenium. Both options are equally good when it comes to performing end-to-end testing.

Language support

Apart from the testing capabilities of the tool, another pivotal aspect to consider is the programming languages it supports. Though it is preferable to pick one that supports multiple languages, make sure the language you want to use is supported. You should consider the programming language used in the project in general and also your available talent pool when making this decision. When it comes to Cypress vs Selenium, Selenium supports more number of languages in comparison.

Cross-Browser Testing

Being web-based automation testing tools, testing across different browsers would be a crucial part. As of writing this blog, Cypress doesn’t support automating tests on Safari and Internet Explorer. Though IE has been discontinued, you might be in a position to test a legacy application that depends on IE. So Selenium would be the way to go if cross-browser testing is a priority.

Performance

Apart from execution speed, the number of tests that can be in parallel is also a crucial factor when comparing Cypress vs Selenium. Selenium with the help of Selenium Grid is the clear winner here as it eases cross-browser testing across platforms. Whereas Cypress doesn’t provide the option of running more than one browser at a time.

In-Built Features

• User-friendly features such as the automatic scrolling option that ensures an object or element is in the viewport before actions such as clicks are executed.
• There is also no need for the tester to use explicit/implicit wait commands like in Selenium.
• There are also options to control the behavior of server responses, timers, and functions using stubs, clocks, and spies.
• The Test Runner in Cypress makes it possible for testers to go through every step before and after screenshots making it easy to debug.
• Cypress is also packed with reliable and ready-to-use frameworks. Whereas you’ll have to build everything from scratch when it comes to Selenium.
• Flaky tests are also reduced thanks to the retry capability of actions performed over elements.

Ease of Use

So when pitting Cypress vs Selenium, the previous points we saw were the major dealbreakers. If you have what you are looking for in both these options, then you can consider how easy or usable the tool is for your usage. As discussed earlier, developers would lean towards Cypress as it is great for Unit testing. It also has a relatively easier installation & setup process.

Community & Support

Selenium has been around for a long time and so it naturally has an edge when it comes to community support with code samples, and so on. But Cypress also has a rapidly growing community and really effective documentation.

Cypress vs Selenium: Key Highlights

Why Choose Selenium?

• If you or your team aren’t familiar with JavaScript, then Selenium is the choice for you.
• Cross-browser testing is a strong suit of Selenium, and if that is a priority; opt for Selenium.
• Automation scripts can be run in parallel or simultaneously by Selenium.
• Selenium is useful in DevOps and continuous integration because it can be easily integrated with Jenkins, Maven, and other tools.
• Selenium makes it possible to perform headless browser testing.
• Selenium has a record and play [IDE] that simplifies the automation testing process. There is even an option to export this recording script in your preferred language.

Why Choose Cypress?

• Cypress can test all modern applications including Angular, React Vue JavaScript.
• If you need to perform API testing, Cypress is the only choice.
• Cypress would be better for developers as it is great for performing Unit testing.
• People who are strong in JavaScript would love Cypress as it has great debugging capabilities.
• Cypress is generally considered to be more reliable and fast as it works on real browsers, unlike other tools which simulate the browsers.
• Cypress’s in-built reporting is better than Selenium. But you can overcome this issue by integrating Selenium with TestNG or Cucumber.

Conclusion:

We hope our Cypress vs Selenium blog has laid out all the important points you’ll need to consider when choosing between these tools. As we saw in our blog, both these tools are great in their own ways. So make sure to pick the tool that fits your needs. Being an experienced automation testing service provider, we choose the tool for our project on the same basis. Make sure to subscribe to our newsletter as we will be publishing more insightful content on a regular basis.

A Conclusive Rapise Automation Tool Tutorial

by Arthur Williams | Oct 18, 2022 | Automation Testing, Blog | 0 comments

Test automation is a very crucial part of software testing as it enables the testers to automate repetitive tasks and use the saved-up time to unearth hard-to-find bugs with exploratory testing and other methods. This is what we as a leading automation testing company do to enhance overall quality. But achieving truly reliable automated testing that requires no supervision is no easy task and might even seem impossible to many. That is where tools such as Rapise come into the picture as they simplify the process of automating your tests. So in this Rapise Automation Tool Tutorial, we will be sharing with you how you can use the tool to test your web and desktop applications.

An Introduction to Rapise

Rapise is one of the many products available from Inflectra that is used for record and play automation testing. Rapise uses its very own Rapise Visual Language to create a spreadsheet-based editor that allows users to easily see what actions have been recorded for automation. But the biggest benefit of using the Rapise Visual Language is that it makes editing the tests extremely easy. Of the various record and play automation testing tools we have used, we found Rapise to be very capable. So let’s find out how you can use this tool in our Rapise Automation tool tutorial.

Rapise Automation Tool Tutorial

If you have not yet downloaded the Rapise Automation Testing tool, you can download it by visiting the Inflectra website and download the tool by creating an account. Once you have downloaded and installed Rapise, your first step would be to click on File -> Create New Test button to open the required dialog box.

You will now be able to name your test and define the type of application you need to test in the Create New Test pop-up window. As mentioned earlier, Rapise can be used to test Desktop, Web, and Mobile apps. So this one step will be common for all apps, and from this point onwards, the steps will vary based on your choice. But in order to get a general understanding of how everything works, let’s see how to automate web testing and use that as a base to understand how to automate other apps as well.

Web Automation Testing with Rapise

Once you have opted for Web-based Automation, you’ll have to specify the web profile that you wish to test with. In this Rapise Automation Tool Tutorial, we have used the Selenium Chrome combination. But there are other browser options available such as Firefox, Internet Explorer and Edge. If you’re looking to test on different browsers such as Safari or Opera, Rapise does provide a set of Selenium WebDriver libraries that you can use.

Once you have chosen the type of application you want to automate, you will be asked to choose between two scripting languages RVL (Rapise Visual Language) and JavaScript. RVL is the most convenient way to automate your tests and gets most of the job done as well. So we have chosen RVL for this Rapise Automation Tool Tutorial. But if you are in need of any advanced features for specific requirements, you can opt for JavaScript and utilize that.

Once you have chosen the language of your choice, the main window that you can you use to automate your tests will appear.

Since there is a record and play feature, all you have to do is

• Hit the Record button.
• Provide the URL of the website you want to test.
• Perform the actions you want to be automated.
• Hit the Play button for the same actions to be executed in a new browser window.

Recording the Test

Let’s walk you through these simple steps with the help of an example in our Rapise Automation Tool Tutorial. Let’s say we want to open our website and want to navigate to the About Us page and the Our Products page. So we will click on the Record button and enter our Home Page URL.

The specified URL will be loaded in a Chrome browser window. It will also be accompanied by the Recording Activity window that you can use to Pause, Finish, or even Cancel the recording. Once you have performed all the actions you wanted to record, you can go ahead and press the Finish button to stop the recording.

Executing the Tests

Now the performed actions will be updated in the main window in the Rapise language as shown below. The Type column will always be mentioned as action and in the two adjacent columns, we can see what action is being performed on what object.
Since clicks do not require any parameters, the other 3 columns are empty. But when we look at the action of opening the home page, the parameter information such as the name, type, and value is stored. Next up in our Rapise Automation Tool Tutorial, we’ll be looking at the other available features before we execute our test.

You can use the Debugger option to see a preview of how the test will be automated before you execute it. If you feel like you have to make any changes to the recording, you can do so easily. Let’s say you don’t want to navigate to the Our Products tab as mentioned, you can just select the row and delete it instead of rerecording the entire video.

Now that everything is ready the way you want it to be, you can just click the Play button to execute the test. Once the execution is done, the results will be loaded in the main window and you can view if all the tests have passed or failed.

Advantages:

1. Recording your tests in one browser is enough for cross-browser testing as Rapise will be able to use the same recording for the other browsers as well.

2. Easy to edit your existing recording without having to rerecord them.

Desktop App Automation with Rapise

There is not much of a difference between automating a web app or a desktop app except for a small variation. In order to not make our Rapise Automation Tool Tutorial redundant, we will be seeing only a quick walkthrough and mention the changes from Web App automation. The only major change is that you will not have to choose the browser that you want to test with and that step will be skipped. Instead, you’ll have to choose the desktop application you want to automate after clicking the Record button once the Main window appears.

The steps will be the same as what we saw for automated web testing. We have chosen Notepad as an example in this Rapise Automation Tool Tutorial. Once notepad opened, we maximized the screen and typed a sample text (Codoid Desktop Automation Rapise) for which we got the following data in your Main window.

You can perform the same actions we saw before such as debugging, executing the test cases, and finally viewing the report in the dashboard.

Conclusion

By now it would be evident that Rapise is truly an effective tool when it comes to automating your tests with the least effort. And we hope this Rapise Automation tool tutorial has helped you understand how to use the tool effectively. Being a pioneer in the software testing field, we will be updating such informative content on a regular basis. So make sure to subscribe to our newsletter to keep up with our latest content.