Angular 4 Protractor - Cucumber
Protractor - Cucumber - Selenium integration using a Login page as a DEMO on Angular 4. This project was generated with Angular CLI version 1.4.5.
Get the Code
git clone https://github.com/yduartep/angular4-protractor-cucumber.git
cd angular4-protractor-cucumber
npm i
Development server
Run ng serve
for a dev server. Navigate to http://localhost:4200/
. The app will automatically reload if you change any of the source files.
Build
Run ng build
to build the project. The build artifacts will be stored in the dist/
directory. Use the -prod
flag for a production build.
Running unit tests
Run ng test
to execute the unit tests via Karma.
Running end-to-end tests
Before to execute any functional test is necessary download and update the web drivers.
So run, first of all, the command npm run webdriver:update
that will download all the necessary drivers.
Now, if you have already started the server, run ng e2e
to execute the end-to-end tests via Protractor.
You can also specify the name of the feature(s) you want to execute separately using the following command:
npm run e2e -- --features=playground,dashboard
E2E tests - multiple capabilities
If you desire to run e2e tests using multiple capabilites, you need to:
npm run start
: start the application server.npm run webdriver:start
: start the selenium web driver servernpm run e2e:hub
: execute the tests using multiple browsers or different versions and/or different operating system.
E2E tests - webdriver commands
npm run webdriver:clean
for remove all the web drivers downloaded or when you have EPERM errors during test execution.
npm run webdriver:update
to download and update the web drivers of the different browsers you want to use.
npm run webdriver:start
to start the webdriver manually in the case you want to use a different server for selenium.
Cucumber report
After execute the e2e tests, some html and json reports are generated in the forlder reports.
- This report is generated in the file /reports/html/cucumber_report.html:
- This report is generated in the file /reports/html/cucumber_reporter.html:
E2E - Project Structure
-
protractor.conf.js: contains the protractor configuration used by angular-cli to execute the e2e tests throught the command
ng e2e
using chrome as browser by default. -
protractor.shared.conf.js: contains the shared configuration between all kinds of tests execution that use protractor.
-
protractor.hub.conf.js: contains the configuration necessary to execute e2e test using multicapabilites.
-
e2e/config/browsers: contains all the browser's configuration necessary to execute the tests.
-
e2e/config/helpers/chai-imports.ts: This file is used to avoid repeating the import of chai library in any step.
-
e2e/features/step_definitions: contains the steps to execute. The name must end always with .e2e-spec.ts.
-
e2e/features: contains the gherkins definitions in .feature files.
-
e2e/pages: Contains the page objects where are encapsulating the functionalities.
-
e2e/support/hooks.js - used for setup and teardown the environment before and after each scenario.
-
e2e/support/reporter.js - Is a class used to define the diferent formats that can be generated in report.