Extends Verify to allow verification of Web UIs using headless browsers.
See Milestones for release notes.
Verification of Web UIs via Playwright.
https://nuget.org/packages/Verify.Playwright/
Enable VerifyPlaywright once at assembly load time:
[ModuleInitializer]
public static void InitPlaywright() =>
VerifyPlaywright.Initialize(installPlaywright: true);// wait for target server to start
await SocketWaiter.Wait(port: 5000);
playwright = await Playwright.CreateAsync();
browser = await playwright.Chromium.LaunchAsync();The current page state can be verified as follows:
var page = await browser.NewPageAsync();
await page.GotoAsync("http://localhost:5000");
await Verify(page);With the state of the element being rendered as a verified files:
<!DOCTYPE html><html lang="en"><head>
<meta charset="utf-8">
<title>The Title</title>
<link href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="jumbotron">
<h1 class="display-4">The Awareness Of Relative Idealism</h1>
<p class="lead">
One hears it stated that a factor within the logical radical priority embodies the
key principles behind the best practice marginalised certification project. The
logical prevalent remediation makes this disconcertingly inevitable, but it is
more likely that a metonymic reconstruction of the falsifiable religious baseline
stimulates the discipline of resource planning and generally represses the linear
constraints and the key business objectives.
</p>
<a id="someId" class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>
</body></html>PlaywrightTests.PageUsage.01.verified.png:
var page = await browser.NewPageAsync();
await page.GotoAsync("http://localhost:5000");
await Verify(page)
.PageScreenshotOptions(
new()
{
Quality = 50,
Type = ScreenshotType.Jpeg
});An element can be verified as follows:
var page = await browser.NewPageAsync();
await page.GotoAsync("http://localhost:5000");
var element = await page.QuerySelectorAsync("#someId");
await Verify(element!);With the state of the element being rendered as a verified files:
Learn morePlaywrightTests.ElementUsage.01.verified.png:
var page = await browser.NewPageAsync();
await page.GotoAsync("http://localhost:5000");
var element = await page.QuerySelectorAsync("#someId");
await Verify(element!)
.ElementScreenshotOptions(
new()
{
Quality = 50,
Type = ScreenshotType.Jpeg
});An element can be verified as follows:
var page = await browser.NewPageAsync();
await page.GotoAsync("http://localhost:5000");
var element = page.Locator("#someId");
await Verify(element);With the state of the element being rendered as a verified files:
Learn morePlaywrightTests.LocatorUsage.01.verified.png:
var page = await browser.NewPageAsync();
await page.GotoAsync("http://localhost:5000");
var element = page.Locator("#someId");
await Verify(element)
.LocatorScreenshotOptions(
new()
{
Quality = 50,
Type = ScreenshotType.Jpeg
});Verification of Web UIs via Puppeteer
https://nuget.org/packages/Verify.Puppeteer/
Enable VerifyPuppeteer once at assembly load time:
[ModuleInitializer]
public static void InitPuppeteer() =>
VerifyPuppeteer.Initialize();// wait for target server to start
await SocketWaiter.Wait(port: 5000);
var fetcher = new BrowserFetcher(SupportedBrowser.Chrome);
await fetcher.DownloadAsync();
browser = await Puppeteer.LaunchAsync(
new()
{
Headless = true
});The current page state can be verified as follows:
var page = await browser.NewPageAsync();
page.Viewport.Width = 1024;
page.Viewport.Height = 768;
await page.GoToAsync("http://localhost:5000");
await Verify(page);With the state of the element being rendered as a verified files:
<!DOCTYPE html><html lang="en"><head>
<meta charset="utf-8">
<title>The Title</title>
<link href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="jumbotron">
<h1 class="display-4">The Awareness Of Relative Idealism</h1>
<p class="lead">
One hears it stated that a factor within the logical radical priority embodies the
key principles behind the best practice marginalised certification project. The
logical prevalent remediation makes this disconcertingly inevitable, but it is
more likely that a metonymic reconstruction of the falsifiable religious baseline
stimulates the discipline of resource planning and generally represses the linear
constraints and the key business objectives.
</p>
<a id="someId" class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>
</body></html>PuppeteerTests.PageUsage.01.verified.png:
An element can be verified as follows:
var page = await browser.NewPageAsync();
await page.GoToAsync("http://localhost:5000");
var element = await page.QuerySelectorAsync("#someId");
await Verify(element);With the state of the element being rendered as a verified files:
Learn morePuppeteerTests.ElementUsage.01.verified.png:
Verification of Web UIs via Selenium.
https://nuget.org/packages/Verify.Selenium/
Enable VerifySelenium once at assembly load time:
[ModuleInitializer]
public static void InitSelenium() =>
VerifySelenium.Initialize();// wait for target server to start
await SocketWaiter.Wait(port: 5000);
var options = new ChromeOptions();
options.AddArgument("--no-sandbox");
options.AddArgument("--headless");
driver = new(options);
driver.Manage().Window.Size = new(1024, 768);
driver.Navigate().GoToUrl("http://localhost:5000");The current page state can be verified as follows:
await Verify(driver);With the state of the element being rendered as a verified files:
<html lang="en"><head>
<meta charset="utf-8">
<title>The Title</title>
<link href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="jumbotron">
<h1 class="display-4">The Awareness Of Relative Idealism</h1>
<p class="lead">
One hears it stated that a factor within the logical radical priority embodies the
key principles behind the best practice marginalised certification project. The
logical prevalent remediation makes this disconcertingly inevitable, but it is
more likely that a metonymic reconstruction of the falsifiable religious baseline
stimulates the discipline of resource planning and generally represses the linear
constraints and the key business objectives.
</p>
<a id="someId" class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>
</body></html>SeleniumTests.PageUsage.01.verified.png:
An element can be verified as follows:
var element = driver.FindElement(By.Id("someId"));
await Verify(element);With the state of the element being rendered as a verified files:
<a id="someId" class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>SeleniumTests.ElementUsage.01.verified.png:
The rendering can very slightly between different OS versions. This can make verification on different machines (eg CI) problematic. A custom comparer can to mitigate this.
Crystal designed by Monjin Friends from The Noun Project.