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

Transcript

1. We need a better way to test Kevin Lamping @klamping
2. –Me IRL “I fixed the css. It broke the website.”
3. –My PM “Didn’t you test it?”
4. –Me “I tested most of it…”
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
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
7. The MAGICAL solution? MAGICAL
8. Test Automation The wonderful, magical, solve-everything and save the world solution* *almost as cool as nodejs robots
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.
10. Functional/UI Testing JS Unit Testing The stuff you pretend is healthy Unit testing tests specific code
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
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.
13. WebdriverIO • Node.js based • Simplifies commands • Supportive community • Integrations with popular tools
14. –Me about an hour ago “It’s like jQuery, but for testing”
15. Selenium Support Streamlined Commands Built-in 3rd party integrations BackstopJS WebdriverIO Selenium- Webdriver NightWatch.js
16. Extensive Documentation Custom services & reporters Online Course BackstopJS WebdriverIO Selenium- Webdriver NightWatch.js Nightwatch looks like a really healthy alternative
17. Testing a Login https://testyourlog.in
18. frontendpdx for 25% off this week learn.webdriver.io