E2E Testing Framework with Cypress 10+ and Cucumber by using POM to test Forms
Tags: formio, cucumber, cypress10, testingforms
Published: 2022-09-25 02:14:32

This post will show you how to create testing framework based on page object model by using Cypress 10+ and Cucumber to test simple [Form.io](https://www.form.io/) forms.

 I used [formio angular demo application](https://formio.github.io/angular-demo/#/) to perform e2e test against. Here is the project [github-repo](https://github.com/aktibaba/cypress-cucumber-framework).

After creating a project folder and navigating project root directory, as a first step, we need to install Cypress with this command:
- `npm install cypress --save-dev`

Then starting Cypress  with `npx cypress open` command will start Cypress in open mode. E2E Testing steps will help you with basic Cypress configuration. 

![cypress in open mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5bbfbochzsp4p8dy5rs8.png)

So far it was a basic Cypress instillation and configuration. To add Cucumber we need to install Cucumber Preprocessor and browserify-preprocessor with the following commands:

- `npm install @badeball/cypress-cucumber-preprocessor`
- `npm install --save-dev @cypress/browserify-preprocessor`

Then we need to rearrange cypress.config.js file to add a node event and base url , like below

```
const {
  defineConfig
} = require("cypress");
const preprocessor = require("@badeball/cypress-cucumber-preprocessor");
const browserify = require("@badeball/cypress-cucumber-preprocessor/browserify");

async function setupNodeEvents(on, config) {
  // This is required for the preprocessor to be able to generate JSON reports after each run, and more,
  await preprocessor.addCucumberPreprocessorPlugin(on, config);

  on("file:preprocessor", browserify.default(config));

  // Make sure to return the config object as it might have been modified by the plugin.
  return config;
}
module.exports = defineConfig({

  e2e: {
    baseUrl: "https://formio.github.io/angular-demo/#/",
    setupNodeEvents,
    specPattern: "cypress/e2e/**/*.{feature,features}",
  },
  // excludeSpecPattern: "**/others/*",

});

```
In the e2e folder, I created another folder and named as a formio-basic-form. In that folder, I created a step definition js file and object js file to apply POM, and I created a feature file with the same name but out of formio-basic-form folder in the e2e folder. The image of folder structure and feature file is given below:

![feature file and folder structure ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4vzbmpsnx1qh8lmtcf2g.png)

 I created a class in the object js file and write all cypress codes here.
```
class formiobasicform {

    static navigatingFormioAngularDemoApp() {
        //since we define base url in config , it will directly go application
        cy.visit('/')

    }
    static fillingBasicForm() {

        cy.get("input[placeholder='Enter your first name']").type("firstname")
        cy.get("input[placeholder='Enter your first name']").type("lastname")
        cy.get("input[placeholder='Enter your email address']").type("firstname@g.com")
        cy.get("input[name='data[phoneNumber]']").type(1233451223)
        cy.get("[name='data[survey][howWouldYouRateTheFormIoPlatform]']").eq(0).click()
        cy.get("[name='data[survey][howWasCustomerSupport]']").eq(0).click()
        cy.get("[name='data[survey][overallExperience]']").eq(0).click()
        cy.get("canvas.signature-pad-canvas").click({
            which: 1
        })
        cy.get("button[name='data[submit]']").click()
    }
    static verifyingSubmission() {
        cy.get("formio-alerts .alert-success").should("be.exist")
    }

}
export default formiobasicform;

```
and then, I wrote the step definitions in the step js file like below:

```
const {
    Given,
    When,
    Then,

} = require("@badeball/cypress-cucumber-preprocessor");
import formiobasicform from "./formio-basic-form-object";

//Scenario: verifying filling simple formio form 
Given("user navigate formio", () => {
    formiobasicform.navigatingFormioAngularDemoApp()
})
When("user fill the form", () => {
    formiobasicform.fillingBasicForm()
})
Then("user verify form submission", () => {
    formiobasicform.verifyingSubmission()

})
```
After creating these files, our first test scenario is ready to
to run e2e test.
  command to run test in headless mode:
- npx cypress run 

 command to run test in open mode:
- npx cypress open