Automated Website Testing with FeatherTest (Google Chrome extension) Run automated tests for your website in 30 seconds with this Chrome extension. No setup needed, install the extension, write some JS and click a button.

by
on March 30, 2015
(6 min 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.

Things I’m buying on Amazon this week

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

  1. Install the extension
  2. In a blank file start with 'feathertest' and then write your test (see below for an example)
  3. Save it as a .txt file and place it in your server (i.e. http://example.com/test.txt)
  4. In Google Chrome, navigate to the website you want to test (or refresh it if it’s already open)
  5. Open the Developer Tools Console
  6. 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.

Thank you for sharing the article

    
    

Xavi Esteve wrote this article on March 30, 2015 and published it in english, web design, tutorials, computers and work.

2 comments

Follow me for cool new products and interesting findings on graphic design, web development, marketing, startups, life and humor.


/*Twitter*/ !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); /*Facebook*/ (function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=28624667607";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk')); /*Google+*/ window.___gcfg = {lang: 'en-GB'};(function() {var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;po.src = 'https://apis.google.com/js/plusone.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);})();
Airbnb 30€ discount