This talk will bring you the dark secret of the Protractor end-to-end test framework and share the tips and tricks to fill your hacker's mind.

1. Make the Protractor GREAT again!
Protractor: The Hacker Way
Duotify Inc.
CTO / Will 保哥
https://blog.miniasp.com

2. The definition of Hacker
2
A computer hacker is any skilled computer
expert that uses their technical knowledge
to overcome a problem.
“
”
Hacker - Wikipedia

3. Protractor: The problems
How we suffered by Protractor

4. Protractor: Getting started
• Install Angular CLI globally
- npm install -g @angular/cli
• Generate an Angular app
- ng new demo1 --routing --style css
- cd demo1
• Update WebDriver to match your browser version
- npx webdriver-manager update
• Run E2E scripts (Protractor) (DO NOT use ng e2e directly)
- npx protractor e2e/protractor.conf.js
4

5. A basic E2E test case
• DESCRIPTION
- Make sure Will Huang (保哥) are shown on the Speakers page
• STEPS
1. navigate to https://2019.ng-my.org/
2. click the SPEAKERS on the main menu
3. click the Will Huang (保哥) on the speakers list
4. validate the DOM contains Will Huang (保哥)
5

6. The code
6

7. Run the E2E scripts
7
npx protractor e2e/protractor.conf.js

8. Check for the stack trace
8

9. What's the problem?
• Error message
- Failed: No element found using locator: By(link text, Speakers)
• Line number of the error in the source code
- Find it on the stack trace. (debugging experience are so bad.)
• The problem should be this line
- element(by.linkText('Speakers'));
• Root cause
- by.linkText and some other Locator API are case-sensitive!
- It will find the element by what it rendered.
9

10. by.linkText is case-sensitive!
• Problem
- element(by.linkText('Speakers'));
• Solution
- element(by.linkText('SPEAKERS'));
• Is that make any sense?
- It looks buggy, but it doesn't. It because it's End-to-End testing!
- What you write is not what your expected!
10

11. Fix the first bug and run it again
• The error message becoming vague
• You can still get the line number in the stack trace.
11

12. What's the problem?
• Error message
- Expected '' to contain 'Will Huang (保哥)'.
• Line number of the error in the source code
- Find it on the stack trace
• The problem should be this line
- element(by.xpath('//main[@id="team"]/my-
modal/section/div/div/div/div/div'))
• Root cause
- The animation cause the Locator API unable to find DOM
at that moment! 12

13. Overcome animation issues
1. Wait for 2 seconds till animation stopped
await browser.sleep(2000); // Magic number
2. Use ExpectedConditions to wait for DOM show up
await browser.wait(
EC.textToBePresentInElement(elem4, text4),
5000);
13

14. Use browser.sleep
14

15. Use ExpectedConditions
15

16. Final result
16

17. Protractor Recorder
Write E2E scripts at rocket speeds

18. Protractor Recorder (Preview)
• Protractor Recorder is based on amazing Katalon Recorder
- It's free and open source.
• Features
- Tailored just for Protractor users
- Support TypeScript code generation
- Support async/await syntax ( SELENIUM_PROMISE_MANAGER: false )
- Support ExpectedConditions for better debugging experience
- Support non-Angular E2E testing
• Upstream PR is on the way
- Add protractor typescript template #23

19. Best practices
• by.linkText / by.buttonText are case-sensitive!
element(by.linkText('SPEAKERS')).click();
• Fixed window size for your E2E testing
browser.manage().window().setSize(1024, 768);
• DO NOT use ng e2e to run protractor in your daily job
ng e2e --dev-server-target= --webdriver-update=false
npx webdriver-manager update
npx protractor e2e/protractor.conf.js
19

20. Chrome Options
For your better E2E testing

21. protractor.conf.js

22. Useful chromeOptions
• Fixed window size
--start-maximized
--window-size=1024,768
• Leverage dual monitors
--window-position=2560,0
• Keep things dirty (when needed)
--user-data-dir=G:/Chrome
22
• Headless Chrome
--headless
• Miscellaneous
--proxy-server=localhost:8888
--ignore-certificate-errors
--disable-popup-blocking
--disable-gpu
--disable-infobars

23. Anti-robot detection
Hide the WebDriver footprints

24. Robot detection
24

25. How to hide the WebDriver footprints
• Fiddler: Customize Rule
static function OnBeforeResponse(oSession: Session) {
25
oSession.utilReplaceInResponse(
'<head>',
'<head>' +
' <script>' +
' const __base = navigator["__proto__"];' +
' delete __base.webdriver;' +
' navigator["__proto__"] = __base;' +
' Object.defineProperty(navigator, "languages", {' +
' get: function() { return ["en-US", "en"]; },' +
' });' +
' </script>')

26. Links
• Protractor Recorder
- https://github.com/doggy8088/protractor-recorder
• Katalon Recorder
- https://github.com/katalon-studio/katalon-recorder
• Protractor - end-to-end testing for Angular
- https://www.protractortest.org/
• Angular Taiwan
- https://angular.tw (Docs) | https://bit.ly/angulartw (Facebook)
26

27. The Will Will Web
網路世界的學習心得與技術分享
http://blog.miniasp.com/
Facebook
Will 保哥的技術交流中心
http://www.facebook.com/will.fans
Twitter
https://twitter.com/Will_Huang
Follow Me

28. THANK YOU!
2019
2019/11/2-3