With this repository a test framework can be set up to test front end applications and websites. It uses the following technologies:
- Nodejs;
- Typescript;
- Protractor;
- Cucumberjs;
This project can be used as a starter kit / example of how to implement a protractor-cucumber framework written in typescript. It shows the use of basic but much used protractor and cucumber functionality. The project can be used as a template on how to use page-object oriented design.
The project exists of example features that explain usage of different cucumber features and of features that test the functionality of a demo/test webpage. To run the test webpage you need to have it up and running. The webpage and instructions on how to use it can be found in this repository awesome-test-webpage.
To run the test follow these steps:
- Clone the project;
- Run command
npm install; - Make sure you have the awesome-test-webpage running at
http://localhost:8081; - Run protractor command
protractor protractor.cucumber.conf.js;
By default the project will only run the features testing the test webpage. The example features explaining the use of different cucumber functionality are run by appending --cucumberOpts.tags=@EXAMPLE to the command in step 4.
Protractor is build upon Selenium Webdriver with some addopations specifically for the testing of Angular applications. Consider for example the following:
The ElementFinder can be treated as a WebElement for most purposes, in particular, you may perform actions (i.e. click, getText) on them as you would a WebElement. Once an action is performed on an ElementFinder, the latest result from the chain can be accessed using the then method. Unlike a WebElement, an ElementFinder will wait for angular to settle before performing finds or actions.
- Support for for BDD with Cucumber;
- html reporting with images of failed scenarios;
This project describes in basic functionalities of Cucumber, with examples of use in feature files. Explained are:
- the use of data-tables;
- the use of scenario-outlines;
To help development of Cucumber feature files and the code underneath the IDE VSCode has a great plugin available: Cucumber (Gherkin) Full Support. This plugin allows for (among other things):
- autocomplete of steps when writing features;
- navigation to step definitions;
- highlighting of missing step definitions;
The project uses a cucumber plugin to generate an html report of all the test features and scenarios run and their result. For each failed scenario a screenshot of the browser is added to the report. More on the plugin used see the cucumber-html-reporter npm package page.
Feel free to do anything with a fork of this project. If you have anything interessting to add to this project please feel free to open a pull request. That would be much appretiated.
To contribute do the following:
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/new_feature) - Commit your Changes (
git commit -m 'added some new stuff') - Push to the Branch (
git push origin feature/new_feature) - Open a Pull Request
