Dos and Don'ts on building testable UIs for web applications. Presented at TAQELAH Singapore meetup on 25 Jan 2019. Watch the talk here: https://www.youtube.com/watch?v=5xzcC7dgXe4

1. How to build testable UIs
@taishiling

2. Tai Shi Ling
Co-founder & CEO, UI-licious
Been building web apps since the golden era of
JQuery.
I used to write buggy code.
And I still do.
That’s why I write tests too. :)

3. Attitudes

4. Back-end
“How can we make the code
more testable?”

5. Front-end
“It’s QA’s job.”

6. That’s wrong!

7. // Selenium
driver.find_element_by_xpath("//*[@id="root"]/div[3]/div[2]/di
v/form/div[1]/div/input").send_keys(“hello@uilicious.com”)
driver.find_element_by_xpath("//*[@id="root"]/div[3]/div[2]/di
v/form/div[2]/div/input").send_keys(“secret”)
driver.find_element_by_xpath("//*[@id="root"]/div[3]/div[2]/di
v/form/button[2]").click()
This is what too many UI tests look like

9. // Selenium
driver.find_element_by_xpath("//*[@id="root"]/div[3]/div[2]/di
v/form/div[1]/div/input").send_keys(“hello@uilicious.com”)
driver.find_element_by_xpath("//*[@id="root"]/div[3]/div[2]/di
v/form/div[2]/div/input").send_keys(“secret”)
driver.find_element_by_xpath("//*[@id="root"]/div[3]/div[2]/di
v/form/button[2]").click()

10. // Selenium
driver.find_element_by_xpath("//*[@id="root"]/div[3]/div[2]/di
v/form/div[1]/div/input").send_keys(“hello@uilicious.com”)
driver.find_element_by_xpath("//*[@id="root"]/div[3]/div[2]/di
v/form/div[2]/div/input").send_keys(“secret”)
driver.find_element_by_xpath("//*[@id="root"]/div[3]/div[2]/di
v/form/button[2]").click()
Hey, this test is broken…

11. // Selenium
driver.find_element_by_xpath("//*[@id="root"]/div[3]/div[2]/di
v/form/div[1]/div/input").send_keys(“hello@uilicious.com”)
driver.find_element_by_xpath("//*[@id="root"]/div[3]/div[2]/di
v/form/div[2]/div/input").send_keys(“secret”)
driver.find_element_by_xpath("//*[@id="root"]/div[3]/div[2]/di
v/form/button[2]").click()
Wonder why...

12. // Selenium
driver.find_element_by_xpath("//*[@id="root"]/div[3]/div[2]/di
v/form/div[1]/div/input").send_keys(“hello@uilicious.com”)
driver.find_element_by_xpath("//*[@id="root"]/div[3]/div[2]/di
v/form/div[2]/div/input").send_keys(“secret”)
driver.find_element_by_xpath("//*[@id="root"]/div[3]/div[2]/di
v/form/button[2]").click()
Hmm...

13. // Selenium
driver.find_element_by_xpath("//*[@id="root"]/div[3]/div[2]/di
v/form/div[1]/div/input").send_keys(“hello@uilicious.com”)
driver.find_element_by_xpath("//*[@id="root"]/div[3]/div[2]/di
v/form/div[2]/div/input").send_keys(“secret”)
driver.find_element_by_xpath("//*[@id="root"]/div[3]/div[2]/di
v/form/button[2]").click()
… WTF does this do?

14. The reason why UI tests looks like this vomit...
// Selenium
driver.find_element_by_xpath("//*[@id="root"]/div[3]/div[2]/di
v/form/div[1]/div/input").send_keys(“hello@uilicious.com”)
driver.find_element_by_xpath("//*[@id="root"]/div[3]/div[2]/di
v/form/div[2]/div/input").send_keys(“secret”)
driver.find_element_by_xpath("//*[@id="root"]/div[3]/div[2]/di
v/form/button[2]").click()

15. The reason why UI tests looks like this vomit...
// Selenium
driver.find_element_by_xpath("//*[@id="root"]/div[3]/div[2]/di
v/form/div[1]/div/input").send_keys(“hello@uilicious.com”)
driver.find_element_by_xpath("//*[@id="root"]/div[3]/div[2]/di
v/form/div[2]/div/input").send_keys(“secret”)
driver.find_element_by_xpath("//*[@id="root"]/div[3]/div[2]/di
v/form/button[2]").click()
...is because the UI is not accessible.

16. Think
How is a screen
reader any different
from a UI testing tool?

17. How to build testable UIs

18. Clickable elements
DON’T:
- Use generic elements like <div> or <span>
for clickable elements. Some test engines
ignore generic elements if you are
attempting a click action.
DO:
- Use semantic HTML: If an element is
clickable, use <button>, or <a> if it is a link.

19. Custom components
DON’T:
- Create a purely javascript custom
component for dropdown, radio buttons,
checkboxes, date pickers.
DO:
- Implement fallbacks for custom components
using native HTML elements.
There’s nothing wrong with the good old
<select> element!

20. Custom components
Please add a date field for
keyboard input!
DON’T:
- Create a purely javascript custom
component for dropdown, radio buttons,
checkboxes, date pickers.
DO:
- Implement fallbacks for custom components
using native HTML elements.
- E.g. For custom date pickers, add <input
type=’date’/> elements as a fallback.

21. Here’s an example from MDN.
Custom components
DON’T:
- Create a purely javascript custom
component for dropdown, radio buttons,
checkboxes, date pickers.
DO:
- Implement fallbacks for custom components
using native HTML elements.
- E.g. For custom date pickers, add <input
type=’date’/> elements as a fallback.
- Use the ARIA “role” attribute

22. Icons
DON’T:
- Use icons without labels, because tests
would otherwise have to be written using
CSS or XPATHs which makes the test
fragile.
DO:
- Use “title” or “aria-label” for an icon if you
really want to save on that screen real
estate

23. Example test based on “title” or “ARIA-label”
// Selenium
driver.find_element_by_xpath(
"//*[@title="Google apps"]"
).click()

24. By the way… UI-licious automatically picks up
ARIA-labels and titles!
Example: https://snippet.uilicious.com/test/public/5CRWgffVmkHzvKZrziURCG

25. General Tips
● Write semantic HTML
● Use the native elements
● Label, label, label
○ <label for>
○ aria-label
In other words, make your UI accessible.

26. Let’s get back to this nasty thing...
// Selenium
driver.find_element_by_xpath("//*[@id="root"]/div[3]/div[2]/di
v/form/div[1]/div/input").send_keys(“hello@uilicious.com”)
driver.find_element_by_xpath("//*[@id="root"]/div[3]/div[2]/di
v/form/div[2]/div/input").send_keys(“secret”)
driver.find_element_by_xpath("//*[@id="root"]/div[3]/div[2]/di
v/form/button[2]").click()

27. Let’s test it with UI-licious
Example: https://snippet.uilicious.com/test/public/Ku2YRHYW98D2K3sbyN3DbZ

28. How to build testable UIs
@taishiling