\n\n Add this schematic to quickly get up and running with [Cypress](https://cypress.io) in your Angular project. \n\n ___\n\n ## What does this schematic do?\n\n**Once added to your project, it will:**\n\nā Install Cypress\n\nā Add npm scripts for running Cypress e2e tests in `run` mode and `open` mode\n\nā Scaffold base Cypress files and directories\n\nā Provide the ability to add new e2e and component specs easily using `ng-generate`\n\nā Optional: prompt you to add or update the default `ng e2e` command to use Cypress for e2e tests.\n\nā Optional: prompt you to add a `ng ct` command to use Cypress component testing.\n\n## Requirements\n\n- Cypress `^16.0.0`\n- Angular `>=21.0.0` \n - `@cypress/schematic@5` supports Angular 20 - 21 on Cypress `^15.0.0`\n - `@cypress/schematic@4` supports Angular 18 - 19\n - `@cypress/schematic@3` supports Angular 17\n - `@cypress/schematic@2` supports Angular 13 - 16\n## Usage āÆ\n\n### Adding E2E and Component Testing\n\nTo install the schematic via prompts:\n\n```shell\nng add @cypress/schematic\n```\n\nTo install the schematic via cli arguments (installs both e2e and component testing):\n\n```shell\nng add @cypress/schematic --e2e --component\n```\n\nThe installation will add this schematic to the [default schematic collections](https://angular.io/guide/workspace-config#angular-cli-configuration-options). This allows you to execute the CLI commands without prefixing them with the package name.\n\nTo run Cypress in `open` mode within your project: \n\n```shell script\nng run {project-name}:cypress-open\n```\n\nTo run Cypress headlessly via `run` mode within your project:\n\n```shell script\nng run {project-name}:cypress-run\n```\n\nIf you have chosen to add or update the `ng e2e` command, you can also run Cypress in `open` mode using this:\n\n```shell script\nng e2e\n```\n\nIf you have chosen to add Cypress component testing, you can run component tests in `open` mode using this:\n\n```shell script\nng run {project-name}:ct\n```\n\n### Generating New Cypress Spec Files\n\nTo generate a new e2e spec file:\n\n```shell script\nng generate spec \n```\n\nor (without cli prompt)\n\n```shell script\nng generate spec {name}\n```\n\nTo generate a new component spec file:\n\n```shell script\nng generate spec --component\n```\n\nor (without cli prompt)\n\n```shell script\nng generate spec {component name} --component\n```\n\nTo generate a new component spec file in a specific folder:\n\n```shell script\nng generate spec {component name} --component --path {path relative to project root}\n```\n\nTo generate new component spec files alongside all component files in a project:\n\n```shell script\nng generate specs-ct\n```\n\nTo generate a new, generic component definition with a component spec file in the given or default project. This wraps the [Angular CLI Component Generator](https://angular.io/cli/generate#component) and supports the same arguments.\n\n```shell script\nng generate component {component name}\n```\n\n## Builder Options š \n\n### Running the builder with a specific browser\n\nBefore running Cypress in `open` mode, ensure that you have started your application server using `ng serve`.\n\n```json\n\"cypress-open\": {\n \"builder\": \"@cypress/schematic:cypress\",\n \"options\": {\n \"watch\": true,\n \"headless\": false,\n \"browser\": \"chrome\"\n },\n \"configurations\": {\n \"production\": {\n \"devServerTarget\": \"{project-name}:serve:production\"\n }\n }\n}\n```\n\nRead our docs to learn more about [launching browsers](https://on.cypress.io/launching-browsers) with Cypress.\n\n### Recording test results to Cypress Cloud\n\nWe recommend setting your [Cypress Cloud](https://on.cypress.io/features-dashboard) recording key as an environment variable and NOT as a builder option when running it in CI.\n\n```json\n\"cypress-run\": {\n \"builder\": \"@cypress/schematic:cypress\",\n \"options\": {\n \"devServerTarget\": \"{project-name}:serve\",\n \"record\": true,\n \"key\": \"your-cypress-cloud-recording-key\"\n },\n \"configurations\": {\n \"production\": {\n \"devServerTarget\": \"{project-name}:production\"\n }\n }\n}\n```\n\nRead our docs to learn more about [recording test results](https://on.cypress.io/recording-project-runs) to [Cypress Cloud](https://on.cypress.io/features-dashboard).\n\n### Specifying a custom config file\n\nIt may be useful to have different Cypress configuration files per environment (ie. development, staging, production).\n\n```json\n\"cypress-run\": {\n \"builder\": \"@cypress/schematic:cypress\",\n \"options\": {\n \"devServerTarget\": \"{project-name}:serve\",\n \"configFile\": \"cypress.production.js\"\n },\n \"configurations\": {\n \"production\": {\n \"devServerTarget\": \"{project-name}:production\"\n }\n }\n}\n```\n\nRead our docs to learn more about all the [configuration options](https://on.cypress.io/configuration) Cypress offers.\n\n### Running Cypress in parallel mode within CI\n\n```json\n\"cypress-run\": {\n \"builder\": \"@cypress/schematic:cypress\",\n \"options\": {\n \"devServerTarget\": \"{project-name}:serve\",\n \"parallel\": true,\n \"record\": true,\n \"key\": \"your-cypress-cloud-recording-key\"\n },\n \"configurations\": {\n \"production\": {\n \"devServerTarget\": \"{project-name}:production\"\n }\n }\n}\n```\n\nRead our docs to learn more about speeding up test execution in CI via [Cypress parallelization](https://on.cypress.io/parallelization)\n\n### Specifying a custom reporter and options\n\nYou 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.\n\n```json\n\"cypress-run\": {\n \"builder\": \"@cypress/schematic:cypress\",\n \"options\": {\n \"devServerTarget\": \"{project-name}:serve\",\n \"reporter\": \"junit\",\n \"reporterOptions\": {\n \"mochaFile\": \"results/my-test-output.xml\",\n \"toConsole\": true\n }\n },\n \"configurations\": {\n \"production\": {\n \"devServerTarget\": \"{project-name}:production\"\n }\n }\n}\n```\n\nRead our docs to learn more about working with [reporters](https://on.cypress.io/reporters).\n\n### Running the builder with a different baseUrl\n\nYou can specify a `baseUrl` that is different than the one in `cypress.config.js`. There are two ways to do this.\n\n1. Add `baseUrl` to `configurations` like the following: \n\n```json\n\"cypress-open\": {\n \"builder\": \"@cypress/schematic:cypress\",\n \"options\": {\n \"devServerTarget\": \"{project-name}:serve\",\n \"watch\": true,\n \"headless\": false\n },\n \"configurations\": {\n \"production\": {\n \"devServerTarget\": \"{project-name}:serve:production\"\n },\n \"local-dev\": {\n \"devServerTarget\": \"{project-name}:serve:development\",\n \"baseUrl\": \"http://localhost:4002\"\n },\n \"another-env\": {\n \"devServerTarget\": \"{project-name}:serve:development\",\n \"baseUrl\": \"http://localhost:4004\"\n }\n }\n}\n```\n\n2. Add custom options to `devServerTarget` in `angular.json`:\n\n```json\n\"options\": {\n \"host\": \"localhost\",\n \"port\": 4200\n},\n```\n\nIn order to prevent the application from building, add the following to the end of your command:\n\n```shell\n--dev-server-target=''\n```\n\n## Generator Options\n\n### Specify Testing Type \n\nThe default generated spec is E2E. In order to generate a component test you can run:\n\n```shell script\nng generate @cypress/schematic:spec --name=button -t component\n```\n\n`-t` is an alias for `testing-type`. It accepts `e2e` or `component` as arguments. If you are using the CLI tool, a prompt will appear asking which spec type you want to generate.\n\n### Specify Filename (bypassing CLI prompt)\n\nIn order to bypass the prompt asking for your spec name add a `--name=` flag like this:\n\n```shell script\nng generate @cypress/schematic:spec --name=login\n```\n\nThis will create a new spec file named `login.cy.ts` in the default Cypress folder location.\n\n### Specify Project\n\nAdd a `--project=` flag to specify the project:\n\n```shell script\nng generate @cypress/schematic:spec --name=login --project=sandbox\n```\n### Specify Path\n\nAdd a `--path=` flag to specify the project:\n\n```shell script\nng generate @cypress/schematic:spec --name=login --path=src/app/tests\n```\n\nThis will create a spec file in your specific location, creating folders as needed. By default, new specs are created in either `cypress/e2e` for E2E specs or `cypress/ct` for component specs.\n\n### Generate Tests for All Components\n\nYou can scaffold component test specs alongside all your components in the default project by using:\n\n```shell script\nng generate @cypress/schematic:specs-ct -g\n```\n\nThis will identify files ending in `component.ts`. It will then create spec files alongside them - if they don't exist.\n\nIf you would like to specify a project, you can use the command:\n\n```shell script\nng generate @cypress/schematic:specs-ct -g -p {project-name}\n```\n\n## Migrating from Protractor to Cypress?\n\nRead our [migration guide](https://on.cypress.io/protractor-to-cypress) to help you make the transition from Protractor to Cypress.\n\n## Questions or Issues?\n\nVisit our [plugins discussion](https://github.com/cypress-io/cypress/discussions/categories/plugins) to ask questions or report issues related to this package.\n\n## License\n\nThis project is licensed under an MIT license. \n\n## Community Recognition\n\nThe [Cypress Angular Schematic](https://www.npmjs.com/package/@cypress/schematic) package was made possible by the original work of the [Briebug](https://briebug.com/) team and the contributors of [@briebug/cypress-schematic](https://www.npmjs.com/package/@briebug/cypress-schematic).\n\n@briebug/cypress-schematic served as the starting point for improvements and new functionality the Cypress team will continue to develop along with the community.\n","readmeFilename":"README.md"}
![\"Cypress](\"https://raw.githubusercontent.com/cypress-io/cypress/develop/npm/cypress-schematic/src/svgs/built-by-cypress.svg\")
\n \n