htmlchecker-lite v0.1.3

HTML checker lite

Description

This is a lighter version of the HTMLChecker project. I have dropped support to phantomJS and capserJS for the much lighter cheerio.js and node-tap.

htmlchecker-lite is a unit-test framework for HTML. It can help you:

• check if your html is complying with your framework in all pages of your project (not just the page you are working).
• check if the basic accessibility guidelines are respected.
• Ensure that HTML pattern that you don't want are not in your projects (no more .l-left, .l-right in a mobile first project).

Installation

  npm install htmlchecker-lite -D

Usage

In your package.json, you can add the following script:

"scripts": {
  "html": "htmlchecker-lite"
},

Configuration

At the route of you project, create a htmlchecker.config.js file:

html.config.js:

var config = {
  "specs": function({$, eachIntanceOf}){
    // Your tests go here
  },
  "pages": [
    {
      host: 'localhost',
      port: 4567,
      method: 'GET',
      path: '/'
    },
    {
      host: 'localhost',
      port: 4567,
      method: 'GET',
      path: '/docs/pages/forms/index.html'
    }
  ],
  "forbiddenSelectors": [
      ".test1", ".test2"
  ]
};

module.exports = config;

Writing tests

A basic test is located in the "specs" function inside your configuration.

    eachIntanceOf('<selector>', function(el){
      el.hasAttribute('name');
    });

So you should end up with:

  "specs": function( {eachIntanceOf} ){
    eachIntanceOf('input', function(el){
      el.hasAttribute('name');
    });
  },

Be mindful that the "specs" function has a single argument.

Test framework

el.hasAttribute

DONE

el.hasAttrEqual

DONE

el.hasChild

DONE

el.hasClass

DONE

el.hasContent

DONE

el.hasAttrMatching

TODO

el.hasAttrNotMatching

TODO

el.hasOnlyOneChild

TODO

el.hasOneOfClasses

TODO

el.hasRole

DONE

el.hasOneOfAttributeValue

TODO

el.hasMachingFor

TODO

Forbidden classes

An array of selectors you DO NOT want to see on your pages (ex: mispelled classes, deprecated classes or combination of classes).

Ex:

  "forbiddenSelectors": [
      ".test1", ".test2"
  ]