Just when you thought the internet couldn't get any more awesome, you discover that you've got "web super powers"!!
Why?
Testing a web page/site/app to confirm that it is working as expected used to be difficult and slow. So most web developers/designers did not bother with automated testing. Instead most people do (manual) "click though" or "visual regression" testing. It turns out us humans can literally be blind to spotting changes during manual testing.
Other uses? Automated testing can help with web scraping too...
What?
This guide is an introduction to "web super powers"
for complete beginners.
Unusually for a dwyl "learn" tutorial
we will be focussing on learning two tools
in the next 20-30 minutes.
(We usually try and learn/teach one thing at a time,
but in this case the tools go together like electricity ⚡ and a lightbulb💡!)
Daydream
Daydream is an extension for the Google Chrome web browser that allows you to record your actions into a script you can re-play!
- Google Chrome Extension store: https://github.com/segmentio/daydream#google-chrome
- GitHub: https://github.com/segmentio/daydream
Nightmare.js
Nightmare.js is a JavaScript library that
lets you automate browser interaction!
Anything that a human can do in a web browser can be automated by writing
a small Nightmare.js script.
- Website: http://nightmarejs.org (which really does not do it justice!)
- GitHub: https://github.com/segmentio/nightmare
Not Covered
Awkwardly, Google recently decided to call their Virtual Reality (VR project "Daydream" ... see google.com/daydream), this tutorial is not for building a "VR" app ... but if anyone asks us we will gladly write a "guide to building VR apps"!
Who?
It is a "cliché" to say that your product/service is "for everyone"
and instead we should "focus" on a specific "target user" ...
So, here goes: Daydream is useful only to people that use web browsers
and want to learn how to automate tasks
so they can get more done in less time.
Everyone else should stick with their existing activities.
There, a nice specific "target user"
for this tutorial; better...? 😜
Nightmare is probably only useful to the people making the web site/app
because it's more "cody" ...
but as you will (hopefully) see by the end
of 30 mins of learning "web super powers",
the code is quite simple!
Are You New To Testing?
While this tutorial has no pre-requisites (other than a computer & Chrome web browser), we have written an introductory step-by-step guide to help anyone learn "Test Driven Development" (TDD).
What about Automated Testing?
Automated testing refers to testing automated user interactions. Daydream and Nightmare automate the usual clicks and behaviours that a human would perform, so you don't have to!
How?
The reason we have organized the tutorial with Daydream first is that you don't need to know Nightmare.js to use Daydream, and it can be used by people without "coding" experience.
Daydream walkthrough
This tutorial assumes that you have node.js installed and Nightmare installed as a dependency
Add Daydream to Chrome
- To begin add Daydream to your Chrome extensions. You should now have a camera icon in the top right corner of your browser.
Let's get started
-
Pick a user journey that you want to test. Start small. We'll start with the following journey:
From this README > click the giphy link in the tutorial description at the top > arrive at a gif with the hashtag 'nightmare'
This is what it will look like:
-
Before starting the recording make sure your browser is on the page you wish to start on. In our case it's this README.
-
To start the test click the camera symbol. It will turn green to show it is recording.
-
The first action you need the script to record is the url of the page you are on. To do this refresh your page (it will appear as
.goto(www....)in your finished script). -
Next navigate as you normally would, following the path that you want the test to take. So for this test you would click on the giphy link in the tutorial description.
- This test is only a short one and so having clicked on the giphy link and having arrived on the giphy #nightmare page we are ready to end the recording. To do this, stop the recording by clicking on the green camera symbol. It will turn black to show recording has ended. You will see a blue notification which indicates that you've recorded a script:
- Click this to see the recorded script (the bit of code you'll need to use in your project for the test). Copy and paste this code into a new file in your project.
Turning the Daydream script into a Nightmare test
Daydream does the hard work of recording our actions into a Nightmare test. However, we still need to add to the code it gives us for our test to work. Let's understand what Daydream has done for us:
1. Set up your code to run Nightmare tests
2. Written the code that tracks the user's journey throughout the code (ie. going to a given url, clicking on a button)
If you're non-technical try making sense of the commands in part 2 (on the screenshot). They represent common user actions such as clicking on a page or taking a screenshot. The text within the parentheses indicates what these commands apply to ie. what html/css element is being clicked on.
Time to amend part 3
Now that you have your test set up and the journey you want it follow, you need to add what it is you're going to test this journey against. In other words, how can the computer be sure that the page it's landed on is the right one? What parts of the page do you want to make sure look the way they should? Let's use our example to flesh this out.
Daydream provides some basics here as shown in part 3. It's handling errors for you and is going to print the result. However before it can print result you need to define what result is. This is done using the .evaluate method which comes before .end.
Here's the evaluate method for our giphy example:
.evaluate takes a function, whatever this function returns is then channeled into .then as your result. In our example the .evaluate method returns the url of the page that the test ends on. We're expecting result to be the giphy url. At the moment the .then method is simply going to log what .evaluate returns. To make our tests more user friendly we can change this to show whether our test result should be a pass or fail, like so:
Now our .then function receives the url that the test ended on (result). It checks if result matches the giphy url we expected. If the two match it will log that the test has passed ✅. If the two do not match then it will log that the test has failed ❌ as well as the expected and recieved urls.
The test is ready, let's run it and see what happens! ✨
To run the test type node followed by the file path into the command line and press enter. You should get:
🌟 Congratulations, you've successfully created your first automated test! 🌟
Commands to add
- screenshot (and viewing screenshots)
- click
- go to
- Ways to get info from the dom ie. html/css elements
- Change Daydream script screenshot to include screenshot
How to Disable a Chrome Extension when Not In Use
- In your Chrome Browser, visit: chrome://extensions/