# Quickstart Guide for Visual Testing with Applitools in C# using Selenium WebDriver

This quickstart will show you how to visually test web apps in C# using Selenium WebDriver and MSTest. Visual testing can help you catch problems that traditional automation struggles to find.

After preparing your environment, this **three-step quickstart** should take **about 15 minutes** to complete.

## Step 1: Preparing your environment

You'll need a few things to run this quickstart:

1. An [Applitools account](https://auth.applitools.com/users/register), which you can register for free.
2. The [.NET 7 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/7.0) for building and running the project.
3. A good C# editor:
   - Use [Microsoft Visual Studio](https://visualstudio.microsoft.com/) if you want to drive development through a full IDE. Visual Studio comes bundled with the .NET SDK and all the tools you need out of the box. However, you will need to add a `.runsettings` file or overwrite some variables in the code to run the tests through Visual Studio.
   - Use [Visual Studio Code](https://code.visualstudio.com/docs/languages/csharp) if you want a faster experience driven more by the command line. You will need to install the C# extension and use the `dotnet` CLI tool from the terminal. You will also need to install the .NET SDK separately. Setting environment variables to run tests will be easier.
4. An up-to-date version of [Google Chrome](https://www.google.com/chrome/downloads/).
5. A corresponding version of [ChromeDriver](https://chromedriver.chromium.org/downloads).

### Installing ChromeDriver
The major version numbers of Chrome and ChromeDriver must be the same. Otherwise, Selenium WebDriver may raise an exception when it is initialized. For example, Chrome v101 requires ChromeDriver v101. ChromeDriver must be installed into a directory covered by the system `PATH` variable.

## Step 2: Getting your example project

### Downloading the example project
The example project is located at [https://github.com/applitools/example-selenium-csharp-mstest](https://github.com/applitools/example-selenium-csharp-mstest). Clone this repository to your local machine:

```text
git clone https://github.com/applitools/example-selenium-csharp-mstest.git
cd example-selenium-csharp-mstest
```

If you don't have Git, instead of running `git clone`, you can [download the project as a ZIP file](https://github.com/applitools/example-selenium-csharp-mstest/archive/refs/heads/master.zip) and extract it.

### Installing the dependencies
The example project uses [NuGet](https://www.nuget.org/) for package management. All dependencies are listed in the project's `.csproj` file. They should be automatically downloaded whenever the project is built. You can explicitly restore NuGet packages from either Visual Studio or the command line by following this guide: [Restore packages with NuGet Package Restore](https://learn.microsoft.com/en-us/nuget/consume-packages/package-restore).

Adding Applitools to Another .NET Project? This example project already has the Applitools Eyes SDK as a dependency. There are two NuGet packages for the Applitools Eyes SDK for different Selenium versions:

- [`Eyes.Selenium4`](https://www.nuget.org/packages/Eyes.Selenium4) uses Selenium 4
- [`Eyes.Selenium`](https://www.nuget.org/packages/Eyes.Selenium) uses Selenium 3

### Deciding how to run tests
The test uses Selenium WebDriver to automate the browser. There are two places to run your Selenium WebDriver session:
1. On your _local machine_ (which is the default option)
2. On _Applitools Execution Cloud_

If you run WebDriver locally, then you need to set it up and manage it yourself. If you use Execution Cloud, then Applitools will manage WebDriver for you. It will also automatically heal broken locators and wait for elements to be ready.

### Walking through the code
The project contains one visual test case, which is located at `Applitools.Example.Tests/AcmeBankTest.cs`.

```csharp
using Applitools.Selenium;
using Applitools.VisualGrid;
using Microsoft.VisualStudio.TestTools.UnitTesting;
using OpenQA.Selenium;
using OpenQA.Selenium.Chrome;
using OpenQA.Selenium.Remote;
using System.Drawing;
using ScreenOrientation = Applitools.VisualGrid.ScreenOrientation;

namespace Applitools.Example.Tests
{
    /// <summary>
    /// Tests for the ACME Bank demo app.
    /// </summary>
    [TestClass]
    public class AcmeBankTest
    {
        #pragma warning disable CS0162
        #pragma warning disable CS8618

// Test constants
        public const bool UseUltrafastGrid = true;
        public const bool UseExecutionCloud = false;

// Context for the current test (set by MSTest during runtime)
        public TestContext TestContext { get; set; }

// Test control inputs to read once and share for all tests
        private static string? ApplitoolsApiKey;
        private static bool Headless;

// Applitools objects to share for all tests
        private static BatchInfo Batch;
        private static Configuration Config;
        private static EyesRunner Runner;

// Test-specific objects
        private WebDriver Driver;
        private Eyes Eyes;

#pragma warning restore CS8618

/// <summary>
        /// Sets up the configuration for running visual tests.
        /// <summary>
        [AssemblyInitialize]
        public static void SetUpConfigAndRunner(TestContext context)
        {
            ApplitoolsApiKey = Environment.GetEnvironmentVariable("APPLITOOLS_API_KEY");
            Headless = Environment.GetEnvironmentVariable("HEADLESS")?.ToLower() == "true";
            Runner = UseUltrafastGrid ? new VisualGridRunner(new RunnerOptions().TestConcurrency(5)) : new ClassicRunner();
            Batch = new BatchInfo($"Example: Selenium C# MSTest with the {(UseUltrafastGrid ? "Ultrafast Grid" : "Classic Runner")}");
            Config = new Configuration();
            Config.SetApiKey(ApplitoolsApiKey);
            Config.SetBatch(Batch);

if (UseUltrafastGrid)
            {
                Config.AddBrowser(800, 600, BrowserType.CHROME);
                Config.AddBrowser(1600, 1200, BrowserType.FIREFOX);
                Config.AddBrowser(1024, 768, BrowserType.SAFARI);
                Config.AddDeviceEmulation(DeviceName.Pixel_2, ScreenOrientation.Portrait);
                Config.AddDeviceEmulation(DeviceName.Nexus_10, ScreenOrientation.Landscape);
            }
        }

/// <summary>
        /// Sets up each test with its own ChromeDriver and Applitools Eyes objects.
        /// <summary>
        [TestInitialize]
        public void OpenBrowserAndEyes()
        {
            ChromeOptions options = new ChromeOptions();
            if (Headless) options.AddArgument("headless");
            Driver = UseExecutionCloud ? new RemoteWebDriver(new Uri(Eyes.GetExecutionCloudUrl()), options) : new ChromeDriver(options);
            Driver.Manage().Timeouts().ImplicitWait = TimeSpan.FromSeconds(10);
            Eyes = new Eyes(Runner);
            Eyes.SetConfiguration(Config);
            Eyes.SaveNewTests = true;

Eyes.Open(
                Driver,
                "ACME Bank Web App",
                TestContext.TestName,
                new Size(1200, 600)
            );
        }

/// <summary>
        /// This test covers login for the Applitools demo site, which is a dummy banking app.
        /// <summary>
        [TestMethod]
        public void LogIntoBankAccount()
        {
            Driver.Navigate().GoToUrl("https://demo.applitools.com");
            Eyes.Check(Target.Window().Fully().WithName("Login page"));
            Driver.FindElement(By.Id("username")).SendKeys("applibot");
            Driver.FindElement(By.Id("password")).SendKeys("I<3VisualTests");
            Driver.FindElement(By.Id("log-in")).Click();
            Eyes.Check(Target.Window().Fully().WithName("Main page").Layout());
        }

/// <summary>
        /// Concludes the test by quitting the browser and closing Eyes.
        /// <summary>
        [TestCleanup]
        public void CleanUpTest()
        {
            Eyes.Close();
            Driver.Quit();
        }

/// <summary>
        /// Prints the final summary report for the test suite.
        /// <summary>
        [AssemblyCleanup]
        public static void PrintResults()
        {
            TestResultsSummary allTestResults = Runner.GetAllTestResults();
            Console.WriteLine(allTestResults);
        }

#pragma warning restore CS0162
    }
}
```

## Step 3: Running your tests

### Setting Applitools variables
Before running the visual test, you must [find your Applitools API key](/content/docs/eyes/getting-started/retrieve-api-key/index.html) and set it as an environment variable named `APPLITOOLS_API_KEY`.

If you intend to run your tests from the command line (or Visual Studio Code), then set the environment variable like this:
- macOS and Linux

```text
export APPLITOOLS_API_KEY=<your-api-key>
```
- Windows

```text
set APPLITOOLS_API_KEY=<your-api-key>
```

### Launching visual tests
To run tests from the command line (or Visual Studio Code's terminal), run:

```text
dotnet build
dotnet test
```

After your tests run, you should see results in the [Eyes Test Manager](/content/docs/eyes/concepts/reviewing-tests/test-results-page/index.html).

## Resources for next steps:

1. [Setting match levels for visual checkpoints](/content/docs/eyes/concepts/best-practices/match-levels/index.html)
2. [Organizing Tests Into Batches](/content/docs/eyes/concepts/best-practices/batching/index.html)
3. [Run A/B Tests](/content/docs/eyes/concepts/best-practices/baseline-variations/index.html)

Congratulations on completing this quickstart! There's still so much to learn about visual testing with Applitools, but you're off to a great start.