The preferred method is to install Protractor globally with the following command:
npm install protractor -g
Protractor will automatically download the Selenium Standalone Server and all the browser drivers.
Execute this command to update the Selenium Standalone Server and the browser drivers:
webdriver-manager update
Ensure that you have installed the jasmine-core package locally as shown in the Setting up unit testing with Jasmine and Karma section . The tests will be written in Jasmine, but you can also use Mocha (https://mochajs.org)--another JavaScript test framework running on Node.js. In addition, a reporter implementation is required. Install jasmine-spec-reporter:
npm install jasmine-spec-reporter --save-dev
The Protractor configuration takes place in the protractor.conf.js file:
var path = require('path');
var SpecReporter = require('jasmine-spec-reporter').SpecReporter;
exports.config = {
allScriptsTimeout: 11000,
specs: ['../e2e/**/*.e2e-spec.ts'],
capabilities: {'browserName': 'chrome'},
directConnect: true,
baseUrl: 'http://localhost:3000/',
framework: 'jasmine',
jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 30000,
print: function () { }
},
beforeLaunch: function () {
require('ts-node').register({
project: path.resolve(__dirname, '../e2e')
});
},
onPrepare() {
jasmine.getEnv().addReporter(new SpecReporter());
}
};
The description of the most important configuration options is listed down here:
| Option | Description |
| allScriptsTimeout | The timeout in milliseconds for each script running on the browser. |
| specs | Spec patterns are relative to the location of this config. The best practice is to place all e2e tests in the e2e folder. The sub-folder names correspond to the page names. For example, tests for the home page should be in the home sub-folder. The file names also correspond to the name of pages. We add the .e2e-spec.ts suffix to our spec files. For example, the spec file for the home page is home.e2e-spec.ts. |
| capabilities | Configuration object for the browser the tests run against. You can also run tests on more than one browser at once. For that, use the multiCapabilities option, which expects an array of capabilities. |
| seleniumAddress | Use this option to connect to a running Selenium Server started with webdriver-manager start. For example, seleniumAddress: 'http://localhost:4444/wd/hub'. Protractor will send requests to this server to control a browser. You can see information about the status of the server at http://localhost:4444/wd/hub. |
| directConnect | Use this option to connect to Chrome or Firefox directly (only two browsers are supported for direct connection). In this book, we use directConnect instead of seleniumAddress. |
| baseUrl | The base URL for the application under test. |
| framework | Test framework to use. Normally, Jasmine or Mocha are used. |
| beforeLaunch | A callback function called once configs are read but before any environment setup. This will only run once, and before onPrepare. In the preceding configuration, ts-node will be executed. The ts-node module takes care of transpiling TypeScript files to JavaScript ones. You must install it via npm as npm install ts-node --save-dev. Also, consider the project configuration option which points to the folder with a specific tsconfig.json file. Normally, we need different TypeScript compiler options for e2e tests. |
| onPrepare | A callback function called once Protractor is ready and available, and before the specs are executed. We can add some reporters there. |
All preparations are done. Now, ensure that the application is running at http://localhost:3000/ and run the tests from the project root with:
protractor ./config/protractor.conf.js
For the sake of convenience, you can configure this command as the npm script and run with npm run e2e:
"scripts": {
...
"pree2e": "webdriver-manager update",
"e2e": "protractor ./config/protractor.conf.js"
}
It is possible to separate e2e tests into various suites and run suite-related tests separately. You can accomplish this task in the configuration file within the suites section. For instance, let's define two suites, homepage and payment:
suites: {
homepage: '../e2e/homepage/**/*.e2e-spec.ts',
payment: '../e2e/payment/**/*.e2e-spec.ts'
}
The following command will only run the homepage-related tests:
protractor ./config/protractor.conf.js --suite homepage