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
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
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
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
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