Check HTML files for certain DOM structures and requirements
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
examples
src
tests
.editorconfig
.gitignore
.npmignore
README.md
package.json

README.md

htmlcheck

Check HTML files for certain DOM structures and requirements. For example, does your website require every <button> and <a class="button"> to contain an icon element, like <i class="icon ...">? You can use htmlcheck to validate that your HTML files all follow this rule.

Installation

npm install htmlcheck

Examples

Check that every <button> and <a class="button"> have an icon and an aria-label.

htmlcheck
    .forElements('button')
    .forElements('a.button')
    .inDir('src/templates')
    .test(function(button) {
        const icons = button.querySelectorAll('i.icon, span.icon');
        if (icons.length !== 1) {
            throw `Button with text "${button.textContent.trim()}" has ${icons.length} icons, should have one`;
        }
    })
    .test(function(button) {
        if (!button.hasAttribute('aria-label')) {
            throw `Button with text "${button.textContent.trim()}" does not have aria-label attribute; add this for screen readers`;
        }
    });

Check that every <button> and <a> have one of 'href', 'ng-href', or 'ng-click'.

htmlcheck
    .forElements('a')
    .forElements('button')
    .inGlob('src/**/*.html')
    .test(function(link) {
        function isAttributeOk(attribute) {
            const value = link.getAttribute(attribute);
            return typeof value === "string" && value.length > 0;
        };

        const isOk = isAttributeOk('href') || isAttributeOk('ng-href') || isAttributeOk('ng-click');

        if (!isOk) {
            throw `Link with text "${link.textContent.trim()}" has no action; add one of "href", "ng-href" or "ng-click"`;
        }
    });

Run the file examples/examples.js to see these in action.

API

  • .forElements(querySelector) - Adds elements found by the given query selector to the test, for example .forElements('a.button')
  • .inDir(dir) - Adds files found in the given directory to the test, for example .inDir('src/templates')
  • .inFile(path) - Adds the given file to the test, for example .inFile('src/templates/index.html')
  • .inGlob(glob) - Adds files found by the given glob to the test, for example .inGlob('src/**/*.html')
  • .test(testFunction) - Tests the files and query selectors with the given function, which should throw an error if the test fails. The test function is given an element with a DOM-like API, for example you can call .querySelector() or .getAttribute() on the element.

Tests

To execute the tests, run npm run test

To execute the examples script, run node examples/examples.js