What is protractor?
Protractor is an end-to-end test framework for Angular and AngularJS applications. It runs tests against your application running in a real browser, interacting with it as a user would.
What are protractor's main functionalities?
End-to-End Testing
Protractor allows you to write end-to-end tests for your Angular applications. The code sample demonstrates navigating to an AngularJS website, selecting elements, and making assertions about their state.
const { browser, element, by } = require('protractor');
browser.get('http://www.angularjs.org');
const todoList = element.all(by.repeater('todo in todoList.todos'));
expect(todoList.count()).toEqual(2);
expect(todoList.get(1).getText()).toEqual('build an AngularJS app');
Automatic Waiting
Protractor automatically waits for Angular to finish rendering and for any outstanding $http calls to be completed before performing the next action. This reduces the need for explicit waits in your tests.
const { browser, element, by } = require('protractor');
browser.get('http://www.angularjs.org');
const addButton = element(by.css('[value="add"]'));
addButton.click();
const todoList = element.all(by.repeater('todo in todoList.todos'));
expect(todoList.count()).toEqual(3);
Integration with Jasmine
Protractor integrates seamlessly with the Jasmine testing framework, allowing you to write tests in a behavior-driven development (BDD) style. The code sample shows a Jasmine test suite that adds a new todo item and verifies its presence.
describe('angularjs homepage todo list', function() {
it('should add a todo', function() {
browser.get('http://www.angularjs.org');
element(by.model('todoList.todoText')).sendKeys('write a protractor test');
element(by.css('[value="add"]')).click();
const todoList = element.all(by.repeater('todo in todoList.todos'));
expect(todoList.count()).toEqual(3);
expect(todoList.get(2).getText()).toEqual('write a protractor test');
});
});
Other packages similar to protractor
cypress
Cypress is a next-generation front-end testing tool built for the modern web. It offers a more developer-friendly experience with features like time travel, real-time reloads, and automatic waiting. Unlike Protractor, Cypress does not require WebDriver and runs directly in the browser.
webdriverio
WebdriverIO is a popular testing framework that allows you to run tests based on the WebDriver protocol and Appium. It supports both synchronous and asynchronous commands and can be used for both web and mobile applications. WebdriverIO is more versatile compared to Protractor, which is specifically designed for Angular applications.
testcafe
TestCafe is a Node.js tool to automate end-to-end web testing. It works without WebDriver and is compatible with any modern web application. TestCafe provides a simple syntax and powerful features like parallel test execution and easy integration with CI/CD pipelines. Unlike Protractor, TestCafe is framework-agnostic and can be used with any web application.
Protractor
Protractor is an end to end test framework for Angular applications built on top of webdriverJS.
To run the sample tests
Clone the github repository. Install the selenium-webdriver npm module
npm install selenium-webdriver
Start up a selenium server. By default, the tests expect the selenium server to be running at http://localhost:4444/wd/hub.
Start the test application
cd testapp; scripts/web-server.js
You can access the test app at
http://localhost:8000/app/index.html
Run the tests with
jasmine-node spec
mocha test
To just use Protractor
Start a selenium server.
Install the npm modules for protractor, which will install selenium-webdriver if it's not already there:
npm install protractor
In your test file, set up protractor:
var webdriver = require('selenium-webdriver');
var protractor = require('protractor');
// Configure and build your webdriver instance.
var ptor = protractor.wrapDriver(driver);
See spec/testAppSpec.js for examples of use.
Appendix A: Setting up a standalone selenium server
WebdriverJS does not natively include the selenium server - you must start a standalone selenium server.
Download the selenium server. All you need is the latest selenium-server-standalone.
To use with chrome browsers, download chromedriver.
More information about chromedriver
Start the selenium standalone with
java -jar selenium-server-standalone-2.x.x.jar