This is my presentation about how we use automated testing for smoke tests and functional UI tests.

1. Using Protractor to Build
Automated UI Tests
DALE SPOONEMORE @DALESPOONEMORE
DALE@SEEDTOSPOON.NET WWW.SEEDTOSPOON.NET

2. Why Use Automated Testing?
• Smoke Tests
• Know when apps are down or having performance issues
• Functional UI tests
• Tests that are tedious and time consuming
• Testing with lots of data

3. But I have unit tests…
◦ Doesn’t test the full spectrum
◦ UI tests launch browser and interact with the browser as a user
◦ Tests database, UI, server-side code, server/network hardware

4. Setup / Install
Install Node.JS (https://nodejs.org)
npm install protractor –g
webdriver-manager update
webdriver-manager start

5. Protractor config
//conf.js
exports.config = {
framework: 'jasmine',
seleniumAddress: 'http://localhost:4444/wd/hub',
specs: ['spec.js']
};

6. Basic test script
// spec.js
describe('From Seed to Spoon Smoke Test', function() {
it('should verify the main page loads', function() {
browser.get('http://www.seedtospoon.net/');
expect(element(by.css('h2.maintitle')).getText()).toEqual('Grow Your Own Food');
});
});

7. Interacting with elements
Protractor Cheat Sheet
https://gist.github.com/javierarques/0c4c817d6c77b0877fda
Find Elements by
• ID
• CSS
• Angular specific (model, binding, etc…)
•Multiple Elements with same identifiers
var list = element.all(by.css('.items));
expect(list.get(0).getText()).toBe('First’)

8. Enhancements
• Multiple Browsers
• Screenshots
protractor-screenshoter-plugin
https://www.npmjs.com/package/protractor-screenshoter-plugin
• Generate test data files
jasmine-trx-reporter
https://www.npmjs.com/package/jasmine-trx-reporter
multiCapabilities: [{
'browserName': 'firefox'
}, {
'browserName': 'chrome'
}]

9. Automating test runs
• TFS
• Hangfire.IO
• Jenkins / Grunt
• https://www.linkedin.com/pulse/automating-angular-apps-using-protractor-integrating-
continuous

10. TFS build steps – Run install

11. TFS build steps – Launch test

12. TFS build steps – Publish Test Results

13. TFS build steps – Publish Build Artifacts

14. TFS build steps – Scheduling

15. More resources:
https://www.pluralsight.com/courses/protractor-
introduction
www.slideshare.net
http://www.protractortest.org/#/
https://github.com/andresdominguez/elementor
Dale Spoonemore @dalespoonemore,@seed2spoon
dale@seedtospoon.net www.seedtospoon.net