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
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. :)
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?
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
