65.9K
CodeProject is changing. Read more.
Home

Getting Started with Selenium 3.7 using Visual Studio 2017/C#

Mohammed Faci
starIconstarIconstarIconstarIconstarIcon

5.00/5 (5 votes)

Nov 30, 2017

CPOL

6 min read

viewsIcon

68420

downloadIcon

103

This article provides detailed steps for writing test cases using Selenium 3.7.0 and Visual Studio 2017/C#.

Table of Contents

  1. Introduction
  2. Downloading Visual Studio 2017 Community Edition
  3. Creating a New Solution (and a Test Project)
  4. Creating a Test Case for Firefox Browser
  5. Adding Selenium/Firefox NuGet Packages
  6. Executing the Firefox Test Case
  7. Creating a Test Case for Chrome Browser
  8. Adding Selenium/Chrome Nuget Packages
  9. Executing the Chrome Test Case
  10. Creating a Test Case for Edge Browser
  11. Adding Selenium/Edge NuGet Packages
  12. Setting up the Edge Driver
  13. Executing the Edge Test Case
  14. Execute All Test Cases
  15. Conclusion
  16. History

Introduction

In this article, we test-drive (no pun intendedJ) the latest version of Selenium (version 3.7.0 as of 11-30-2017) using the following browsers:

  1. Firefox
  2. Chrome
  3. MS Edge

For this exercise, we use the following test cases:

  1. Open Google homepage
  2. Enter a search term in the textbox
  3. Click the "Google Search" button
  4. Verify that the test results page is displayed

We automate the test case using the community edition of Visual Studio 2017 and C#. We write a separate test case for each of the browsers mentioned above. We purposely compartmentalized the instructions for creating the test cases, to experiment with them separately.

So, let us get started!

Downloading Visual Studio 2017 Community Edition

Download and install Visual Studio 2017 community edition (Skip ahead if you already have Visual Studio 2017 installed - any version will work).

Here is the link:

Creating a New Solution (and a Test Project)

Here are the steps for creating a test project.

  1. Open Visual Studio and create a new project. Click on ‘File’, select ‘New’, then select ‘Project…’

  2. From the “New Project” template, select ‘Visual C#’ on the left side of the pane, then select ‘Test’. On the right side, select “Unit Test project”.

  3. Select a name and location for your project and click “OK”.

Creating a Test Case for Firefox Browser

Now that we created a ‘Test Project’, let us focus on creating a test case for Firefox.

  1. The unit test file is created with a default name “UnitTest1.cs”.

  2. Let us change the name to “GoogleSearch.cs”. The easiest way to rename the file is to right-click on “UnitTest1.cs” in solution explorer, and select rename.

  3. Click “Yes” for the dialog pop-up. This will rename both the file and the class. It is a best practice to give the same name to the class and the file containing it.

  4. Next, rename “Method1” to “Should_Search_Using_Firefox”:

  5. After the rename, the method should look like the following:

Adding Selenium/Firefox NuGet Packages

Before we continue with the creation of the test case, let us add the required packages to the project:

  • Selenium.webdriver
  • Selenium.Support
  • Selenium.Firefox.Webdriver
  1. Right-click on the project name in the solution explorer, then select ‘Manage NuGet Packages…’:

  2. From the NuGet window, make the following selections:
    1. Select “Browse".
    2. Type “selenium” in the search box.
    3. Select “Selenium.WebDriver” from the search results.
    4. Put a checkmark next to “Project’.
    5. Click “Install”.

  3. Follow the same process to install “Selenium.Support”:

  4. Again, follow the same process to install “Selenium.Firefox.Webdriver”:

  5. Add a “using” statement at the top of the test file, and create an instance of the Firefox driver, as shown below:

The complete code for the test case is shown below:

using System;
using Microsoft.VisualStudio.TestTools.UnitTesting;
using OpenQA.Selenium.Firefox;

namespace Selenium3_7_VisualStudio2017
{
 [TestClass]
 public class GoogleSearchEngineUsingFirefox
 {
  [TestMethod]
  public void Shoud_Search_Using_Firefox()
  {
   // Initialize the Firefox Driver
   using(var driver = new FirefoxDriver())
   {
    // 1. Maximize the browser
    driver.Manage().Window.Maximize();

    // 2. Go to the "Google" homepage
    driver.Navigate().GoToUrl("http://www.google.com");

    // 3. Find the search textbox (by ID) on the homepage
    var searchBox = driver.FindElementById("lst-ib");

    // 4. Enter the text (to search for) in the textbox
    searchBox.SendKeys("Automation using selenium 3.0 in C#");

    // 5. Find the search button (by Name) on the homepage
    var searchButton = driver.FindElementByName("btnK");

    // 6. Click "Submit" to start the search
    searchButton.Submit();

    // 7. Find the "Id" of the "Div" containing results stats,
    // located just above the results table.
    var searchResults = driver.FindElementById("resultStats");
   }
  }
 }
}

Executing the Firefox Test Case

Right-click on the test case in the test explorer, and select “Run Selected Tests”:

(You can also right-click inside the method itself, anywhere after line 13, for example):

Creating a Test Case for Chrome Browser

Add a new test case, and give it a name: ‘Shoud_Search_Using_Chrome’.

Here is the complete code:

using System;
using Microsoft.VisualStudio.TestTools.UnitTesting;
using OpenQA.Selenium.Chrome;

