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] [TODO]

el.hasAttrEqual

[DONE] [TODO]

el.hasChild

[DONE] [TODO]

el.hasClass

[DONE] [TODO]

el.hasContent

[DONE] [TODO]

el.hasAttrMatching

[TODO]

el.hasAttrNotMatching

[TODO]

el.hasOnlyOneChild

[TODO]

el.hasOneOfClasses

[TODO]

el.hasRole

[DONE] [TODO]

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"
  ]