We need a better way to test (Front End PDX Meetup)

Transcript

1. We need a better way to test
   Kevin Lamping
   
   @klamping
   

   View Slide

2. –Me IRL
   “I fixed the css.
   It broke the website.”
   

   View Slide

3. –My PM
   “Didn’t you test it?”
   

   View Slide

4. –Me
   “I tested most of it…”
   

   View Slide

5. Why don’t we test?
   • We do, we just don’t keep testing
   • We do, just not in *ALL THE BROWSERS*
   • We do, just not with every variation
   • We do, we’re just bad at it
   A few reasons:
   1 - We get fatigued. Small things change between when we start our dev/testing and when we finish (code merges from other teams, software updates)
   
   2 - Not too hard to explain. there are an insane amount of browsers/devices and combinations thereof
   
   3 - Data gets *really* complex. Users come in from a multitude of flows…
   
   4 - We don’t catch all the changes. Change blindness. Story of login page issue with padding
   

   View Slide

6. How can we fix this?
   • Make testing easy enough to include in daily workflow
   • Run tests in multiple browsers via Selenium
   • Use code to store user scenarios
   • Use computers to remember details
   Some ideas:
   1 - We get fatigued. Small things change between when we start our dev/testing and when we finish (code merges from other teams, software updates)
   
   2 - Not too hard to explain. there are an insane amount of browsers/devices and combinations thereof
   
   3 - Data gets *really* complex. Users come in from a multitude of flows…
   
   4 - We don’t catch all the changes. Change blindness. Story of login page issue with padding
   

   View Slide

7. The MAGICAL solution?
   MAGICAL
   

   View Slide

8. Test Automation
   The wonderful, magical, solve-everything
   and save the world solution*
   *almost as cool as nodejs robots
   

   View Slide

9. Functional/UI
   Testing
   JS Unit
   Testing
   There are lots of different types of testing. We’re talking about UI/Browser/Selenium/Functional testing. Basically, the ability to run user actions on a site via a script.
   

   View Slide

10. Functional/UI
    Testing
    JS Unit
    Testing
    The stuff you
    pretend is healthy
    Unit testing tests specific code
    

    View Slide

11. Functional/UI
    Testing
    JS Unit
    Testing
    The stuff you
    pretend is healthy
    The reason
    you’re here
    UI testing checks behavior/the interface/the actual site
    

    View Slide

12. Selenium
    • Uses real browsers
    • Programmatic control of them
    • Free & open-source
    De facto standard for functional testing in the industry.
    
    Normally requires learning Ruby or Java or Python.
    
    JavaScript library is really frustrating to use.
    

    View Slide

13. WebdriverIO
    • Node.js based
    • Simplifies commands
    • Supportive community
    • Integrations with popular tools
    

    View Slide

14. –Me about an hour ago
    “It’s like jQuery,
    but for testing”
    

    View Slide

15. Selenium
    Support
    Streamlined
    Commands
    Built-in 3rd party
    integrations
    BackstopJS
    WebdriverIO
    Selenium-
    Webdriver
    NightWatch.js
    

    View Slide

16. Extensive
    Documentation
    Custom services
    & reporters
    Online Course
    BackstopJS
    WebdriverIO
    Selenium-
    Webdriver
    NightWatch.js
    Nightwatch looks like a really healthy alternative
    

    View Slide

17. Testing a Login
    https://testyourlog.in
    

    View Slide

18. frontendpdx
    for 25% off this week
    learn.webdriver.io
    

    View Slide