@cypress/schematic

    1.5.1 • Public • Published

    Cypress Angular Schematic

    🔖 Official Angular Schematic and Builder for the Angular CLI.
    This project is maintained by the Cypress Team.

    Cypress Logo

    Add this schematic to quickly get up and running with Cypress in your Angular project.


    What does this schematic do?

    Once added to your project, it will:

    Install Cypress

    Add npm scripts for running Cypress in run mode and open mode

    Scaffold base Cypress files and directories

    Provide the ability to add new e2e files easily using ng-generate

    Optional: prompt you to add or update the default ng e2e command to use Cypress.

    Usage

    Install the schematic:

    ng add @cypress/schematic

    To run Cypress in open mode within your project:

    ng run {project-name}:cypress-open

    To run Cypress headlessly via run mode within your project:

    ng run {project-name}:cypress-run

    If you have chosen to add or update the ng e2e command, you can also run Cypress in open mode using this:

    ng e2e

    To generate new e2e spec files:

    ng generate @cypress/schematic:e2e

    Builder Options 🛠

    Running the builder with a specific browser

    Before running Cypress in open mode, ensure that you have started your application server using ng serve.

    "cypress-open": {
      "builder": "@cypress/schematic:cypress",
      "options": {
        "watch": true,
        "headless": false,
        "browser": "chrome"
      },
      "configurations": {
        "production": {
          "devServerTarget": "{project-name}:serve:production"
        }
      }
    }

    Read our docs to learn more about launching browsers with Cypress.

    Recording test results to the Cypress Dashboard

    We recommend setting your Cypress Dashboard recording key as an environment variable and NOT as a builder option when running it in CI.

    "cypress-run": {
      "builder": "@cypress/schematic:cypress",
      "options": {
        "devServerTarget": "{project-name}:serve",
        "record": true,
        "key": "your-cypress-dashboard-recording-key"
      },
      "configurations": {
        "production": {
          "devServerTarget": "{project-name}:production"
        }
      }
    }

    Read our docs to learn more about recording test results to the Cypress Dashboard.

    Specifying a custom cypress.json config file

    It may be useful to have different Cypress configuration files per environment (ie. development, staging, production).

    "cypress-run": {
      "builder": "@cypress/schematic:cypress",
      "options": {
        "devServerTarget": "{project-name}:serve",
        "configFile": "cypress.production.json"
      },
      "configurations": {
        "production": {
          "devServerTarget": "{project-name}:production"
        }
      }
    }

    Read our docs to learn more about all the configuration options Cypress offers.

    Running Cypress in parallel mode within CI

    "cypress-run": {
      "builder": "@cypress/schematic:cypress",
      "options": {
        "devServerTarget": "{project-name}:serve",
        "parallel": true,
        "record": true,
        "key": "your-cypress-dashboard-recording-key"
      },
      "configurations": {
        "production": {
          "devServerTarget": "{project-name}:production"
        }
      }
    }

    Read our docs to learn more about speeding up test execution in CI via Cypress parallelization

    Specifying a custom reporter and options

    You may want to specify a custom reporter. Cypress works with any reporters built for Mocha: built-in, third-party, or custom. In addition to specifying reporters, you can specify reporter options. These differ based on the reporter, and you should refer to its documentation for supported options.

    "cypress-run": {
      "builder": "@cypress/schematic:cypress",
      "options": {
        "devServerTarget": "{project-name}:serve",
        "reporter": "junit",
        "reporterOptions": {
          "mochaFile": "results/my-test-output.xml",
          "toConsole": true
        }
      },
      "configurations": {
        "production": {
          "devServerTarget": "{project-name}:production"
        }
      }
    }

    Read our docs to learn more about working with reporters.

    Generator Options

    Specify Filename (bypassing CLI prompt)

    In order to bypass the prompt asking for your e2e spec name, simply add a --name= flag like this:

    ng generate @cypress/schematic:e2e --name=login

    This will create a new spec file named login.spec.ts in the default Cypress folder location.

    Specify Project

    Add a --project= flag to specify the project:

    ng generate @cypress/schematic:e2e --name=login --project=sandbox

    Specify Path

    Add a --path= flag to specify the project:

    ng generate @cypress/schematic:e2e --name=login --path=src/app/tests

    This will create the e2e spec file in your specific location, creating folders as needed.

    Migrating from Protractor to Cypress?

    Read our migration guide to help you make the transition from Protractor to Cypress.

    Questions or Issues?

    Visit our plugins discussion to ask questions or report issues related to this package.

    License

    This project is licensed under an MIT license.

    Community Recognition

    The Cypress Angular Schematic package was made possible by the original work of the Briebug team and the contributors of @briebug/cypress-schematic.

    @briebug/cypress-schematic served as the starting point for improvements and new functionality the Cypress team will continue to develop along with the community.

    Install

    npm i @cypress/schematic

    DownloadsWeekly Downloads

    16,760

    Version

    1.5.1

    License

    MIT

    Unpacked Size

    78.3 kB

    Total Files

    37

    Last publish

    Collaborators

    • cypress-npm-publisher