Selenium C# Tutorial

Selenium Overview:

Selenium is an open-source, web Automation Testing tool that supports multiple browsers and multiple operating systems. It allows testers to use multiple programming languages such as Java, C#, Python, .Net, Ruby, PHP, and Perl for coding automated tests.

C # Overview:

C# is an object-oriented programming language derived from C++ and Java. C# allows developers to build applications using Visual Studio on .Net platform. The following are the key features of C#.

1. It is an Object-Oriented programming language
2. It supports the development of console, windows and web-based applications
3. It provides features such as Encapsulation, Inheritance, and Polymorphism.

#Quick Start 🚀

#1 Import the SDK

using System;
using System.Collections.Generic;
using System.Drawing; //Required for eyes.Open API
using Applitools.Selenium; //Applitools Selenium SDK 👈🏼
using OpenQA.Selenium.Chrome; // Selenium's Chrome browser SDK

1
2
3
4
5

#2 Initialize the SDK and set API key

// Initialize the eyes SDK and set your private API key.
var eyes = new Eyes();

// Set the Applitools API key either from the environment variable or hard code it here
eyes.ApiKey = "APPLITOOLS_API_KEY"; 

1
2
3
4
5

#3 Set the application (AUT) name, the test name and set the browser's viewport size

// Start the test by setting AUT's name, window or the page name that's being tested, 
//viewport width and height
eyes.Open(driver, "Demo C# app", "Login Window", new Size(600, 800));

// Navigate the browser to the "hello world!" web-site.
 driver.Url = "https://demo.applitools.com";

1
2
3
4
5
6

#4 Generate screenshot.

The following uploads the image data to Applitools for the AI to compare differences, generate baseline and so on.

// Visual checkpoint. This line takes the picture and uploads it as a test step into Applitools for analysis.
eyes.CheckWindow("Login Window test");

1
2

#5 End the Test and Close Applitools

// End the test.
eyes.Close();

// Close the browser.
driver.Quit();

// If the test was aborted before eyes.Close was called, ends the test as aborted.
eyes.AbortIfNotClosed();

1
2
3
4
5
6
7
8

#Putting it all together (simplified code)

using System;
using System.Collections.Generic;
using System.Drawing; //Required for eyes.Open API
using Applitools.Selenium; //Applitools Selenium SDK
using OpenQA.Selenium.Chrome; // Selenium's Chrome browser SDK

namespace ApplitoolsTutorial
{

  class Program
  {
      static void Main(string[] args)
      {
          // Open a Chrome browser.
          var driver = new ChromeDriver();

          // Initialize the eyes SDK and set your private API key.
          var eyes = new Eyes();

          //scroll and take full page screenshot
          eyes.ForceFullPageScreenshot = true;

          // Hard code the Applitools API key or get it from the environment (see the Tutorial for details)
          eyes.ApiKey = "APPLITOOLS_API_KEY"; 

          try
          {
              // Call getTestInfoForPart to get the appropriate test information.
              Dictionary<string, string> testInfo = GetTestInfoForPart(args);

              // Start the test by setting AUT's name, window or the page name that's being tested, viewport width and height
              eyes.Open(driver, "Demo C# app", "Login Window", new Size(600, 800));

              // Navigate the browser to the "hello world!" web-site.
              driver.Url = "https://demo.applitools.com";

              // Visual checkpoint #1.
              eyes.CheckWindow("Login Window test");

              // End the test.
              eyes.Close();
          }
          catch (Exception ex)
          {
              Console.WriteLine(ex);
          }
          finally
          {
              // Close the browser.
              driver.Quit();

              // If the test was aborted before eyes.Close was called, ends the test as aborted.
              eyes.AbortIfNotClosed();
          }
      }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

Notes

1. Everything between eyes.open and eyes.close is called a Test.
2. The eyes.checkWindow is the code that takes the picture and uploads the image to our AI eyes server.
3. You can have multiple checkWindow if you are navigating multiple pages in a single test.

Also note that because this example has only one test, the code you include to add Applitools may look like a lot. But once you set things up, the only extra code you will add will be "eyes.checkWindow()", "eyes.checkRegion()" etc even if there are hundreds of tests.

#Step-by-Step guide

The tutorial provides a detailed step-by-step guide to help you get started. This has lots of gifs and pictures to help you glide through it. Our objective is to quickly show you how powerful and useful AI can be in automation testing.

• Part 1 - 🚀 Setup Applitools and create a baseline
• Part 2 - 🐞 Find UI bugs and analyze differences using AI
• Part 3 - 🤖 Understand why Applitools AI is superior to pixel-by-pixel comparison
• Part 4 - ✅ Accepting hundreds of changes by clicking a button instead of updating numerous tests
• Part 5 - 👁 Use our advanced AI tools to work with real-world scenarios

#Part 1 - Setup environment and create a baseline

Test Overview:

In this part, you will set up the environment to run the test locally and then store a baseline image of just the login page. We will use the app page later on.

Login page:

App page:

#Step 1.1 Install Prerequisites

TIP

The instructions are elaborate and are for a brand new machine. You may skip most of them if you already have them set up properly.

1. Create an Applitools account and obtain your API key from the Person Icon > "My API key" menu. 
2. Please set the APPLITOOLS_API_KEY environment variable.
   TIP

