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,871 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
  • I think you need a perfect and 100% unique academic essays papers have a look once this site i hope you will get valuable papers, ⇒ www.HelpWriting.net ⇐
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ⇒ www.HelpWriting.net ⇐ is a good website if you’re looking to get your essay written for you. You can also request things like research papers or dissertations. It’s really convenient and helpful.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Break up or make up? The #1 phrase that will make your man come crawling back. Read more now. ★★★ https://t.cn/A6yxiEz1
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

×