Make sure that your application works on multiple browsers

Make sure that your application works on multiple browsers

e2e_every

Sometimes we need to create a system as a public web application. We may even need to create it for the broad group of customers. In some cases, we need to develop it working on many different types of browser versions. In usual development, we would be forced to open the website in each browser ant test in manually. It would be very beneficial if we can automate it.

We can perform testing on multiple browsers very simple using Selenium WebDriver. We will just use its ability to works with different drivers and configure them.

Simple test

In the beginning, we will write some basic test for our application. We will test Google Translate page for the simplicity of this example. This test checks if translation works well for some simple word.

[Test]
public void ShouldTranslateWord()
{
    var driver = new ChromeDriver();
    driver.Navigate().GoToUrl("https://translate.google.com/#en/pl");

    var sourceTextBox = driver.FindElement(By.Id("source"));
    sourceTextBox.SendKeys("cat");

    driver.FindElement(By.Id("gt-submit")).Click();

    var resultTextBox = driver.FindElement(By.Id("result_box"));

    Assert.AreEqual(resultTextBox.Text, "kot");
}

Test support of different browsers

To be sure that application works fine on many browsers we can define a list of them and use it in a loop. It gives us a flexible method to configure these environments.

[Test]
public void ShouldTranslateWord_MultipleBrowsers()
{
    IWebDriver[] drivers = new IWebDriver[]
    {
        new ChromeDriver(),
        new FirefoxDriver(),
        new InternetExplorerDriver(),
        new SafariDriver(),
        new OperaDriver()
    };

    foreach (var driver in drivers)
    {
        driver.Navigate().GoToUrl("https://translate.google.com/#en/pl");

        var sourceTextBox = driver.FindElement(By.Id("source"));
        sourceTextBox.SendKeys("cat");

        driver.FindElement(By.Id("gt-submit")).Click();

        var resultTextBox = driver.FindElement(By.Id("result_box"));

        Assert.AreEqual(resultTextBox.Text, "kot");
    }
}

It is very easy and straightforward approach to this problem. However, it causes that we have to modify each test in a repeated way.

Test for different browser settings

We may make this test strategy more adjustable using TestCaseSource attribute of NUnit library. Create a list of preconfigured web drivers as a source of our contexts. It will be the only place to put logic related drivers creation and selection.

public static IEnumerable<IWebDriver> TestingWebDrivers
{
    get {
        ChromeOptions options = new ChromeOptions();
        options.AddExtensions("/path/to/extension.crx");

        Proxy proxy = new Proxy();
        proxy.HttpProxy = "myhttpproxy:3337";

        var options2 = new ChromeOptions();
        options2.AddAdditionalCapability("proxy", proxy);

        return new IWebDriver[]
        {
            // regular Chrome
            new ChromeDriver(),
            // Chrome with extension
            new ChromeDriver(options),
            // Chrome behind proxy
            new ChromeDriver(options2),

            new FirefoxDriver(),
            new OperaDriver(),
            new SafariDriver()
        };
    }
} 

We defined driver for four different browsers and three drivers for Chrome with different capabilities. You can extend this list as you want, but you should be aware that the more drivers are present on the list, the more time consuming will be test execution.

We can modify our test a bit, using this data source:

[Test, TestCaseSource("TestingWebDrivers")]
public void ShouldTranslateWord(IWebDriver driver)
{
    driver.Navigate().GoToUrl("https://translate.google.com/#en/pl");

    var sourceTextBox = driver.FindElement(By.Id("source"));
    sourceTextBox.SendKeys("cat");

    driver.FindElement(By.Id("gt-submit")).Click();

    var resultTextBox = driver.FindElement(By.Id("result_box"));

    Thread.Sleep(500);

    Assert.AreEqual(resultTextBox.Text, "kot");
}

[Test, TestCaseSource("TestingWebDrivers")]
public void ShouldDoOther(IWebDriver driver)
{
    // ....
}

We just need to add a TestCaseSource attribute to each test method and pass a parameter with IWebDriver implementation. We will be able to use a driver from method parameter and NUnit will take care of the rest.

Sign up for free end-to-end testing training

Learn how to create end-to-end tests for your applications from the beginning to mobile testing
Name
Email address
  • Pingback: dotnetomaniak.pl()

  • I suggest that apart from testing on different browsers you should also test on different screen resolutions, especially when you app is “enterprisy” and you have responsive layout (because in enterprise you may still find old 15” screens).

    What approach would you suggest for testing responsive application on mobile devices? I know that at least Chrome in it’s dev tools has options to emulate smartphones. I also heard about products that allow such testing but never used them in practice.

    • suvroc

      Yes, testing on smaller screen resolution might be useful but is mostly for visual testing rather than functional testing. Usually web applications have functional differences between desktop and mobile versions. So that differences should be tested.

      I recommend 2 types of tests depending on your budget:
      – Chrome Dev Tool – responsive view – it’s free and easy to use. I describe it on my course http://mailcourse.seleniumbook.com
      – using external services like BrowserStack – it provides a way to execute e2e tests on virtual machines in cloud. It tests broadly, but you have to pay for this monthly

Sign up for free end-to-end testing training

Learn how to create end-to-end tests for your applications from the beginning to mobile testing
Name
Email address