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

485 views Asked by At

I am using Verify.PlayWright and to take HTML element snapshots. When the compare opens, all the HTML is on one line. This makes it hard to see the differences. Is there a way to format the HTML in order to get a nicer comparison?

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

There are 1 answers

1
Simon On BEST ANSWER

You can use Verify.AngleSharp. It has a feature that ppretty prints html](https://github.com/VerifyTests/Verify.AngleSharp#pretty-print) for comparison purposes.

[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();
}

which will produce a verified file containing

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