Writing end-to-end tests using Protractor

Protractor is an end-to-end (E2E) testing framework specifically designed for AngularJS applications. It works on top of WebDriverJS and Selenium WebDriver, enabling automated UI testing for web applications.

1. Setting Up Protractor

1.1 Install Protractor

First, install Protractor globally using npm:

npm install -g protractor

Verify installation:

protractor --version

1.2 Install WebDriver Manager

Protractor requires a Selenium WebDriver to run tests:

webdriver-manager update
webdriver-manager start

2. Creating a Basic Protractor Test

2.1 Project Structure

A typical Protractor project follows this structure:

/protractor-tests
  ├── conf.js
  ├── spec.js
  ├── package.json

2.2 Writing a Configuration File (`conf.js`)

This file defines test settings:

exports.config = {
    directConnect: true,  // Runs tests without starting Selenium server
    framework: 'jasmine', // Uses Jasmine as the test framework
    specs: ['spec.js'],   // Test scripts to run
    capabilities: {
        browserName: 'chrome' // Runs tests in Chrome browser
    }
};

2.3 Writing a Sample Test (`spec.js`)

describe('AngularJS Homepage', function() {
    it('should have a title', function() {
        browser.get('https://angularjs.org');
        expect(browser.getTitle()).toEqual('AngularJS — Superheroic JavaScript MVW Framework');
    });
});

2.4 Running the Test

Run the test using:

protractor conf.js

3. Locating Elements in Protractor

3.1 By ID

element(by.id('username')).sendKeys('testUser');

3.2 By Model (`ng-model`)

element(by.model('user.email')).sendKeys('test@example.com');

3.3 By Binding (`{{ expression }}`)

expect(element(by.binding('username')).getText()).toEqual('testUser');

3.4 By Button Text

element(by.buttonText('Login')).click();

3.5 By CSS Selector

element(by.css('.btn-primary')).click();

4. Performing User Actions

4.1 Entering Text in Input Fields

element(by.model('user.email')).sendKeys('test@example.com');

4.2 Clicking a Button

element(by.css('.login-button')).click();

4.3 Clearing an Input Field

element(by.model('user.password')).clear();

4.4 Selecting from a Dropdown

element(by.cssContainingText('option', 'Admin')).click();

5. Handling Asynchronous Operations

5.1 Waiting for an Element to Appear

var EC = protractor.ExpectedConditions;
var loginButton = element(by.css('.login-button'));

browser.wait(EC.visibilityOf(loginButton), 5000);
loginButton.click();

5.2 Waiting for URL to Change

browser.wait(EC.urlContains('/dashboard'), 5000);

6. Handling Alerts and Pop-ups

6.1 Accepting an Alert

browser.switchTo().alert().accept();

6.2 Dismissing an Alert

browser.switchTo().alert().dismiss();

6.3 Getting Alert Text

browser.switchTo().alert().getText().then(function(text) {
    console.log(text);
});

7. Running Tests on Multiple Browsers

Modify conf.js to support multiple browsers:

exports.config = {
    multiCapabilities: [
        { browserName: 'chrome' },
        { browserName: 'firefox' }
    ],
    specs: ['spec.js']
};