Verify Headless Browsers
[](https://ci.appveyor.com/project/SimonCropp/verify-headlessbrowsers)
[](https://www.nuget.org/packages/Verify.Playwright/)
[](https://www.nuget.org/packages/Verify.Puppeteer/)
[](https://www.nuget.org/packages/Verify.Selenium/)
Extends [Verify](https://github.com/VerifyTests/Verify) to allow verification of Web UIs using headless browsers.
## Playwright Usage
Verification of Web UIs via [Playwright](https://github.com/microsoft/playwright-sharp).
### NuGet package
https://nuget.org/packages/Verify.Playwright/
### Enable
Enable VerifyPlaywright once at assembly load time:
```cs
VerifyPlaywright.Enable(installPlaywright: true);
```
snippet source | anchor
### Instantiate browser
```cs
// wait for target server to start
await SocketWaiter.Wait(port: 5000);
playwright = await Playwright.CreateAsync();
browser = await playwright.Chromium.LaunchAsync();
```
snippet source | anchor
### Page test
The current page state can be verified as follows:
```cs
var page = await browser.NewPageAsync();
await page.GotoAsync("http://localhost:5000");
await Verify(page);
```
snippet source | anchor
With the state of the element being rendered as a verified files:
```html
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.
Learn more
#### PageScreenshotOptions
```cs
var page = await browser.NewPageAsync();
await page.GotoAsync("http://localhost:5000");
await Verify(page)
.PageScreenshotOptions(
new()
{
Quality = 50,
Type = ScreenshotType.Jpeg
});
```
snippet source | anchor
### Element test
An element can be verified as follows:
```cs
var page = await browser.NewPageAsync();
await page.GotoAsync("http://localhost:5000");
var element = await page.QuerySelectorAsync("#someId");
await Verify(element!);
```
snippet source | anchor
With the state of the element being rendered as a verified files:
```html
Learn more
```
snippet source | anchor
[PlaywrightTests.ElementUsage.01.verified.png](/src/Tests/PlaywrightTests.ElementUsage.verified.png):
#### ElementScreenshotOptions
```cs
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
});
```
snippet source | anchor
## Puppeteer Usage
Verification of Web UIs via [Puppeteer](https://github.com/hardkoded/puppeteer-sharp)
### NuGet package
https://nuget.org/packages/Verify.Puppeteer/
### Enable
Enable VerifyPuppeteer once at assembly load time:
```cs
VerifyPuppeteer.Enable();
```
snippet source | anchor
### Instantiate browser
```cs
// wait for target server to start
await SocketWaiter.Wait(port: 5000);
using (var fetcher = new BrowserFetcher(Product.Chrome))
{
await fetcher.DownloadAsync();
}
browser = await Puppeteer.LaunchAsync(
new()
{
Headless = true
});
```
snippet source | anchor
### Page test
The current page state can be verified as follows:
```cs
var page = await browser.NewPageAsync();
page.Viewport.Width = 1024;
page.Viewport.Height = 768;
await page.GoToAsync("http://localhost:5000");
await Verify(page);
```
snippet source | anchor
With the state of the element being rendered as a verified files:
```html
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.
Learn more
### Element test
An element can be verified as follows:
```cs
var page = await browser.NewPageAsync();
await page.GoToAsync("http://localhost:5000");
var element = await page.QuerySelectorAsync("#someId");
await Verify(element);
```
snippet source | anchor
With the state of the element being rendered as a verified files:
```html
Learn more
```
snippet source | anchor
[PuppeteerTests.ElementUsage.01.verified.png](/src/Tests/PuppeteerTests.ElementUsage.verified.png):
## Selenium Usage
Verification of Web UIs via [Selenium](https://www.selenium.dev).
### NuGet package
https://nuget.org/packages/Verify.Selenium/
### Enable
Enable VerifySelenium once at assembly load time:
```cs
VerifySelenium.Enable();
```
snippet source | anchor
### Instantiate browser
```cs
// 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");
```
snippet source | anchor
### Page test
The current page state can be verified as follows:
```cs
await Verify(driver);
```
snippet source | anchor
With the state of the element being rendered as a verified files:
```html
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.
Learn more
### Element test
An element can be verified as follows:
```cs
var element = driver.FindElement(By.Id("someId"));
await Verify(element);
```
snippet source | anchor
With the state of the element being rendered as a verified files:
```html
Learn more
```
snippet source | anchor
[SeleniumTests.ElementUsage.01.verified.png](/src/Tests/SeleniumTests.ElementUsage.verified.png):
## OS specific rendering
The rendering can very slightly between different OS versions. This can make verification on different machines (eg CI) problematic. A [custom comparer](https://github.com/VerifyTests/Verify/blob/master/docs/comparer.md) can to mitigate this.
## Icon
[Crystal](https://thenounproject.com/term/crystal/1440050/) designed by [Monjin Friends](https://thenounproject.com/monjin.friends) from [The Noun Project](https://thenounproject.com).