by Xavi Esteve
on March 30, 2015
(4 minute read)
FeatherTest is a free Google Chrome extension I built to serve as a quick way to build simple tests and automate processes, you can also use it to fill in forms or run repetitive tasks.
When working on small projects I love to have some kind of automated testing for my code but can’t be bothered to install and setup a full-blown testing environment/framework such as Karma + Jasmine or Mocha, it’d just be overkill and a waste of my time and resources. I usually just need to click through the website, fill in some forms and check that the correct content is saving and displaying.
Here comes FeatherTest to the rescue, you don’t need any setup, can write a test in less than a minute and run it in a single click. I built it to serve as a quick way to have simple tests and automate processes. It is really flexible, you can use any JavaScript and jQuery code to write your tests and once the test is written, anyone in your team can run them from their browsers.
Note to experts
While FeatherTest will enable you and everyone in your team (even your boss) to run tests and see that your scripts/website/app is running smoothly, it is not a full-blown JavaScript testing suite. FeatherTest simply works like an automated QA person (clicking and typing stuff on the site, checking that every button works, data gets saved, etc.). If you are building the next Facebook go look somewhere else.
Requirements
- Google Chrome
- Some jQuery knowledge (to write tests, no skills needed to run them)
Step by step setup
- Install the extension
- In a blank file start with
'feathertest'and then write your test (see below for an example) - Save it as a
.txtfile and place it in your server (i.e.http://example.com/test.txt) - In Google Chrome, navigate to the website you want to test (or refresh it if it’s already open)
- Open the Developer Tools Console
- Click the FeatherTest toolbar button and paste the URL to the test file
Once you press OK the Test will start, you can press the ChomeTest button again to interrupt the test manually at any time.
In the Developer Tools Console you will see something like this, for easy debugging the number in brackets is the file line in your test:
Test example
This test below navigates to the homepage, searches for ‘speakers’, waits a second and tests that we are in the search results page and at least 6 results are displaying:
'feathertest'
location.href = '/'
$('#q').val( 'speakers' )
$('#search-button').click()
// wait one second
1000
ft.isTrue( location.pathname == '/search/speakers' )
ft.isTrue( document.querySelectorAll('li.results .item').length >= 6 )
Writing your tests
Test assertion
To test an assertion, use ft.isTrue() and place your code inside the quotes, if it returns anything true it will pass (does a non-strict double equal == comparison):
ft.isTrue( $('body').hasClass('menu-open') ) // checks if <body> has the CSS class .menu-open
ft.isTrue( document.querySelectorAll('.list-item').length == 24 ) // count that there's exactly 24 list items
If you want a test to stop completely when an assertion fails, pass true as the second parameter.
Comments
You can use comments at any time, either in its own line or at the end of the line:
console.log( $('#q').val() ) // value of the search box
Waiting
To wait, write a number in milliseconds. Here we wait one second:
1000
Loading a new page
To load a new page you can either navigate with JavaScript: location.href='/'; or simulate a link click $('a.header-logo').click();. After any page refresh instruction you will probably want to wait 10ms to avoid any code running further before the new page has loaded.
Stop the test at any time
ft.stop()
To stop the test when an assertion fails then pass true as the second parameter:
ft.isTrue( 1==1, true )
Jump to a specific line of the test
ft.step( 123 )
Jump only if a condition is met:
ft.step( 123, 1==0 )
Save and load custom variables
You can save custom variables for the duration of the test, these will get deleted at the end of the test. They can be very useful, for example, when testing account registrations.
ft.set( 'username', 'John') ft.get( 'username' ) // returns 'John'
Random number (added in v1.0.7)
You can generate a random number by using the method below, this is very useful to randomize tests (like clicking different checkboxes on a form).
ft.rand() // returns a 5 character long number ft.rand(1,9) // returns a number between 1 and 9
Further notes
If something is not working, you probably need to add a waiting time (or increase it) between instructions (the DOM may not be loaded yet).
You don’t need the trailing ; since lines are executed one at a time.
Once the test is built, it can be run by anyone, even people without coding skills.
For security purposes, tests must have a .txt extension and begin with the line 'feathertest'.
You probably want to run these tests in a local machine. While I’ve implemented some security measures in place, be extra careful when using it in a production/public server (i.e. don’t save passwords in test files since these can be read if someone guesses the URL).
If your test navigates to other pages, you might want to enable Preserve log in the Console.
The code of the extension is Open Sourced here, feel free to send pull requests although keep in mind that the purpose of FeatherTest is to be simple to use and small in size, new features should make sense.
2 comments
patt says:
this is genius!
thanks for building this testing tool Xavi, i can now run tests in a BDD way and it takes zero time to run them
Freejay says:
thanks Xavi, great tool