This project is based on Angular-Seed application.
You can use it to get familiar with some basic features of Protractor end-to-end testing framework.
To get you started you can simply clone the QualityExcites2014-Demo repository and install the dependencies:
You need git to clone the angular-seed repository. You can get it from http://git-scm.com/.
We also use a number of node.js tools to initialize and test QualityExcites2014-Demo. You must have node.js and its package manager (npm) installed. You can get them from http://nodejs.org/.
Clone the QualityExcites2014-Demo repository using git:
git clone https://github.com/psech/QualityExcites2014-Demo.git
cd QualityExcites2014-Demo
We have two kinds of dependencies in this project: tools and angular framework code. The tools help us manage and test the application.
- We get the tools we depend upon via
npm
, the node package manager. - We get the angular code via
bower
, a client-side code package manager.
We have preconfigured npm
to automatically run bower
so we can simply do:
npm install
Behind the scenes this will also call bower install
. You should find that you have two new
folders in your project.
node_modules
- contains the npm packages for the tools we needapp/bower_components
- contains the angular framework files
Note that the bower_components
folder would normally be installed in the root folder but
QualityExcites2014-Demo changes this location through the .bowerrc
file. Putting it in the app folder makes
it easier to serve the files by a webserver.
We have preconfigured the project with a simple development web server. The simplest way to start this server is:
npm start
Now browse to the app at http://localhost:8000/app/index.html
.
QUALITYEXCITES2014-DEMO
├───app --> all of the files to be used in production
│ │ index.html --> app layout file (the main html template file of the app)
│ │
│ ├───css --> css files
│ │ app.css --> default stylesheet
│ │ demo.css --> demo stylesheet
│ │
│ ├───img --> image files
│ │
│ ├───js --> javascript files
│ │ app.js --> application
│ │ controllers.js --> application controllers
│ │
│ └───partials --> angular view partials (partial html templates)
│ │ *.html --> partial files
│
└───test --> test config and source files
│ protractor-conf.js --> config file for running e2e tests with Protractor from npm
│ seleniumGrid-conf.js --> config file for running e2e tests with Protractor manually
│
├───e2e --> end-to-end specs
│ │ *Spec.js --> tests
│ │
│ └───UIModel --> Page Object Model files
│ │ common.js --> common methods
│ │ uiModel.js --> main file, starting point
│ │
│ ├───Controls --> uiModel controls
│ │ *Ctrl.js --> files describing controls
│ │
│ └───Views --> uiModel views
│ *View.js --> files describing views
│
└───report --> test reports
The QualityExcites2014-Demo application contains only End to End tests.
The QualityExcites2014-Demo app comes with end-to-end tests written in Jasmine. These tests are run with the Protractor End-to-End test runner. It uses native events and has special features for Angular applications.
- the configuration is found at
test/protractor-conf.js
andseleniumGrid-conf.js
- the end-to-end tests are found in
test/e2e/
- the Page Object Model files are in
test/e2e/UIModel/
Protractor simulates interaction with our web app and verifies that the application responds correctly. Therefore, our web server needs to be serving up the application, so that Protractor can interact with it.
npm start
####Run test by builtin automatic script####
In addition, since Protractor is built upon WebDriver we need to install this. The angular-seed project comes with a predefined script to do this:
npm run update-webdriver
This will download and install the latest version of the stand-alone WebDriver tool.
Once you have ensured that the development web server hosting our application is up and running and WebDriver is updated, you can run the end-to-end tests using the supplied npm script:
npm run protractor
This script will execute the end-to-end tests against the application being hosted on the development server.
####Run tests manually with protractor installed globally####
To run protractor tests in manual way tou ned to have protractor installed globally in your system:
npm install -g protractor
To update and start WebDriver:
webdriver-manager update
webdriver-manager start
To sent tests to WebDriver place following line into protractor config:
seleniumAddress: 'http://localhost:4444/wd/hub'
To start test type:
protractor <options> <path_to_config_file>
####Run tests manually with protractor installed locally####
Make sure you have protractor installed within the project (/node_modules/protractor)
To update and start WebDriver:
<path_to_project>/mode_modules/protractor/bin/webdriver-manager update
<path_to_project>/mode_modules/protractor/bin/webdriver-manager start
or for Windows
node <path_to_project>\mode_modules\protractor\bin\webdriver-manager update
node <path_to_project>\mode_modules\protractor\bin\webdriver-manager start
To sent tests to WebDriver place following line into protractor config:
seleniumAddress: 'http://localhost:4444/wd/hub'
To start test type:
<path_to_project>/mode_modules/protractor/bin/protractor <options> <path_to_config_file>
or for Windows
node <path_to_project>\mode_modules\protractor\bin\protractor <options> <path_to_config_file>
The QualityExcites2014-Demo project comes preconfigured with a local development webserver. It is a node.js
tool called http-server. You can start this webserver with npm start
but you may choose to
install the tool globally:
sudo npm install -g http-server
Then you can start your own development web server to serve static files from a folder by running:
http-server
Alternatively, you can choose to configure your own webserver, such as apache or nginx. Just
configure your server to serve the files under the app/
directory.