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

Question

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

509 views Asked by Matthias Ploetz At 20 October 2024 at 00:36

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

Original Q&A

There are 1 answers

**Simon** · Accepted Answer · 2021-05-07 09:15:00

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>

TechQA.

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

There are 1 answers

Related Questions in SNAPSHOT-TESTING

Related Questions in PLAYWRIGHT-SHARP

Related Questions in VERIFY-TESTS

Popular Questions

Popular Tags

Trending Questions