chai-html

Chai HTML

A focussed HTML assertions plugin for Chai.

Installation

This is a Node.js module available through the npm registry. Before installing, download and install Node.js. Node.js 12 or higher is required.

Installation is done using the npm install command:

npm install -D chai-html

Usage

const { use, expect } = require('chai')
const chaiHtml  = require('chai-html')

// Register the plugin
use(chaiHtml)

// Write assertions!
expect('<div><img /></div>').html.to.equal('<div><img></div>')
expect('<h1>Hello World!</h1>').html.to.not.equal('<h1>Hallo Welt!</h1>')

HTML assertions will throw an error directing you to the change, so instead of squinting at a long HTML string you'll get something useful:

expect('<img />').html.to.equal('<br />')
// throws: tag <img> was changed to tag <br>

expect('<img src="..." />').html.to.equal('<img src="..." alt="..." />')
// throws: attribute [alt="..."] has been added

expect('<p>Hello World!</p> Hej!').html.to.equal('<p>Hello World!</p>')
// throws: text " Hej!" has been removed

.ignoringComments

Add the ignoringComments flag to the chain to ignore HTML comments.

expect('<div><!--Comment--></div>').html.ignoringComments.to.equal('<div></div>')

How does it work?

Underneath this plugin uses parse5 to parse the given HTML strings and normalize the generated trees before being compared. This means that although the two strings of markup may not be the same they should generate equivalent structures.

Credits

This plugin is heavily inspired by the similar chai-xml plugin.

License

chai-html is MIT licensed.