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

Question

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

496 views Asked by Matthias Ploetz At 09 September 2024 at 11:08

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