End-to-End Testing with ProtractorAlexander Grischuk

Senior QA Engineer

@HelloFresh

Udemy

What is End-to-End Testing ?

End-to-end testing is a technique used to test whether the flow of an application right

from start to finish is behaving as expected. The purpose of performing end-to-end

testing is to identify system dependencies and to ensure that the data integrity is

maintained between various system components and systems.

Why it is actually End-to-End ?The entire application is tested for critical functionalities such as communicating with

the other systems, interfaces, database, network, and other applications.

Interaction with: Frontend - Backend - DB - API. View - From user perspective!

ProtractorProtractor is an end-to-end test framework for AngularJS applications(not only - but

mainly focused on them). Protractor runs tests against your application running in a

real browser, interacting with it as a user would.

Basically, it is just an npm module

http://angular.github.io/protractor/

End-to-End vs Unit TestsEnd-to-End

● Interact with the entire application stack

● Focused on what the user experiences

● Runs in a browser

Unit

● Interact with a single, isolated unit at a time

● Focused on the functionality of the code

● Runs in the terminal

How WebDriver works?

Direct Connect to Google Chrome Connecting Directly to Browser Drivers

Protractor can test directly against Chrome and Firefox without using a Selenium

Server. To use this, in your config file set directConnect: true.

directConnect: true - Your test script communicates directly Chrome Driver or Firefox

Driver, bypassing any Selenium Server. If this is true, settings for seleniumAddress and

seleniumServerJar will be ignored. If you attempt to use a browser other than Chrome

or Firefox an error will be thrown.

The advantage of directly connecting to browser drivers is that your test scripts may

start up and run faster.

Locators

Locators

element(by.id('purchase-

button'))

by.css

<div class=“primary

header”>Protractor</div>

by.css(‘.primary.header');

by.binding(model)

<div>{{name}}</div>

by.binding('name');

by.id

Locators

element(by.linkText

(‘protractor));

by.xpath

element(by.xpath(“//*

[@id='login-section-form']

/p[2]/a”))

by.repeater

repeater("cat in pets")

by.linkText

Run tests by suites/* config.js */

suites: { cart: 'pages/cart/**/*.spec.js',home: 'pages/home/**/*.spec.js',search: 'pages/search/**/*.spec.js'

}

Run them separately by suite:

protractor config.js --suite homeprotractor config.js --suite cartprotractor config.js --suite search

Where to run the tests:

We can run the tests in different

environments:

● Locally

● On CI (Jenkins/TeamCity)

● Trigger from CI to run in cloud

● BrowserStack / SauceLabs

Cloud Integration

Big players● AWS ( https://aws.amazon.com/device-farm/ )

● BrowserStack ( https://www.browserstack.com/automate )

● Sauce Labs ( https://saucelabs.com )

Section 4: Summary● put under Git (‘ git init ’ / ‘ git add . ’ / git push origin master)

● beforeEach and afterEach functions

● npm scripts usage

● how to work with ‘faker’ library

Section 5: Summary● Create more specs

● Change folder/files structure

● Organize code

● Learn how to run tests by suite

● Implement Page Object pattern

Keep In Mind When You Write Tests● Make them independent

● Executes well in a test suite (when you run test in a suite one after another)

● Modular

● Interaction with others

● Test one particular thing/functionality

● Avoid a lot of test steps (short)

● Easily maintainable and scalable

Page Object Pattern● Makes tests more readable and robust

● Improve the maintainability of tests (frequent UI changes)

● Encapsulation

● Best practice

● Keep things organized

● Easy to learn and understand

Guidelines for Writing E2E tests with Protractor1. Protractor styleguide – Carmen Popoviciu and Andres Dominguez https://www.

youtube.com/watch?v=-lTGnYwnEuM

2. Repo: https://github.com/CarmenPopoviciu/protractor-styleguide

3. Protractor API: https://angular.github.io/protractor/#/api

Using Promises● everything is a promise

● .then()

● asynchronous

● how to organize asynchronous tests steps in synchronous manner

Multi Capabilities● Run test thru different browsers locally and in the cloud

● Inside multiCapabilities: [ {}, {}, {} ]

● Define browser name and version, platform

● Cloud key if necessary

Section 6: Summary● Direct connect to Browser

● Guidelines and best practices

● Multi capabilities

● Cloud Integration

● .env dist

● Promises

What’s next?● Write more tests

● Do not afraid to experiment

● Give your feedback

● Code - practice - DO MORE!

Take course on Udemy!