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.
Note to experts
- 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.
- 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:
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
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
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.
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
To wait, write a number in milliseconds. Here we wait one second:
Loading a new page
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
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
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
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.