如何格式化 Verify.PlayWright 返回的 HTML 以便更好地比较

Question

我正在使用 Verify.PlayWright 并拍摄 HTML 元素快照。当比较打开时，所有 HTML 都在一行上。这使得很难看出差异。有没有办法格式化 HTML 以获得更好的比较？

var root = await page.QuerySelectorAsync("#sectionContainer .tree-root");
await Verifier.Verify(root);

Answer 1

您可以使用 Verify.AngleSharp. It has a feature that ppretty prints html](https://github.com/VerifyTests/Verify.AngleSharp#pretty-print) 进行比较。

安装https://nuget.org/packages/Verify.AngleSharp/
在程序集加载时调用 VerifyAngleSharpDiffing.Initialize() 一次。
在测试中使用 PrettyPrintHtml：

[Test]
public Task PrettyPrintHtml()
{
    var html = @"<!DOCTYPE html>
<html><body><h1>My First Heading</h1>
<p>My first paragraph.</p></body></html>";
    return Verifier.Verify(html)
        .UseExtension("html")
        .PrettyPrintHtml();
}

这将生成包含

的经过验证的文件

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
  </body>
</html>

如何格式化 Verify.PlayWright 返回的 HTML 以便更好地比较

How to format HTML returned by Verify.PlayWright for better comparison

snapshot-testing

playwright-sharp

verify-tests