E2E Testing with Cypress and Typescript

kadir — Mon, 26 Sep 2022 13:24:42 +0000

This post will show you how to install and configure Cypress with Typescript to test simple Form.io forms.

I used formio angular demo application to perform e2e test against. Here is the testing 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 we need to install typescript with this command :
npm install --save-dev typescript

After installing Cypress, we need to start Cypress in open mode with npx cypress open to configure it. Starting Cypress will create cypress.config file and other folders. Inside Cypress folder
we need top add tsconfig.json file like below

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["es5", "dom"],
    "types": ["cypress", "node"]
  },
  "include": ["**/*.ts"]
}

After that we can change all js file to ts file and ad our first testing file to run

command to run test in headless mode:

npx cypress run

command to run test in open mode:

npx cypress open

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

kadir — Sun, 25 Sep 2022 02:14:32 +0000

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("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

DEV Community: kadir

E2E Testing with Cypress and Typescript

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