ContentTester

A testing platform for testing authored content on websites

Installation

Dependencies:

• node.js for the server
• jQuery on your website

The server

• run the command 'npm install content-tester'
• make the data directory writeable
• run the command 'node app.js'
• Visit http://localhost:3000/rules to initialise the database

The client

On the computer where you'll be running the tests, create a bookmarklet in your browser (create a new bookmark and in the URL field paste the following) containing the following:

javascript:(function(){document.body.appendChild(document.createElement('script')).src='http://192.168.0.5:3000/client/client.js';})();

Don't forget to substitute the IP address with the IP address of the computer running the node.js editor

Using the editor

Components

Start by adding components to the component list. A component is essentially a part of the website. For example, it could be a image, a block of text, a menu, a video player, a carousel, the header, the footer. Essentially, break your page down into chunks that can be tested seperately.

Give each component a name and also specify the jQuery selector that you'd use to select that component on the page. For example, if you had a component that looks like this:

<ul class="menu"></ul>

The name could be MainMenu and the selector would be .menu

Writing a test

A test compromises of 3 parts:

It - A descriptive sentence explaining the test

E.g. It.. should only have one header on the page

Test - A JavaScript function that returns a value to be compared against

E.g.

return $selector.length;

Comparison - What to compare the value returned from the test function against, to determine if the test passes or fails

E.g. === 1

Overall tests

Overall tests are any tests you want to run against all instances of a component on a page. For example, you might want to have a test to check the total number of instances of a particular component on a page (1x header, 1x footer, 1x menu etc).

When writing the test function, $selector will be a jQuery selector containing all the instances of the component on the page.

Instance tests

Instance tests are any tests you want to run against each instance of a component on a page individually. This is likely where the majority of your tests will go. For example, you might want to check that each image on a page has correct dimensions.

When writing the test function, $selector will be a jQuery selector containing an instance of the component on the page.

Child tests

Child tests allow you to test different instances of child elements within each instance of a component. For example, you might want to check that the total word length in each menu item doesn't go over a certain amount:

Child selector: .MainMenu li

Test function:

return $('> a', $selector).text().length;

The reason it is done as a child test instead of an instance test is because it'll run a test against each li element seperately. This means that when you run the test it can highlight the exact menu item which is at fault, rather than the whole menu.

To run the tests

Open the website you wish to run the tests on and then click on the bookmarklet you created earlier. At the bottom of the page you should see the test results and any failed tests should be highlighted on the page.

You can install the bookmarklet on as many computers as you want to. This means lots of authors can test their content at the same time, and you can write the rules using the editor and they'll instantly be deployed to all the authors without any intervention.

Todo

• Configuration editor (colours etc)
• Ability to import JSON file of rules & config