Split into two parts, the first one is basics in web user interfaces, the second one - protractor/jasmine testings (structure, set configs, spec and test example).

1. KNOWLEDGE
OF WEB UI FOR
AUTOMATION
TESTING
Do you think I'm
kidding, bro?

2. OUR MAIN GOALS
• Knowledge of html, css, js and browser;
• Basics of Protractor.js framework;
• Test web page;
• Build automation test;
• Automation testing on practice;
• Questions;

3. About me
My name is Artem. I’m QA engineer at VisaHQ
company
VisaHQ – online passport and visa services with
headquarter in Washington and 20 offices in 10
countries.
Partners of our company: Google, HBO,
Thompson Reutors, Netflix.
Now I work with my team on building test
framework for global project of our company.
We write tests with the help of protractor.js and
javascript.

4. HTML, CSS, JS, BROWSER
understanding these things really helps testing
1

5. Structure of web page
ViewDOM Dynamic
Browser

6. HTML
HTML is the markup language that we use to
structure and give meaning to our web content.
HTML makes DOM structure.

7. CSS
CSS is a language of style rules that we apply for
styling of our HTML content
You can even create Gameboy with the help of CSS.

8. Javascript
JavaScript is a scripting language that helps you
to create dynamically updating content.
JavaScript programs make the behavior of web
page.
JS helps you to work with
browser events.

9. Browser
An internet browser is a software program that
you use to access the internet.
Browser generate events such as:
• click;
• contextmenu;
• mouserover / mouseout;
• submit;
• focus;
• keyup / keydown;
• DOMContentLoaded;
• transitionend

10. Protractor.js
end to end testing framework
2

11. features
E2E testing is a methodology that tests user behavior from
start to finish.
In web applications E2E testing typically automates the
actions of the end user.

12. Configuration file
Main settings:
• seleniumAddress;
• specs;
• capabilities;
• baseUrl;
• framework;
• rootElement.

13. Jasmine test framework
Jasmine is behavior driven development tool for
testing Javascript code.
Main parameters:
• describe;
• it;
• expect;
Asynchrony running with the help of functions:
• runs;
• waitsFor;

14. Specification file
Parameters:
• browser;
• element;
• by;
Methods:
• browser.get(url);
• element.all(by.css(‘.items’)) ;
• browser.isElementPresent;
• getText();
• getAttribute;
• get(1);
• sendKeys;
and more …

15. Simple test

16. Test web page3

17. Build automation test4

18. Objects of testing
main page :
• start point of testing;
• titles;
• h1;
• buttons callback;
speaker page;
• Names
• images
registration page;
• form again
map page
• address
• map

19. Structure of test
Files:
• create conf. file;
• create spec. file;
• design pattern – page object;
• locators – inside every PO file;
• support methods – base.po;
• test data file – info for fill out, expect
and check;

20. Automation testing on practice5

21. From my working experience
In nearest future every tester must know how to create
auto tests;
business must understand what is an automation
testing and know all strong sides of it;
learn programming and automation only on practice,
tutorials not really helps. Use official docs;
always use every opportunity to update your
programming skills;

22. “ Any questions?

23. 😉 Thanks for listening