Protractor: The Hacker way (NG-MY 2019)
2 likes2,238 views
The document discusses the challenges and solutions related to using Protractor for end-to-end testing in Angular applications. It highlights common issues such as case-sensitivity in element locators and problems caused by animations, providing debugging tips and best practices. Additionally, it introduces Protractor Recorder and its features to enhance the testing experience.
![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](https://image.slidesharecdn.com/protractor-thehackerway-190707044311/85/Protractor-The-Hacker-way-NG-MY-2019-12-320.jpg)
![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>')](https://image.slidesharecdn.com/protractor-thehackerway-190707044311/85/Protractor-The-Hacker-way-NG-MY-2019-25-320.jpg)
Protractor: The Hacker way (NG-MY 2019)
- 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
- 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
- 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
- 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