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