Docs

cypress.md

Cypress

Install

• yarn add cypress --dev

Configuration

• Typescript

  • Add cypress/tsconfig.json file

    {
      "compilerOptions": {
        "strict": true,
        "baseUrl": "../node_modules",
        "target": "es5",
        "lib": ["es5", "dom"],
        "types": ["cypress"]
      },
      "include": ["**/*.ts"]
    }

  • Configure Typescript Webpack Preprocessor

    • Installs yarn add @cypress/webpack-preprocessor webpack ts-loader --dev

      • Verify yarn start still works. Create React App (CRA) requires a specific version of Webpack. If it fails, install the specific version (ex: 4.41.0) of webpack needed for CRA with yarn add webpack@4.41.0 --dev

    • Create file cypress/plugins/cypress-typescript-preprocessor.js

      /**
       * Typescript configuration for Cypress with Webpack
       * @source https://github.com/cypress-io/add-cypress-custom-command-in-typescript/blob/master/cypress/plugins/cy-ts-preprocessor.js
       */
      
      const wp = require('@cypress/webpack-preprocessor');
      
      const webpackOptions = {
        resolve: {
          extensions: ['.ts', '.js']
        },
        module: {
          rules: [
            {
              test: /\.ts$/,
              exclude: [/node_modules/],
              use: [
                {
                  loader: 'ts-loader',
                  options: {
                    transpileOnly: true
                  }
                }
              ]
            }
          ]
        }
      };
      
      const options = {
        webpackOptions
      };
      
      module.exports = wp(options);

    • Add to file cypress/plugins/index.js

      const cypressTypescriptPreprocessor = require('./cypress-typescript-preprocessor');
      
      module.exports = (on, config) => {
        on('file:preprocessor', cypressTypescriptPreprocessor);
      };

Test Execution

All tests reside in the cypress/integration folder.

• Open Cypress GUI. Manually select/execute tests. Observe test execution in a browser.
  • yarn run cypress open
• Run tests headless in terminal.
  • yarn run cypress run

References

• Cypress
• Typescript Configuration
• Cypress Configuration