Upload
alexander-grischuk
View
455
Download
5
Embed Size (px)
Citation preview
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!