简介
unexpected-htmllike 是一个使用 Javascript 和 Node.js 编写的 npm 包，用于测试 HTML 和类似 HTML 结构（如 XML、SVG）等。该包可以帮助开发者轻松地进行单元测试和集成测试，提高代码的质量和可靠性，避免出现常见的页面展示问题。
安装
安装 unexpected-htmllike 最简单的方式是通过 npm 进行安装。在命令行工具（如 Terminal、PowerShell 等）中输入以下命令即可：
npm install --save-dev unexpected-htmllike
使用方法
引入
在使用 unexpected-htmllike 进行测试之前，需要在代码中引入该包。一般来说，可以通过以下方式引入：
const expect = require('unexpected');
const htmllike = require('unexpected-htmllike');
expect.use(htmllike);其中，expect 是由 npm 包 unexpected 提供的，用于编写测试用例的工具，而 htmllike 是通过 unexpected-htmllike 所提供的。
测试实例
以测试一个简单的 HTML 文档为例：
-- -------------------- ---- -------
--------- -----
------
------
-------------------
-------
------
--------- -----------
----------------
-------
-------我们可以采用以下方式对其进行测试：
-- -------------------- ---- -------
----- ------ - ----------------------
----- -------- - -------------------------------
---------------------
----- ---- - -
--------- -----
------
------
-------------------
-------
------
--------- -----------
----------------
-------
-------
--
------------ --- ---- ------ -
--------- -----
------
------
-------------------
-------
------
--------- -----------
----------------
-------
-------
---在上面的代码中，我们首先通过模板字符串定义了一个 HTML 文档表示。随后，使用 expect 工具，通过 to look like 的语法进行测试。
与其他测试工具相比，unexpected-htmllike 可以让开发者编写易于阅读和编写的测试用例，同时提高测试效率，避免出现因为不易阅读而导致的错误。
对比不同 HTML 片段
有时候在编写测试用例时，可能需要测试两个不同的 HTML 片段是否相符。unexpected-htmllike 提供了 matchHtml 方法，用于检查两个 HTML 片段是否完全一致：
-- -------------------- ---- -------
----- ------ - ----------------------
----- -------- - -------------------------------
---------------------
----- ------------ - -
------
------
-------------------
-------
------
--------- -----------
----------------
-------
-------
--
----- ---------- - -
--------- -----
------
------
-------------------
-------
------
--------- -----------
----------------
-------
-------
--
------------------------------------- -------------- --- -- -------上述代码中，我们首先定义了两个 HTML 片段 expectedHtml 和 actualHtml。然后，使用 matchHtml 方法进行匹配测试。
指定元素结构
在测试中，有时候只需要匹配 HTML 中的某些部分，而不是整个文档结构。此时，需要使用到 unexpected 的 select 语法。
假如我们希望从 HTML 文档中选取标题元素，并测试其内部 html 是否正常，可以使用以下代码：
-- -------------------- ---- -------
----- ------ - ----------------------
----- -------- - -------------------------------
---------------------
----- ---- - -
--------- -----
------
------
-------------------
-------
------
--------- -----------
----------------
-------
-------
--
------------ --- ---- -------- -------- ------------ -
-------------------
-- -
-------------------
---上述代码中，我们使用了 to have selected elements satisfying 语法，表示选择到指定元素后，进行校验。其中，第一个参数是 HTML 文档，第二个参数是 CSS 选择器，选中元素后再进行比较。
支持 XML 和 SVG
除了 HTML，unexpected-htmllike 还支持对 XML、SVG 等结构的检测。如下所示：
-- -------------------- ---- -------
----- ------ - ----------------------
----- -------- - -------------------------------
---------------------
----- --- - -
---- ----------- -------------
------- ------- ------- ------ -------------- ---------------- ------------- --
------
--
----------- --- ---- ------ -
---- ----------- -------------
------- ------- ------- ------ -------------- ---------------- ------------- --
------
---上述代码中，我们使用 svg 作为测试输入，然后再使用to look like 进行测试。
总结
unexpected-htmllike 是一个非常好的 npm 包，通过它可以进行 HTML、XML、SVG、XHTML 等元素结构的测试。在使用中，需要注意引入、用法和选择器等细节问题，同时需要选择合适的用例和编写清晰的测试代码。
相信通过这篇文章介绍，读者可以更好的学习和使用 unexpected-htmllike，提高代码质量和可靠性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/61295