Side deck from my London's Calling 2019 talk on UI Testing with Selenium and Node JS. Including standard Salesforce and Lightning Web Components.

1. UI Testing with Selenium and Node
​Keir Bowden
​CTO, BrightGen
​keirbowden@brightgen.com
​@bob_buzzard
​

2. Selenium
​Automates Browsers
• That's it!
​Primary use case is testing
• Typically brittle and non-comprehensive
• Covers a lot of bases

3. WebDriver
Remote control interface
Introspection and control of user agent
Platform and language neutral
Test framework agnostic
Local or remote server

4. selenium-webdriver
​Node module
Official Selenium implementation
• 4.0.0-alpha.1
Other implementations are available - e.g. webdriver.io

5. Demo
Login to Salesforce

6. Promise Manager
Looks synchronous :

7. Promise Manager
Is not synchronous

8. Promise Manager
Resolve promises

9. Key Functions
WebDriver.get(<url>)
• Opens URL in remote control browser
WebDriver.wait(until.<condition>, <timeout>)
• waits for something, for <timeout> millseconds
WebDriver.findElement(By.<mechanism>)
• Locates element on page
• By - name, className, id, css, xpath

10. Key Functions
WebElement.sendKeys(<key sequence>)
• Types key sequence in DOM element
• Modifier keys are supported (SHIFT, CONTROL, ALT, META)
WebElement.click()
• Clicks on a DOM element
WebElement.findElement(By.<mechanism>)
• Locates descendant element

11. Demo
Create an opportunity

12. https://medium.com/rate-engineering/a-guide-to-working-with-shadow-dom-using-selenium-b124992559f
Web Components - Shadow DOM
Not accessible via
webdriver.findElement()
Shadow Host
shadowHost = driver.findElement(...);
driver.executeScript("return arguments[0].shadowRoot",
shadowHost);

13. Lightning Web Components
Nothing!
Does not use native shadow DOM - yet!
Tests will break after switch

14. Demo
Lightning Web Component
Search Contacts

15. Key Takeaways (1)
Add one item at a time
Test after each item
Keep scenarios short
Use modules
Baby Steps!

16. Key Takeaways (2)
Use XPath
//label/span[contains(text(), "Opportunity Name")]/../../input
//label - any descendant node containing a label
/span - containing a span
[contains(text() - whose text contains
/../.. - whose grandparent node
"Opportunity Name"] - this string literal
/input - contains an input element

17. XPath
<div ... >
<label ...>
<span ...>Opportunity Name</span>
<span ...>*</span>
</label>
<input ...>
</div>

18. XPath
Test in Browser

19. Useful Links
bobbuzz.me.uk/selenium - Selenium HQ
bobbuzz.me.uk/2GPuDVS - selenium-webdriver node package
bobbuzz.me.uk/LC2019Repo - Example repo from this talk
bobbuzz.me.uk/2SIISTP - Selenium and the Shadow DOM

20. Q & A

21. Thank You
​Keir Bowden
​CTO, BrightGen
​keirbowden@brightgen.com
​@bob_buzzard
​
Remember to tell us what you think in the event survey
www.LondonsCalling.net/survey/