cypress-typescript-out-of-the-box's Introduction

Cypress with typescript working out of the box

In order to get typescript out of the box you will need to upgrade to cypress 4.4.0 or later

Prerequisites

Node v10+
Restore packages by running npm install in repo root dir

Steps from scratch

create a new project

npm init

add typescript to the project

npm i -D typescript

add cypress to the project

npm i -D cypress

run cypress for the first time

npx cypress open

add typescript configuration file in cypress base dir e.g. cypress/tsconfig.json with config:

{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": false,
    "baseUrl": "../node_modules/cypress",
    "target": "es6",
    "lib": ["es6", "dom"],
    "types": ["cypress", "node"]
  },
  "include": ["**/*.ts"],
  "files": ["support/index.d.ts"]
}

rename files with extension js in ts
add a custom command in cypress/support/commands.ts

Cypress.Commands.add('getByTestId', (value) => {
  return cy.get(`[data-cy=${value}]`);
});

add in support dir index.d.ts file with typescript definitions for custom commands (IDE intelisense support) e.g.

// in cypress/support/index.d.ts
// load type definitions that come with Cypress module
/// <reference types="cypress" />

declare namespace Cypress {
  interface Chainable {
    /**
     * Custom command to select DOM element by data-cy attribute.
     * @example cy.getByTestId('greeting')
    */
    getByTestId(value: string): Chainable<Element>
  }
}

Include the TypeScript definition file, cypress/support/index.d.ts, with the rest of the source files, by adding following proprety into tsconfig.json

  "files": [
    "support/index.d.ts"
  ]

add typescript spec file

describe('Test suite shloud', () => {

  it('pass', () => {
    cy.wrap('foo').should('equal', 'foo');
  });

  it('pass for custom command', () => {
    cy.getByTestId('foo').should('not.exist');
  });

});