https://github.com/verifytests/verify.headlessbrowsers

Extends Verify to allow verification of Web UIs using Selenium, Playwright, or Puppeteer
https://github.com/verifytests/verify.headlessbrowsers

Last synced: about 1 year ago
JSON representation

Extends Verify to allow verification of Web UIs using Selenium, Playwright, or Puppeteer

Host: GitHub
URL: https://github.com/verifytests/verify.headlessbrowsers
Owner: VerifyTests
License: mit
Created: 2020-07-14T09:44:49.000Z (almost 6 years ago)
Default Branch: main
Last Pushed: 2025-04-15T11:58:48.000Z (about 1 year ago)
Last Synced: 2025-04-15T12:16:07.270Z (about 1 year ago)
Language: C#
Homepage:
Size: 2.24 MB
Stars: 24
Watchers: 1
Forks: 5
Open Issues: 0
Metadata Files:
- Readme: readme.md
- Funding: .github/FUNDING.yml
- License: license.txt
- Code of conduct: code_of_conduct.md

Awesome Lists containing this project

README

          #  Verify Headless Browsers

[![Discussions](https://img.shields.io/badge/Verify-Discussions-yellow?svg=true&label=)](https://github.com/orgs/VerifyTests/discussions)

[![Build status](https://ci.appveyor.com/api/projects/status/n4q42hbpf32jwafg?svg=true)](https://ci.appveyor.com/project/SimonCropp/verify-headlessbrowsers)

[![NuGet Status](https://img.shields.io/nuget/v/Verify.Playwright.svg?label=Verify.Playwright)](https://www.nuget.org/packages/Verify.Playwright/)

[![NuGet Status](https://img.shields.io/nuget/v/Verify.Puppeteer.svg?label=Verify.Puppeteer)](https://www.nuget.org/packages/Verify.Puppeteer/)

[![NuGet Status](https://img.shields.io/nuget/v/Verify.Selenium.svg?label=Verify.Selenium)](https://www.nuget.org/packages/Verify.Selenium/)

Extends [Verify](https://github.com/VerifyTests/Verify) to allow verification of Web UIs using headless browsers.

**See [Milestones](../../milestones?state=closed) for release notes.**

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

[ModuleInitializer]

public static void InitPlaywright() =>

    VerifyPlaywright.Initialize(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

  

  The Title

  

  


    The Awareness Of Relative Idealism

    

      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

  


```

^{snippet source | anchor}

[PlaywrightTests.PageUsage.01.verified.png](/src/Tests/PlaywrightTests.PageUsage.verified.png):



#### 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}

### Element test using ILocator

An element can be verified as follows:



```cs

var page = await browser.NewPageAsync();

await page.GotoAsync("http://localhost:5000");

var element = page.Locator("#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.LocatorUsage.01.verified.png](/src/Tests/PlaywrightTests.LocatorUsage.verified.png):



#### LocatorScreenshotOptions



```cs

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

        });

```

^{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

[ModuleInitializer]

public static void InitPuppeteer() =>

    VerifyPuppeteer.Initialize();

```

^{snippet source | anchor}

### Instantiate browser



```cs

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

    });

```

^{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

  

  The Title

  

  


    The Awareness Of Relative Idealism

    

      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

  


```

^{snippet source | anchor}

[PuppeteerTests.PageUsage.01.verified.png](/src/Tests/PuppeteerTests.PageUsage.verified.png):



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

[ModuleInitializer]

public static void InitSelenium() =>

    VerifySelenium.Initialize();

```

^{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

  

  The Title

  

  


    The Awareness Of Relative Idealism

    

      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

  


```

^{snippet source | anchor}

[SeleniumTests.PageUsage.01.verified.png](/src/Tests/SeleniumTests.PageUsage.verified.png):



### 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).