chai-dom
chai-dom 是 chai 断言库的扩展，它提供了一套用于处理 DOM 的断言（特别是 HTMLElement 和 NodeList）。
从 chai-jquery 分支出来，用于那些摆脱了 jQuery 包袱的人。
断言
attr(name[, value])
attribute(name[, value])
断言 HTMLElement 具有给定的属性，使用 getAttribute。 还可以选择断言特定值。 返回值可用于链式调用。
document.getElementById('header').should.have.attr('foo')
expect(document.querySelector('main article')).to.have.attribute('foo', 'bar')
expect(document.querySelector('main article')).to.have.attr('foo').match(/bar/)
class(className)
断言 HTMLElement 具有给定的类名，使用 classList。
document.getElementsByName('bar').should.have.class('foo')
expect(document.querySelector('main article')).to.have.class('foo')
还接受正则表达式作为参数。
document.getElementsByName('bar').should.have.class(/foo/)
expect(document.querySelector('main article')).to.have.class(/foo/)
id(id)
断言 HTMLElement 具有给定的 ID。
document.querySelector('section').should.have.id('#main')
expect(document.querySelector('section')).to.have.id('foo')
html(html)
断言 HTMLElement 的 HTML 内容等于或包含给定的 HTML 内容。
document.querySelector('.name').should.have.html('<em>John Doe</em>')
expect(document.querySelector('#title')).to.have.html('Chai Tea')
document.querySelector('.name').should.contain.html('<span>Doe</span>')
expect(document.querySelector('#title')).to.contain.html('<em>Tea</em>')
text(text)
断言 HTMLElement 的文本内容或 NodeList 的组合文本内容等于或包含给定的文本内容，使用 textContent。 链式调用标志：
trimmed - 在比较之前会对文本进行修剪
rendered - 在比较时会使用 innerText
document.querySelector('.name').should.have.text('John Doe')
expect(document.querySelector('#title')).to.have.text('Chai Tea')
document.querySelectorAll('ul li').should.have.text('JohnJaneJessie')
document.querySelector('h1').should.have.trimmed.text('chai-tests')
expect(document.querySelector('article')).to.have.rendered.text('Chai Tea is great')
document.querySelector('.name').should.contain.text('John')
expect(document.querySelector('#title')).to.contain.text('Chai')
document.querySelectorAll('ul li').should.contain.text('Jane')
text(text[])
断言 textContent 的 NodeList 子元素深度等于这些文本，或者当使用 contains 标志时，所有文本项都位于 NodeList 中的某个位置。
document.querySelectorAll('.name').should.have.text(['John Doe', 'Jane'])
expect(document.querySelectorAll('ul li')).to.have.text(['John', 'Jane', 'Jessie'])
document.querySelectorAll('.name').should.contain.text(['John Doe'])
expect(document.querySelectorAll('ul li')).to.contain.text(['John', 'Jessie'])
value(value)
断言 HTMLElement 具有给定的值。
document.querySelector('.name').should.have.value('John Doe')
expect(document.querySelector('input.year')).to.have.value('2012')
empty
断言 HTMLElement 或 NodeList 没有子节点。 如果断言的对象既不是这些，则会调用原始实现。
document.querySelector('.empty').should.be.empty
expect(document.querySelector('section')).not.to.be.empty
length(n)
断言 HTMLElement 或 NodeList 恰好有 n 个子节点。 如果断言的对象既不是这些，则会调用原始实现。
document.querySelector('ul').should.have.length(2)
document.querySelector('li').should.have.length(2)
expect(document.querySelector('ul')).not.to.have.length(3)
exist
断言 NodeList 不是空的。 如果断言的对象不是 NodeList，则会调用原始实现。
document.querySelectorAll('dl dd').should.exist
expect(document.querySelectorAll('.nonexistent')).not.to.exist
match(selector)
断言选择器匹配 HTMLElement 或 NodeList 中的所有元素，使用 matches。 如果断言的对象既不是这些，则会调用原始实现。
注意 matches 是 DOM Level 4 的方法，所以你可能需要一个 polyfill。
document.querySelectorAll('input').should.match('[name="bar"]')
expect(document.getElementById('empty')).to.match('.disabled')
contain(selector or element)
断言 HTMLElement 包含给定的元素，使用 querySelector 用于选择器字符串或使用 [contains][contains] 用于元素。 如果断言的对象不是 HTMLElement，或者如果 contain 不是作为函数调用，则会调用原始实现。
document.querySelector('section').should.contain('ul.items')
document.querySelector('section').should.contain(document.querySelector('section div'))
expect(document.querySelector('#content')).to.contain('p')
descendant(selector or element)
与 contain 相同，但将断言主题更改为匹配的元素。
document.querySelector('section').should.have.descendant('ul').and.have.class('items')
document.querySelector('section').should.have.descendant(document.querySelector('section div'))
expect(document.querySelector('#content')).to.have.descendant('p')
descendants(selector)
与 descendant 相同，但使用 querySelectorAll 而不是 querySelector 将断言主题更改为 NodeList 而不是单个元素。
document.querySelector('section').should.have.descendants('ul li').and.have.length(3)
displayed
断言 HTMLElement 被显示（display 属性不等于“none”）。 如果元素附加到 body，它将调用 getComputedStyle；否则它将查看内联 display 属性。
document.querySelector('dl dd').should.be.displayed
expect(document.querySelector('.hidden')).not.to.be.displayed
visible
断言 HTMLElement 可见（visibility 属性不等于“hidden”或“collapse”）。 如果元素附加到 body，它将调用 getComputedStyle；否则它将查看内联 visibility 属性。
document.querySelector('dl dd').should.be.visible
expect(document.querySelector('.invisible')).not.to.be.visible
tagName(name)
断言 HTMLElement 具有给定的 tagName。
document.querySelector('.container').should.have.tagName('div')
expect(document.querySelector('.container')).not.to.have.tagName('span')
style(styleProp, styleValue)
断言 HTMLElement 具有给定的 style 属性名和值。
document.querySelector('.container').should.have.style('color', 'rgb(55, 66, 77)')
expect(document.querySelector('.container')).not.to.have.style('borderWidth', '3px')
focus
断言 HTMLElement 已设置焦点。
document.querySelector('input').should.have.focus
expect(document.querySelector('.container')).not.to.have.focus
checked
断言 HTMLElement 是一个 [HTMLInputElement][]，其 type 为“checkbox”或“radio”，并且其 checked 状态为 true 或 false。
document.querySelector('input').should.be.checked
expect(document.querySelector('.checkbox')).not.to.be.checked
安装
npm
npm install chai-dom
bower
bower install chai-dom
使用
CommonJS
var chai = require('chai')
chai.use(require('chai-dom'))
AMD
require(['chai', 'chai-dom'], function(chai, chaiDom) {
chai.use(chaiDom)
})
全局
<script src="chai.js"></script>
<script src="chai-dom.js"></script>
将断言与 chai 的 expect 或 should 断言一起使用。
贡献
要运行测试套件，请运行 npm install（需要在您的系统上安装 Node.js），然后运行 npm test 或在您的 Web 浏览器中打开 test/index.html。
许可
MIT 许可证（请参阅 LICENSE 文件）