How to add cypress-plugin-tab to my Angular e2e testing?

Question

I am using Angular12, NX, Cypress & KendoUI. I need to test tabbing through form elements. How do I add cypress-plugin-tab to my e2e testing?

The guide says use require in the suppport/index.ts file - this is not working for me.

I have executed npm install -D cypress-plugin-tab and added require('cypress-plugin-tab') to suppport/index.ts I have added this code to my test:

   let password = 'Password';
   let input = cy.focused();
   
   input.type(username).tab().type(password);

This does not work as it says it cannot find 'tab'. How do I get 'tab' to work in Angular?

Answer 1

You need to add in tsconfig.json in compilerOptions > types the cypress-plugin-tab src path.

  "compilerOptions": {
    "strict": true,
    "target": "es6",
    "lib": ["es6", "dom"],
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "types": ["node", "cypress", "cypress-plugin-tab/src"],
    "allowSyntheticDefaultImports": true
  },