Mr. and Mrs. Smith assessment challenge Automated tests with Cypress and Cucumber

---

I decided to make this tutorial explaining how you can execute automating your tests.

Detail some good coding practices when under taking test automation and why they are important.

Below you will find how to configure the environment, the main commands, the structuring of the project. We will use Cypress with Cucumber and we will follow the concept of page objects.

contextualizing

• What is Cypress: Cypress is a framework used for end-to-end test automation. It currently uses JavaScript as its programming language and runs its tests in Chrome.

Its main advantages are that it has a small learning curve and is easy to install and configure.

• What is Cucumber?

Cucumber is a tool that can be used in conjunction with Cypress and allows the writing of automated tests in the Gherkin format. It is possible to use Cypress without Cucumber, but it is not the focus of this tutorial.

Github

Project
https://github.com/JaderTS/mrandmrssmith_assessment_challenge

Setup

Command to run

To setup and install the project, run the command;
npm install

Execution

You can run the project locally with

• if you want to run the whole test on the headed browser
  npx cypress open

• if you want to run the whole test on the headless mode
  npx cypress run

Setting the Environment

We just have to follow four steps:

1. Install Node.js: go to the official website, download and install the version for your computer.

2. Choose a JavaScript IDE to program: We'll use VS Code in this tutorial.

3. Install Cypress with Cucumber:

I) Create a folder where your project files will be. Open the windows terminal and access that same folder with the following command:

cd /your/project/path
II) Having accessed the project folder, run the installation command:

npm install --save-dev cypress cypress-cucumber-preprocessor
III) Still inside your project folder, run the following command so that Cypress finishes creating the local files:

npx cypress open

1. Configure Cucumber in Cypress:

Add the following script to the cypress/plugins/index.js file:

Understanding the main Cypress commands

Cypress works based on locating site elements (buttons, inputs, texts, images, etc.) and interacting with them. We can automate all the actions that we perform manually when using the web page (and a few more).

Cypress has good documentation with all its commands. Below we will see the main ones to get started.

GET:
Syntax: cy.get('selector')

This command is responsible for selecting the screen element on which to perform an action. Functioning similar to taking the mouse cursor over what we want.

To better understand how to capture element selectors, you can access a good tutorial at this link.

CLICK:
Syntax: .click()

The click command is used to perform the action of clicking on an element on the page and, for that, it must be used in conjunction with the GET command or another command with the same function. Operation similar to clicking with the left mouse button on the element we want.

TYPE:
Syntax: .type('text')

Type is used to set information in fields. Functioning similar to typing with our keyboard.

VISIT:
Syntax: cy.visit('https://www.mrandmrssmith.com/')

The visit command is used to access virtual addresses. With it we access the site where we will perform the tests.

SHOULD:
Syntax: .should('settings')

Should is a command used to make assertions on the page. This is normally the last command to be used in the scenario and serves to validate if the test passed or failed.

Structuring the project

Cypress can be used without Cucumber with a simple structure explained in its documentation. In this tutorial we will see how to structure using the test writing tool in Gherkin. For this, we have to know the main folders and initial files of the project:

Initial structure.
The 'fixtures' folder and the 'commands.js', 'index,js' and package-lock.json' files offer advanced settings that will not be covered in this tutorial.

integration: in this folder we place our files with test scenarios written in Gherkin format.

plugin/index.js: this file is intended for plugin configuration. We used it when configuring Cucumber.

support: inside this folder we put the steps, the scripts and the mapping of elements of our tests.

node_modules: here are the Cypress and Cucumber working files.
Normally we don't need to mess with this folder.

cypress.json: in this file we can perform global configurations of our project. Eg: create global variables, define browser resolution, set a default URL, among others.

To start the project structure, we need to create three folders in cypress/support, because we will use the concept of page object. They are: elements, pageobjects and steps.

Folders created inside cypress/support.
steps: in this folder we put the steps that will make the connection between what we write in Gherkin and the scripts we make in Cypress.

pageobjects: here we leave the scripts made in Cypress.
The idea of ​​page objects is to create a.js file for each page or flow on the site. In this way, we maintain the organization and facilitate the maintenance of the code, as we put in the file the commands that are executed in the page/flow corresponding to the name of the file.

package.json file.
Add the following code to the package.json file:

The scripts make it easier for us to run the test via the terminal. The step configuration
allows you to define the location of the project where the steps of our scenario will be.

Usage example
With the environment configured and the project structured, we will now do a practical example of test automation.

Step 1: Configure the cypress.json file. You can copy the code below to your file and customize it with the settings for your project. Below we set it up for our example test.

Step 1.
ViewportWidth and viewportHeight allow us to configure the browser resolution at which our tests will run.
DefaultCommandTimeout sets one of the timeout types to 10 seconds.
BaseUrl is where we set the default url for our tests.
Location where the cypress.json file is.
Various settings can be made in cypress.json. Check the documentation for possibilities.

Step 2: Create a file with the test scenario written in Gherkin. It must be inside cypress/integration and have a .feature extension.

Step 2.
Test suite name.
Test scenario name.
Given is the equivalent of Gherkin's “Given that”.
When is the equivalent of Gherkin's "When".
Then is the equivalent of Gherkin's "Then".

File with suite name and .feature format inside cypress/integration.