namespace Selenium3_7_VisualStudio2017
{
 [TestClass]
 public class GoogleSearchEngineUsingChrome
 {
  [TestMethod]
  public void Shoud_Search_Using_Chrome()
  {
   // Initialize the Chrome Driver
   using(var driver = new ChromeDriver())
   {
     // 1. Maximize the browser
     driver.Manage().Window.Maximize();

     // 2. Go to the “Google” homepage
     driver.Navigate().GoToUrl(“http: //www.google.com”);
     
     // 3. Find the search textbox (by ID) on the homepage
     
     var searchBox = driver.FindElementById(“lst - ib”);
     // 4. Enter the text (to search for) in the textbox
     searchBox.SendKeys(“Automation using selenium 3.0 in C#”);

     // 5. Find the search button (by Name) on the homepage
     var searchButton = driver.FindElementByName(“btnK”);

     // 6. Click “Submit” to start the search
     searchButton.Submit();

     // 7. Find the “Id” of the “Div” containing results stats
     var searchResults = driver.FindElementById(“resultStats”);
    }
   }
  }
 }

Adding Selenium/Chrome Nuget Packages

The process for creating the test case for Chrome is very similar to that of Firefox. Basically, we use the NuGet manager to install the Chrome.Webdriver, and then we add a new test case. Here are the steps for installing the Chrome.Webdriver.

  1. Right-click on the project (or the solution)
  2. Select ‘Manage NuGet Packages for Solution…’
  3. Select ‘Browse’ from the NuGet window
  4. Enter ‘Selenium’ in the search box
  5. Select ‘Selenium.Chrome.Webdriver’ from the search results
  6. Click ‘Install’

Executing the Chrome Test Case

To execute the test case, right-click on the test case in the test explorer, then select “Run Selected Tests”. You can also right-click inside the method itself, anywhere after line 13, for example.

Creating a Test Case for Edge Browser

Add a new test case, and give it a name, such as ‘Shoud_Search_Using_EdgeBrowser’.

Here is the complete code for the test case:

using System;
using Microsoft.VisualStudio.TestTools.UnitTesting;
using OpenQA.Selenium.Edge;

namespace Selenium3_7_VisualStudio2017
{
  [TestMethod]
  public class GoogleSearchEngineUsingEdgeBrowser
  {
   // Edge driver full path: @"C:\SeleniumEdgeDriver\MicrosoftWebDriver.exe”
   string edgeDriverLocation = @ "C:\SeleniumEdgeDriver";

   [TestMethod]
   public void Shoud_Search_Using_EdgeBrowser()
   {
    // Initialize the IE Driver
    using(var driver = new EdgeDriver(edgeDriverLocation))
    {
     // 1. Maximize the browser
     driver.Manage().Window.Maximize();

     // 2. Go to the "Google" homepage
     driver.Navigate().GoToUrl("http://www.google.com");

     // 3. Find the search textbox (by ID) on the homepage
     driver.Manage().Timeouts().ImplicitWait = TimeSpan.FromSeconds(10);

     var searchBox = driver.FindElementById("lst-ib");

     // 4. Enter the text (to search for) in the textbox
     searchBox.SendKeys("Automation using selenium 3.0 in C#");

     // 5. Find the search button (by Name) on the homepage
     var searchButton = driver.FindElementByName("btnK");

     // 6. Click "Submit" to start the search
     searchButton.Submit();

     // 7. Find the "Id" of the "Div" containing results stats,
     // just before the results table.
     var searchResults = driver.FindElementById("resultStats");
    }
   }
  }
 }

Adding Selenium/Edge NuGet Packages

The process for creating the test case for Edge is very similar to that of Firefox and Chrome.

Basically, we start by using the NuGet manager to install the Edge.Webdriver. Here are the steps:

  1. Right-click on the project.
  2. Select ‘Manage NuGet Packages…’.
  3. Select ‘Browse’ from the NuGet window.
  4. Enter ‘Selenium’ in the search box.
  5. Select ‘Selenium.Webdriver.IEDriver’ from the search results.
  6. Click ‘Install’.

Setting up the Edge Driver

I run into 2 issues while creating the test case for the Edge browser.

  • Installing the EdgeDriver
  • Adding a timeout (10 seconds) just before locating the textbox (line 25 in the test case)

You may need to download the driver manually and place in a location that you need to reference in the test case. Here are the steps to get the edge driver to work correctly.

  1. Open the edge browser from your desktop.
  2. Click on the ellipses “…” at the top right of the browser.
  3. Click on “Settings”.

  4. Scroll to the bottom of the “Settings” window:

  5. Make note of the release number. In this case “14393”.
  6. Navigate to the following page: https://developer.microsoft.com/en-us/microsoft-edge/tools/webdriver/
  7. Note the release number, under the downloads section:

  8. Click on the “Release 14393” (i.e., select the correct release for the installed version of the browser).
  9. Save the “MicrosoftWebDriver.exe” to a location.

Executing the Edge Test Case

From the 'Test Explorer', right-click on the test case and select “Run Selected Tests”. You can also click inside the method itself, anywhere after line 13, for example.

Execute All Test Cases

If you implemented all test cases, right-click on the project name in the test explorer and select “Run Selected Tests”:

The results should look like the following. As a side note, notice that Edge execution is faster than Firefox and Chrome.

Conclusion

In this introductory article, we presented detailed steps for writing test cases for three browsers: Firefox, Chrome, and Edge. We used Selenium 3.7.0 and Visual Studio 2017 community edition/C# to write the test cases. We purposely provided separate instructions for each test case, to help beginners work through the process, one test case at a time.

History

  • 30th November, 2017: Initial version