Nightwatch Schematics


> Fast and easy installation of [Nightwatch][nightwatchlink] into your projects

Framework & Language Supported: Angular

This project is a Schematics implementation that allows you to easily integrate [Nightwatch][nightwatchlink] into your Angular projects.

This Schematic will:

🏗️ Install Nightwatch, and it's dependencies
⚙️ Add NPM scripts for running Nightwatch tests
📦 Scaffold base Nightwatch config and test files
❓ Prompt for removal of Protractor files and configuration

Angular

$3

!Nightwatch Schematics Demo

$3

Run as one command in an Angular CLI app directory. Note this will add the schematic as a dependency to your project.

``bash
ng add @nightwatch/schematics
`

One can provide following options:
| Option | Description |
|-----------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| noBuilder | This will skip the builder addition, leaving the angular.json file unmodified and requiring you to run Nightwatch from the command line or through your IDE. Include --noBuilder in your ng add command. |

With the custom builder installed, you can run Nightwatch with the following commands:

`bash
ng e2e
`

`bash
ng run {your-project-name}:nightwatch-run
`

These two commands do the same thing. They will run nightwatch e2e tests.

Once Nightwatch is added to your project, all [Nightwatch CLI options][nightwatchclioptionslink] will be available when triggering e2e tests. E.g.: --verbose, --retries etc.

$3

!Nightwatch Schematics Demo

$3

Install [Schematics CLI][schematicsclilink] globally

`bash
npm install -g @angular-devkit/schematics-cli
`

Install [Nightwatch-schematics][nightwatchschematicslink] in your project

`bash
npm install @nightwatch/schematics
`

Run following command to install Nightwatch in your project:

`bash
schematics @nightwatch/schematics:ng-add
`

Once Nightwatch is added to your project, all [Nightwatch CLI options][nightwatchclioptionslink] will be available when triggering e2e tests. E.g.: --verbose, --retries etc. One can update e2e:test to include cli options.

🐛 Issues

Issues with this schematic can filed here

If you want to contribute (or have contributed in the past), feel free to add yourself to the list of contributors in the package.json before you open a PR!

FAQ

$3

This command will update nightwatch schematic package

`bash
npm update @nightwatch/schematics
`

$3

The best way to ask for help and to report bugs is to [open an issue][githubissuelink].

[Gitter][gitterlink] is another option.

$3

It's very simple, you just have to run ng add @nightwatch/schematics command, and it will prompt you to remove Protractor from angular project.

$3

All you have to do is install the relevant drivers, and replace env value (Check the column names in the table below) env-name in angular.json. The config in angular.json will look like this.

`javascript
"nightwatch-run": {
"builder": "@nightwatch/schematics:nightwatch",
"options": {
"devServerTarget": "angularapp:serve",
"tsConfig": "../nightwatch/tsconfig.e2e.json",
"config": "./nightwatch.conf.js",
"env": ""
},
"configurations": {
"production": {
"devServerTarget": "angularapp:serve:production"
}
}
},
"e2e": {
"builder": "@nightwatch/schematics:nightwatch",
"options": {
"devServerTarget": "angularapp:serve",
"tsConfig": "../nightwatch/tsconfig.e2e.json",
"config": "./nightwatch.conf.js",
"env": ""
},
"configurations": {
"production": {
"devServerTarget": "angularapp:serve:production"
}
}
}
`

$3

| Projects | command |
| ------------------ | ---------------- |
| Angular App | npm run e2e |
| Typescript Project | npm run e2e:test |

Drivers

$3

| Name | driver | command |
| --------------- | --------------- | ---------------------------------------- |
| chrome | chromedriver | npm install chromedriver --save-dev |
| firefox | geckodriver | npm install geckodriver --save-dev |
| selenium-server | selenium-server | npm install selenium-server --save-dev |

👩🏽‍💻 Development

$3

🛠️ Node.js and npm are required for the scripts. Make sure it's installed on your machine.

⬇️ Install the dependencies for the schematic and the sandbox application

`bash
npm i && cd sandbox && npm i && cd ..
`

🖇 Link the schematic in the sandbox to run locally

`bash
npm run link:sandbox
`

🏃 Run the schematic

`bash
npm run build:clean:launch
`

🧪 E2E Testing

Execute the schematic against the sandbox. It will add Nightwatch config, tests, and custom builder, then run e2e tests in the sandbox.

`bash
npm run test
`

🧪 Unit Testing

Run the unit tests using Jasmine as a runner and test framework

`bash
npm run build:test
npm run test:unit
`

♻️ Reset the Sandbox

Running the schematic locally performs file system changes. The sandbox is version-controlled so that viewing a diff of the changes is trivial. After the schematic has run locally, reset the sandbox with the following.

`bash
npm run clean
``

---

These projects: @briebug/cypress-schematic, schuchard/prettier-schematic helped us in development of this project. Thank you!

[nightwatchlink]: https://nightwatchjs.org/
[nightwatchclioptionslink]: https://nightwatchjs.org/guide/running-tests/command-line-options.html
[nightwatchgetstartedlink]: https://nightwatchjs.org/gettingstarted/
[nightwatchschematicslink]: https://github.com/nightwatchjs/nightwatch-schematics
[vuenightwatchpluginlink]: https://cli.vuejs.org/core-plugins/e2e-nightwatch.html
[schematicsclilink]: https://www.npmjs.com/package/@angular-devkit/schematics-cli
[githubissuelink]: https://github.com/nightwatchjs/nightwatch-schematics/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc
[gitterlink]: https://gitter.im/nightwatchjs/nightwatch