Javascript 在不重新排序属性的情况下获取HTML

我使用测试驱动开发来测试一些JS函数

这是JS

CardReader.prototype.lockDevice = function() {
    this._buttonElement.disabled = true;
    this._statusElement.innerHTML = " ";
    this._statusElement.innerHTML = 'Waiting for NFC card <img id="image" alt="Waiting" src="/img/waiting.gif" height="16" width="16">';
    this._hardwareAccessor.lockDeviceRequest(this.lockDeviceCallback, this);
};

CardReader.prototype.lockDevice=函数（）{
此._buttonElement.disabled=true；
此。_statusElement.innerHTML=“”；
此._statusElement.innerHTML='等待NFC卡'；
this._hardwareAccessor.lockDeviceRequest（this.lockDeviceCallback，this）；
};

这就是测试：

CardReaderTestCase.prototype.assertWaitingMessageIsAsExpected = function() {
    assertEquals('Waiting for NFC card <img id="image" alt="Waiting" src="/img/waiting.gif" height="16" width="16" />', this.statusElement.innerHTML);
};

CardReaderTestCase.prototype.assertWaitingMessageIsAsExpected=函数（）{
assertEquals（'等待NFC卡'，this.statusElement.innerHTML）；
};

但是当我运行测试时，发现属性width和height已经被重新排序到开头，使得断言失败

---

有没有办法在不混淆属性的情况下获取HTML？

没有保证属性的顺序，您正在处理XML的序列化。您应该只检查所需的属性，如图像宽度

CardReaderTestCase.prototype.assertWaitingMessageIsAsExpected = function() {
    assertEquals(this.statusElement.childNodes[1].width, 16);
    // Even check the HTML but be more relaxed
    assertEquals(this.statusElement.innerHTML.indexOf("Waiting for NFC card"), 0);
}

---

您可以使用与浏览器相同的格式编写硬编码测试，还是会有所不同？innerHTML很少与文字文本相同，不同的浏览器呈现方式也不同，添加或删除引号，大写一些小写项目，省略结束标记，尤其是xhtml结束斜杠（“/>”变为“>”）在image元素中，在这种情况下，断言当然会通过。但是我不能总是猜测会发生什么变化。我想我必须这样做。谢谢