Posts Tagged ‘UI Tests’

In this article, we are going to discuss on Web browser automation and how to leverage test cases so that a single test case can run on different type of browsers.
Here, we are focusing on Web Driver approach, where we instantiate specific browser driver and run the tests locally. There are other options like Selenium RC and Selenium Grid where the test cases can be run on a remote server and also has options like parallel processing etc.

Selenium IDE:
Selenium IDE is an extension for FireFox which can be used for recording test steps and generate test scripts. It provides different export options including NUnit test cases for .Net.
Install Selenium IDE extension for FireFox from http://www.seleniumhq.org/ and follow the instructions.

Open Selenium IDE from FireFox browser. The typical screen looks like below.

SeleniumIDE

Now click on the Red button to capture steps. Perform test steps on the web page. You could observe that each action would be captured on IDE. Now you may want to add an assertion for verifying results. For instance, we may want to verify text on particular label. Select assertText Command from Command dropdown and click on Select. Now you could select a field on the web page and when you click on a field on the page, it would be selected as Target on Selenium IDE. Enter the value as “Results” in value field on IDE. Now we are asserting against the value “Results”. If it matches, then test would succeed otherwise it would fail. For more details on capturing test steps on Selenium IDE, you may search on google or youtube for help videos.

Exporting Test Cases:
We have captured test steps using Selenium IDE and now we would export the test cases in C# .Net syntax. Selenium supports multiple formats for Exporting. However, we want to export as C# NUnit test cases in this example.
Go to File -> Export Test Case As and select C# /NUnit /Webdriver. Save file as Results.cs to local drive.

Options:
Selenium IDE provides few configuration settings which are important for generating test code. For instance, XPath selector doesn’t work on Internet Explorer or Edge browsers. So, we could tell IDE to include only specific Selectors. To do this, go to Options -> Locator Builders. Locator Builder window will be opened.  We can reorder the locator list based on our requirement.  In this example, I have moved xpath:position selector to end of the list, so that it would be the last option for IDE to use while generating test cases.

Single Test class for different browsers:
Now we have exported the test case to C# code and generated a N-Unit test case. Visual Studio has an extension called NUnit Test Adapter for N-Unit test cases. Once we install it we could run NUnit tests inside Visual Studio Test Explorer along with VS test cases.

The next step is to install web drivers for different browsers. The following nuget packages are available for this.
Selenium.WebDriver
Selenium.WebDriver.ChromeDriver
Selenium.WebDriver.IEDriver
Selenium.WebDriver.MicrosoftWebDriver
Selenium.Support

Define the Test class as generic of type IWebDriver. TestFixture attribute takes driver type as a parameter. In the test class constructor, instantiate the generic type. Depending on current type, the appropriate driver will be instantiated. We can specify different TextFixutre attributes depending on what all browsers we want to test. See the code snippet below.


[TestFixture(typeof(FirefoxDriver))]
[TestFixture(typeof(ChromeDriver))]
[TestFixture(typeof(InternetExplorerDriver))]
[TestFixture(typeof(EdgeDriver))]
public class LoginTest<TDriver> where TDriver : IWebDriver, new()
{
        private ISelenium driver;
        private StringBuilder verificationErrors;

        [SetUp]
        public void SetupTest()
        {
            driver = new TDriver();
            baseURL = "http://localhost:33517/";
            verificationErrors = new StringBuilder();
        }

        [TearDown]
        public void TeardownTest()
        {
            try
            {
                selenium.Stop();
            }
            catch (Exception)
            {
                // Ignore errors if unable to close the browser
            }
            Assert.AreEqual("", verificationErrors.ToString());
        }

        [Test]
        public void LoginTest()
        {
            driver.FindElement(By.Id("EmailID")).Clear();
            driver.FindElement(By.Id("EmailID")).SendKeys(username);
            driver.FindElement(By.Id("Password")).Clear();
            driver.FindElement(By.Id("Password")).SendKeys(password);
            driver.FindElement(By.CssSelector("#login-form form")).Submit();

            //Assert here for success
        }
}

Once we apply TextFixtures for number of different browser drivers, we could see those many number of Tests in Visual Studio Test Explorer. In above case, there will be 4 tests with the name LoginTest. On mouse hover, each test case can be seen with different browser name.
NUnit provides setup and cleanup methods, which are applied with SetUp and TearDown attributes. These will be executed for each and every test.

Issues observed with different browsers:

  • Xpath selectors aren’t supported by IE and Edge drivers. Replace them with CSS selectors.
  • For Internet Explorer, if element.Click() desn’t work then we can use element.SendKeys(Keys.Enter) as an alternate.
  • Implement wait on Find element scenarios to address the issue of finding elements before they are loaded. See code below:

public void Login()
{
     var wait = new WebDriverWait(driver, TimeSpan.FromSeconds(10));
     wait.Until(ExpectedConditions.ElementIsVisible(By.Id("EmailOrAssociateID"))).Click();
}

  • Use Thread.Sleep() for scenarios where click event doesn’t actually trigger the action.
  • For Edge browser, you may have to run click command twice in some scenarios.
Advertisements