背景
在编写前端自动化测试时，Chai 是一个常用的断言库。Chai 提供了很多种断言风格，可以让我们方便地进行测试。但是在使用 Chai 进行测试时，有时会遇到 "AssertionError: expected undefined to have a tagname of XXX, but got ''" 的错误，这个错误可能会让我们感到困惑。
分析
这个错误的原因是我们在使用 Chai 的 attr 断言时，期望获取 DOM 元素的某个属性，但是由于 DOM 元素不存在，所以获取属性的结果是 undefined。然后在断言时，我们期望获取 DOM 元素的标签名（tagname），但是由于元素不存在，所以得到的是一个空字符串（''）。这时 Chai 就会抛出上述的错误。
下面是一个简单的示例代码：
// javascriptcn.com 代码示例
const expect = require('chai').expect;
describe('attr test', function () {
it('should has attribute or not', function () {
const div = document.createElement('div');
div.innerHTML = '<input type="text" value="123">';
expect(div.querySelector('input')).to.have.attr('type', 'text');
expect(div.querySelector('p')).to.have.attr('type', 'text');
});
});在这个示例中，我们创建了一个 div 元素，并向其中添加了一个 input 元素。然后我们使用了 Chai 的 attr 断言来判断 input 元素是否有 type 属性，并期望它的值为 'text'。我们同时还使用了 querySelector 方法来获取 div 元素中的 input 和 p 元素。我们期望 input 有 type 属性，但是 p 没有。
当我们运行这个测试用例时，就会出现上述的错误。
解决方法
为了解决上述问题，我们需要在使用 attr 断言前，先判断 DOM 元素是否存在。我们可以使用 exists 方法来判断元素是否存在。如果元素不存在，就没有必要去获取它的属性了。
修改上述示例代码，加入元素是否存在的判断：
// javascriptcn.com 代码示例
const expect = require('chai').expect;
describe('attr test', function () {
it('should has attribute or not', function () {
const div = document.createElement('div');
div.innerHTML = '<input type="text" value="123">';
const input = div.querySelector('input');
const p = div.querySelector('p');
if (input) {
expect(input).to.have.attr('type', 'text');
}
if (p) {
expect(p).to.have.attr('type', 'text');
}
});
});在这个示例中，我们使用了 querySelector 方法获取了 input 和 p 元素。然后我们判断了这两个元素是否存在，只有存在的元素才会进行 attr 断言。这样我们就可以避免上述的错误了。
总结
在使用 Chai 进行测试时，如果遇到 "AssertionError: expected undefined to have a tagname of XXX, but got ''" 的错误，我们要注意检查是否存在 DOM 元素。我们可以使用 Chai 的 exists 方法来判断元素是否存在，避免出现这种错误。同时，我们在测试时要多注意细节，尽量增加错误处理和容错机制，提高测试的效率和可靠性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652bc3db7d4982a6ebda15a0