Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

How to build testable UIs

57 visualizaciones

Publicado el

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

Publicado en: Software
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

How to build testable UIs

  1. 1. How to build testable UIs @taishiling
  2. 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. 3. Attitudes
  4. 4. Back-end “How can we make the code more testable?”
  5. 5. Front-end “It’s QA’s job.”
  6. 6. That’s wrong!
  7. 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
  8. 8. // 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()
  9. 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() Hey, this test is broken…
  10. 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() Wonder why...
  11. 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() Hmm...
  12. 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() … WTF does this do?
  13. 13. 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()
  14. 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() ...is because the UI is not accessible.
  15. 15. Think How is a screen reader any different from a UI testing tool?
  16. 16. How to build testable UIs
  17. 17. 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.
  18. 18. 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!
  19. 19. 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.
  20. 20. 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
  21. 21. 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
  22. 22. Example test based on “title” or “ARIA-label” // Selenium driver.find_element_by_xpath( "//*[@title="Google apps"]" ).click()
  23. 23. By the way… UI-licious automatically picks up ARIA-labels and titles! Example: https://snippet.uilicious.com/test/public/5CRWgffVmkHzvKZrziURCG
  24. 24. General Tips ● Write semantic HTML ● Use the native elements ● Label, label, label ○ <label for> ○ aria-label In other words, make your UI accessible.
  25. 25. 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()
  26. 26. Let’s test it with UI-licious Example: https://snippet.uilicious.com/test/public/Ku2YRHYW98D2K3sbyN3DbZ
  27. 27. How to build testable UIs @taishiling

×