Testing web apps in C# using Selenium WebDriver and MSTest
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. You can also leverage Applitools Ultrafast Grid to run your tests across all the major browsers in a fraction of the time as other cross-browser testing platforms.
After preparing your environment, this three-step quickstart should take about 15 minutes to complete.
If you get stuck on this example, don't suffer in silence! Please reach out to us to get things working. We can also help you get Applitools running in your own project.
Step 1: Preparing your environment
You'll need a few things to run this quickstart:
An Applitools account, which you can register for free.
The .NET 7 SDK for building and running the project.
A good C# editor:
- Use Microsoft Visual Studio 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 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.
- Use Microsoft Visual Studio 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
An up-to-date version of Google Chrome.
A corresponding version of ChromeDriver.
Installing ChromeDriverThe 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. Follow the instructions on Selenium's Install browser drivers page. On macOS and Linux, the recommended location for thechromedriver
executable is the/usr/local/bin
directory.You can test that ChromeDriver is working by running the
chromedriver -v
command to print its version.
Step 2: Getting your example project
Downloading the example project
There are two ways to run tests:
- Using Applitools Ultrafast Grid for cross-browser testing in the cloud
- Using Applitools Classic runner on your local machine
If you are not sure which one to pick, read Leveraging the Applitools platform. For most cases, we recommend Applitools Ultrafast Grid. We provide separate example projects for each type of runner.
- Ultrafast Grid
- Classic Runner
The example project is located at https://github.com/applitools/example-selenium-csharp-mstest-ufg. Clone this repository to your local machine:
git clone https://github.com/applitools/example-selenium-csharp-mstest-ufg.git
cd example-selenium-csharp-mstest-ufg
Instead of running git clone
, you can download the project as a ZIP file and extract it.
The example project is located at https://github.com/applitools/example-selenium-csharp-mstest-classic. Clone this repository to your local machine:
git clone https://github.com/applitools/example-selenium-csharp-mstest-classic.git
cd example-selenium-csharp-mstest-classic
Instead of running git clone
, you can download the project as a ZIP file and extract it.
Installing the dependencies
The example project uses NuGet 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.
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
uses Selenium 4Eyes.Selenium
uses Selenium 3
Pick the Selenium version you want, and add the appropriate package to your .NET project. To learn how to add NuGet packages to projects, follow the official guides for Visual Studio for Windows, Visual Studio for Mac, or the dotnet CLI.
Walking through the code
Test setup code is slightly different between Ultrafast Grid and the Classic runner.
- Ultrafast Grid
- Classic Runner
The project contains one visual test case,
which is located at Applitools.Example.Tests/AcmeBankTest.cs
.
AcmeBankTest
is an MSTest test class that covers login behavior for the ACME Bank demo web app.
It uses the Applitools Eyes SDK
to execute the test across multiple browsers in Applitools Ultrafast Grid.
With the Ultrafast Grid, you can specify different browser types, viewport sizes, and even mobile devices.
In-line comments explain every section of its code. Read it top to bottom to understand how it works:
The project contains one visual test case,
which is located at Applitools.Example.Tests/AcmeBankTest.cs
.
AcmeBankTest
is an MSTest test class that covers login behavior for the ACME Bank demo web app.
It uses the Applitools Eyes SDK
to execute the test locally using the Classic runner.
In-line comments explain every section of its code. Read it top to bottom to understand how it works:
Step 3: Running your tests
Setting Applitools variables
Before running the visual test,
you must find your Applitools API key
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
- Windows
export APPLITOOLS_API_KEY=<your-api-key>
set APPLITOOLS_API_KEY=<your-api-key>
If you intend to run your tests from Visual Studio's Test Explorer,
you will need to add a new .runsettings
file to the project and then add APPLITOOLS_API_KEY
as an
environment variable in the .runsettings
file.
The example project does not come with a .runsettings
file out of the repository.
If you have trouble setting the APPLITOOLS_API_KEY
environment variable, you can hard-code your API key like this:
// Change the following line:
// ApplitoolsApiKey = Environment.GetEnvironmentVariable("APPLITOOLS_API_KEY");
ApplitoolsApiKey = "<your-api-key>";
However, be warned: hard-coding secrets is poor practice. Do this only temporarily for debugging, and never commit hard-coded secrets to version control.
You may also need to set your Applitools Eyes server.
By default, tests will use the public Applitools Eyes server at eyes.applitools.com.
However, if your team is using a private Applitools Eyes server,
you can target it by setting the APPLITOOLS_SERVER_URL
environment variable.
(If you are using a free Applitools account, then use the public server.)
Launching visual tests
To run tests from the command line (or Visual Studio Code's terminal), run:
dotnet build
dotnet test
To run tests from Visual Studio, build the project and launch the tests from Test Explorer.
By default, the test will not run headlessly.
To run it headlessly, set the HEADLESS
environment variable to true
.
After your tests run, you should see results in the Eyes Test Manager. You can log into the Test Manager at eyes.applitools.com or at the address for your private Applitools Eyes server.
When you run tests with the Applitools Ultrafast Grid, the tests will run one time on the local machine, and then they will upload snapshots to render on each target configuration in the cloud. The Test Manager will show a separate result for each rendering. When you run tests with the Applitools Classic runner, the Test Manager will show the one snapshot from your local machine.
You can also change the web page to inject visual bugs:
// Driver.Navigate().GoToUrl("https://demo.applitools.com");
Driver.Navigate().GoToUrl("https://demo.applitools.com/index_v2.html");
If you rerun the tests, then they should yield "unresolved" results for you to review. Visual differences will be highlighted in magenta. It's up to you to accept (👍) or reject (👎) the changes. Applitools will remember your decisions for future analysis.
Again, it's okay. If you get stuck on this example, don't suffer in silence! Please reach out to us to get things working. We can also help you get Applitools running in your own project.
Taking the next steps with Applitools
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.
Resources for next steps:
- 🤖 Learning how visual testing works
- ↔️ Setting match levels for visual checkpoints
- 💥 Troubleshooting common issues
- 🐞 Reporting bugs
- 🗺 Detailed overview of visual testing with Applitools