Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Protractor: The Hacker way (NG-MY 2019)

1,404 views

Published on

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.

Published in: Technology
  • Be the first to comment

Protractor: The Hacker way (NG-MY 2019)

  1. 1. Make the Protractor GREAT again! Protractor: The Hacker Way Duotify Inc. CTO / Will 保哥 https://blog.miniasp.com
  2. 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. 3. Protractor: The problems How we suffered by Protractor
  4. 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. 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. 6. The code 6
  7. 7. Run the E2E scripts 7 npx protractor e2e/protractor.conf.js
  8. 8. Check for the stack trace 8
  9. 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. 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. 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. 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. 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. 14. Use browser.sleep 14
  15. 15. Use ExpectedConditions 15
  16. 16. Final result 16
  17. 17. Protractor Recorder Write E2E scripts at rocket speeds
  18. 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. 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. 20. Chrome Options For your better E2E testing
  21. 21. protractor.conf.js
  22. 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. 23. Anti-robot detection Hide the WebDriver footprints
  24. 24. Robot detection 24
  25. 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. 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. 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. 28. THANK YOU! 2019 2019/11/2-3

×