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

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

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);

Solution

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

install https://nuget.org/packages/Verify.AngleSharp/
Call VerifyAngleSharpDiffing.Initialize() once at assembly load time.
use PrettyPrintHtml in your test:

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