时间戳

首页 > 解决方案 > 如何格式化 Verify.PlayWright 返回的 HTML 以便更好地比较

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

问题描述

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

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

标签： snapshot-testingplaywright-sharpverify-tests

解决方案

您可以使用Verify.AngleSharp。它具有 ppretty 打印 html]( https://github.com/VerifyTests/Verify.AngleSharp#pretty-print ) 用于比较目的的功能。

[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>

推荐阅读