webdriverio/webdriverio-schematics

Add WebdriverIO to an Angular CLI project

WebdriverIO Angular Schematic

Add WebdriverIO to an Angular CLI project

This schematic will:

• install WebdriverIO and its dependencies
• add necessary files for WebdriverIO to work with Angular & Typescript
• prompt for removal of Protractor files and configuration

Usage 🚀

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

ng add @wdio/schematics

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

ng e2e

or

ng run {your-project-name}:wdio-run
# or run wdio directly via
npx wdio run wdio.conf.js

These two commands do the same thing. They will launch the WebdriverIO testrunner.

Parameter Options

When adding WebdriverIO Schematics to your project you can invoke the following options:

Option	Description
--removeProtractor	When true, the protractor dependency and e2e directory will be removed from the project
--noWizard	When true, it does not run the WebdriverIO setup wizard, requiring the user setup the framework by themselves
--noBuilder	When true, the angular.json file will not be modified to add WebdriverIO commands, requiring the user to run WebdriverIO from the command line independent of the Angular CLI
--yes	When true, it configures WebdriverIO with default settings.
--yarn	When true, it uses yarn rather than npm.

For example to add a basic WebdriverIO setup without going through the configuration wizard, just run:

$ ng add @wdio/schematics --yes

Once WebdriverIO is added to your project you can apply the common WDIO CLI options when triggering the test.

Development 🛠

Getting started

⚙ 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

$ npm i && cd sandbox && npm i && cd ..

🖇 Link the schematic in the sandbox to run locally

$ npm run link:sandbox

🏃 Run the schematic

$ cd sandbox
$ npx ng add @wdio/schematics

E2E testing

Execute the schematic against the sandbox.

npm run test

Reset the sandbox

Running the schematic locally makes 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.

npm run clean

---

Parts of the implementation were based of @briebug/cypress-schematic. Thank you!