How to automate a simple form testing using Cypress?

Aarthi Oct 01, 2020 #QA Automation, #Cypress Automation, #End to End Testing

Cypress is a JavaScript-based front end testing tool built for the latest web automation testing. Cypress is All-in-one testing framework, more developer-friendly tool that uses a unique DOM manipulation technique and operates directly in the browser. The architectural design of Cypress helps testers to perform Test-Driven Development (TDD) with complete end-to-end testing. With this, the development and testing can be a parallel process to deliver the web application on time.

Cypress is built on top of Mocha which makes it as a full featured testing framework. It is used to perform end-to-end testing, integration testing and unit testing. Cypress works well with modern web applications with cross browser testing as most of the applications is built using JavaScript frameworks.

Cypress is different from other testing tools with its advanced features:

Supports Chrome, Edge & Firefox browser.
Ability to take snapshots as tests run.
Ability to hover over commands in the command log to see exactly what happened at each step.
Automatic waiting with no explicit or implicit wait commands in test scripts, unlike Selenium. Cypress waits automatically for commands and assertions.
Automatic scrolling operation to ensure the element is in view before performing any action.
Automatic reloads whenever the test script updated.
Automatic screenshots to analyze failed test scenarios later.
Videos of the entire test suite when run from the Command line interface (CLI).

This post is ideally for a tester who is just exploring Cypress tool to learn the benefits of Cypress, move from manual to automation testing and become an automation tester for web applications.

We are taking a simple use case scenario of automating any website’s contact us form testing using Cypress. This simple testing will help us to appreciate the all-in-one testing tool with no need to install or implement multiple tools or libraries for taking screenshots, spy the elements, debugging and more.

Creating Cypress automation test includes following steps:

i. Install Visual Studio Code from here
ii. Install Node.js from here
iii. Install Cypress from here
iv. Check the Cypress folder structure in Visual Studio Code
v. Write Test Script for the contact us form
vi. Run Script

1. Install Visual Studio code

Please follow the steps from here.

2. Install Node.js

Please follow the steps from here.

3. Install Cypress

i. Create an empty folder in workspace under your “Documents” folder. Type “cmd” from that location to navigate into “Command Prompt”.
ii. Next, we need to create the structure of the Package.json. Go to “Command Prompt”, type >npm init, enter details of description, keyword and author. Package.json is created successfully.
iii. Install Cypress using command prompt then type > npm install cypress.

Once the installation gets completed, check the visual studio code for the successful installation. The folder structure of cypress is created as shown below.

4. Check the Cypress folder structure in Visual Studio Code

The structure contains the following sub folders.

i. Fixtures -This is used for saving the external static data that can be used in the test files.
ii. Integration - This is the folder where we write all test cases
iii. Plugins- This is for all plugins to use in Cypress.
iv. Screenshots-This is to store all screenshots. We can use cy.screenshot() command to take a screenshot manually and store it here if required.
v. Support- It contains all the reusable behavior of the custom commands.
vi. Videos- Cypress records a video for each spec file when running tests during Cypress run.Videos are not automatically recorded during cypress open.

5. Write Test Script for the contact us form

i. Create a file called “ContactusForm.js” in the cypress/integration folder and add the following code to open a contact us form of the given website url with form fields and sample test data.
ii. We have taken a simple form from our website Vconnexservices.com/contact us page where it accepts a name, email, subject, phone number and message box and sends an email to our company email.
iii. For a simple testing, we have given a sample data in the code itself. This data can be modified as needed once the basic script is working well.

6. Run Script

i. Open a new Terminal or use keyboard shortcut ctrl+~
ii. Type “npm run cypress” command in terminal in Visual Studio Code.

After opening Cypress, click the script file “ContactUsForm.js” to run and check the output video.

Check the screenshot of Cypress running the script that we created. It gives the option to check the element while running.

Cypress is simple and easy to configure. Now, we can see how simple it is to do an automation testing using tools like Cypress with many advanced features like no wait time, easy debugging of the command log, browser switch, automatic screenshots and videos.

The video of full code execution is available here.

We can take a use case with few test cases with varying sample data, more functions and test it out. We will be adding more blogs as we make progress in running test cases for our recent Angular and Node.js project.

Stay tuned!