E2E Testing Framework with Cypress 10+ and Cucumber by using POM to test Forms

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 forms.

I used formio angular demo application to perform e2e test against. Here is the project github-repo.

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.

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:

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("[e-mail]")
        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