   1. You may skip this step if you want to hard code the API KEY inside the tutorial project's code.
   2. It's better to store APPLITOOLS_API_KEY in the system variables (in Windows) or in the ~/.bash_profile (in Mac) so that it is accessible from all Terminal shells

• 2.1 Mac:
  • Open ~/.bash_profile file (Create one if it's missing using touch ~/.bash_profile).
  • Add the line export APPLITOOLS_API_KEY="<your key>".
  • Save it and close the file.
  • Run source ~/.bash_profile. This will load the environment variables from the ~/.bash_profile file.
  • Run $ echo $APPLITOOLS_API_KEY. It should say something like: qwerw12312wqfrdwf12312dfddsaf213423
• 2.2 Windows:
  • Navigate to Computer (Right click) | Properties | Advanced System Settings | Advanced (Tab) | Environment variables | System Variables.
  • Click on New
  • Add APPLITOOLS_API_KEY as the Variable Name.
  • Enter JDK installation path in the Variable Value field. Typically this looks something like: qwerw12312wqfrdwf12312dfddsaf213423
  • Click on Save
  • Open Command prompt and test it by running echo %APPLITOOLS_API_KEY%. It should show the API key.

3. Install Visual Studio from here
4. Install Google Chrome browser from here
5. Install git from https://git-scm.com​
   TIP

   Installing git is optional. You need this mainly to clone the demo project from the Github repository. Instead of installing git, you can simply download the Zip file from the repo. Further, If you are Mac, you already have git.
6. Install Chromedriver that's appropriate for your Operating System and your Chrome browser's version from here. For example, if your Chrome browser is v67-v69, download the latest ChromeDriver 2.41.
   • Unzip ChromeDriver to any folder of your choice.
   • Add ChromeDriver's path to your system's PATH so Selenium can find it
   • Mac:
     • Open ~/.bash_profile file (Create one if it's missing).
     • Add export PATH="<PATH_TO_YOUR_CHROME_DRIVER>:$PATH".
       • For example, if the chromedriver is in /Users/apps/chromedriver, then it would be export PATH="/Users/apps/:$PATH.
     • Save the file and go back to the Terminal.
     • Run source ~/.bash_profile. This will load environment variables from ~/.bash_profile.
   • Windows:
     • Navigate to Computer (Right click) | Properties | Advanced System Settings | Advanced (Tab) | Environment variables | System Variables.
     • Select the line with Path key.
     • Click on Edit.
     • Add a semicolon ; to the end of the values and add the path where you have unzipped ChromeDriver.
     • For example, if the ChromeDriver is in c:\selenium\chromedriver, then append ;c:\selenium to the end of the Path.
     • Save it.
   If everything went fine, and if you typed chromedriver in the command prompt, you should see something like below: 

#Step 1.2 Download the demo project

1. Clone the repo:

git clone https://github.com/applitools/tutorial-selenium-csharp.git

TIP

Optionally, download the Zip file and extract it from the git repo.

#Step 1.3 Importing the project into Visual studio

1. Open Visual Studio from the command line by running something like: open /Applications/Visual\ Studio.app/ instead of double-clicking on it. This approach will load all the envirnoment variables such as APPLITOOLS_API_KEY from the command line shell.

Note

Do not open Visual Studio by double clicking it as it will not load environment variables. If you already have it open, please close it and open it from the Command line.

2. In Visual Studio, open the ApplitoolsTutorial by navigating to the downloaded project via File | open and open ApplitoolsTutorials.sln file.
3. Update SDKs. ApplitoolsTutorial | ApplitoolTutorial | Packages (right click) | "Update". This will update all the dependencies.

#Step 1.4 Run your first test

The demo tutorial app can run different tests for different parts of the tutorials based on the argument passed into it when we run it. We simply need to pass "1", "2", "3", "4" to run different parts of the tests. To pass that, we need to run using "Custom Configuration...".

• Right click on Applitools Project > Click on Run With > Select Custom Configuration.. 
• Enter "1" in the Arguments section and press Run. 

On Windows: 

You should see the test run in a Chrome browser window.

Potential problems and their solutions

1. You may see an error that says Chrome driver is not found. This means that either the Chrome driver is not downloaded or it is in your PATH. If you simply type chromedriver and if you see unknown command then chromedriver is not in your PATH.
2. You may see an error that says "Could not set Viewport". This means that your computer monitor's viewport size is smaller than what the test app is using. If so, open the Program.cs and reduce viewPortWidth and viewPortHeight. Keep reducing until it's smaller than your monitor's size.

 

 

    string viewportWidth = "1200"; //Reduce this to 800
    string viewportHeight = "750"; //Reduce this to 600
    string testName = "Login Page C# Quickstart";
    string appName = "ACME app C#";
    string loginPageName = "Login Page C#";
    string appPageName = "App Page C#";

1
2
3
4
5
6
7

#Step 1.5 Check the baseline

Login to applitools.com and see the results. Applitools app should show the results like below.

TIP

The initial run is automatically accepted as a baseline.

1. If you don't see anything, click on the "Refresh" button
2. The "Thumbs up" button is used to accept the image as a baseline
3. The "Save" button is used to save a new baseline image

#Part 2 - Find UI bugs and analyze differences using AI

In this part, you'll run the tests again but the test will use a different url to simulate a broken UI.

#Step 2.1: Run the test again

Right click on Applitools Project > Click on Run With > Select Custom Configuration... > Enter 2 in the Arguments section > Press Run

#Step 2.2 Analyze the result

Please switch to Applitools dashboard in your browser.

TIP

Remember to click on the "Refresh" button in the left panel to see the new test result

You will see a new test run with an "unresolved" status. This means Applitools is asking you to check if the differences are valid. If so, accept it and this result will become a new baseline. If not, reject it and your result will be marked as "Failed" and your previous baseline remains as is.

#Step 2.3: Click on the resulting image

#Step 2.4 Click on the "Toggle" button to see differences between the baseline and current checkpoint

#Step 2.5 Click on the Radar button to highlight differences at once

This is very handy when your app is complex and has lot of data. 

#Step 2.6 Zoom in and see each difference closely

#Part 3 - Understand why Applitools AI eyes is superior to pixel-by-pixel comparison

At Applitools we have trained our AI with millions of images to look for differences in various ways. AI is also trained to ignore certain types of differences that human eyes usually ignore. We provide four different "modes" to compare differences. In this part, you will see how differences between 4 "modes" of comparisons.

#Step 3.1 Check out the "Strict" mode by selecting the option in the menu

This mode uses AI to simulate the differences that are commonly found by the human eye. It ignores some of the minor differences like "off-by-a-pixel" type errors. This help eliminate common false-positives of pixel-by-pixel comparison tools.

TIP

This is the default mode. You can set whichever mode you want in code.

#Step 3.2 Check out the "Exact" mode by selecting the option in the left-menu

This mode does pixel-by-pixel comparison. This will cause lot of false-positives! This is one of the big reasons why we use AI

Notice that a lot of things in the background image is also considered as real bugs! ⚠️

WARNING

Do not use this mode unless really necessary as it does pixel-by-pixel comparison and may lead to false positives.

Most other Visual testing tools/methods become useless because they use a simple pixel-by-pixel comparison.

#Step 3.3 Check out "Content" mode by selecting the option in the menu

The Content mode works in a similar way to Strict except for the fact that it ignores colors.

TIP

The content level can be useful if your website includes different colors which are not relevant for your tests

#Step 3.4 Check out the "Layout" mode by selecting the option in the left-menu

This mode shows any major differences in the layouts like a major section is removed.

In our example there are no major layout changes so if you were simply testing if the structure of the app looks good, and are using the layout mode in your code, it would succeed!

TIP

For most scenarios, we recommend using either the "Strict" mode or the "Layout" mode. Use "Content" and "Exact" modes for special cases.

#Part 4 - Accepting 100s of changes by clicking a button instead of updating numerous tests

Now let's imagine that you did your analysis and it turns out all those differences are because of just a new version of the app. Typically this means you'd need to throw out or rewrite 100s of tests! In "Visual testing" you don't have because you didn't really write any tests 😊!

Note

We'll go over the few lines of code you will add to import Applitools and generate images but that's about all the code you'll write. And once you wrote it, it won't change!

To accept 100s of changes, simply click on one of the three "Thumbs up" buttons.

There are three options:

1. Accept the differences and the checkpoint image of this test step: This option allows us to accept all the changes for this specific step and not other steps in the same test (if there are multiple steps).
2. Accept the differences and checkpoint images of all test steps with similar differences: This option allows us to accept similar differences in all the steps.
3. Accept the differences and checkpoint images of all test steps: This accepts all test steps irrespective of similar differences or not. Essentially, you get a new baseline for all test steps.

#Step 4.1: Select "Accept the differences and the checkpoint image of this test step" option

#Step 4.2: Press Save

#Step 4.3: Re-run the test

Switch to the command prompt and run:

Right click on Applitools Project > Click on Run With > Select Custom Configuration... > Enter 2 in the Arguments section > Press Run

#Step 4.4: Check the result in the Dashboard

Switch to Applitools dashboard in the browser. Press the "Refresh" button and then you should see the result marked as "Passed". 

#Part 5 - Use advanced AI tools to work with real-world scenarios

In this part, you will run tests on the main app page and learn about how to deal with dynamic contents and floating contents. 

#Step 5.1 Run the test on the main app

Right click on Applitools Project > Click on Run With > Select Custom Configuration... > Enter 3 in the Arguments section > Press Run

A note about taking a full page screenshot

Note that the main app is pretty long and goes below the fold (or, below the current viewport). So Applitools scrolls down the page twice. First to load everything below the scroller. Then it goes back up to the top of the page and scrolls down the second time to take the screenshot.

This is because we have the eyes.setForceFullPageScreenshot(true); //force scrolling

#Step 5.2 Run the test on the main app (version 2)

Right click on Applitools Project > Click on Run With > Select Custom Configuration... > Enter 4 in the Arguments section > Press Run

#Step 5.3 See the differences

#Step 5.4 Dealing with Dynamic contents

Dynamic contents are contents that constantly change, for example, a clock. If you use a pixel-by-pixel comparison, your test will fail every time. Thankfully, Applitools provide a simple way to ignore a region so you can continue to visual test the rest of the page.

#Step 5.4.1 Click on the "Ignore region" option

#Step 5.4.2 Select the region around the time

#Step 5.4 Dealing with floating contents

Sometimes the data remains the same but they move or float around a bit. For example, if you center-align some data then if the data changes, the browser will move it a bit to keep it center. But this causes problems for the visual test. Again, you can use Applitools' "Floating region" option to manually add some wiggle room.

In our app, the Your nearest branch closes in: text moves sideways because it is center aligned. Let's add some wiggle room.

#Step 5.4.1 Select "Floating region" option from the menu

#Step 5.4.2 Select the area around the "Your closest branch closes in:" to add

#Step 5.4.3

Press "Thumbs up" button accept the changes.

#Step 5.4.4

Press "Save" to save it as a new baseline.