E2E Testing with Cypress and Typescript

aktibaba

kadir

Posted on September 26, 2022

E2E Testing with Cypress and Typescript

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

tsconfig

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

Enter fullscreen mode Exit fullscreen mode

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
💖 💪 🙅 🚩
aktibaba
kadir

Posted on September 26, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

E2E Testing with Cypress and Typescript
cypress E2E Testing with Cypress and Typescript

September 26, 2022