Strategies for Selenium UI Testing

Code

As software developers, we enjoy the craft of building and designing code.  Developers relish the game of designing and coding solutions.  Agile teams recognize that your software will change over time with changes in the business climate.   Investing in a great testing culture helps you create well-crafted software over time while managing those changes.  Many of the teams that I admire figure out how to invest their time in test automation to improve the design of the software, encourage loose coupling, document the software design, and creating regression test suites.  Being a software geek, I’d rather write code that tests my software than writing a word document.  Code is much more fun than Microsoft word.   From a business perspective, the cost of paying humans to test and retest software over and over again will always be more expensive than the cost of paying the computer to test the software.  (And the computer rarely ask for raises or complain.)

With this in mind, our software teams have started reviewing Selenium tools for test automation of web applications.   In Selenium tests, a computer program controls a web browser performing actions in your web application.  Teams can use Selenium test suites to regression test critical parts of their software during daily builds and release processes.  In this post, I wanted to document a few resources and sample code to introduce Selenium.

I would like to note that Selenium test automation should complement other testing strategies in your testing culture.  The best agile teams commit to writing unit test and integration tests to verify the building blocks of their application.  If you don’t invest in these practices, the software design can become overly coupled and difficult to test.   Check out our previous blog posts on designing software that’s easy to test.

How do you build effective and maintainable Selenium test cases?

An effective test case has three parts:

  • Arrange: In this phase, the test case needs to arrange a context, data, objects or environment for the test action.  This might involve navigating to a screen in the application and filling out a form.
  • Act: The testing system needs to perform or activate a specific action. For example, you might click a button to calculate stuff.
  • Assert: In the ideal, the test system needs the ability to inspect if the action created expected results.

To become familiar with writing Selenium test cases, consider starting with a tool call Selenium IDE for FireFox.   This FireFox plugin enables you to record screen actions to arrange the context of your test case and execute test actions.   The following video from “QATestingLife” provides instructions for installing Selenium IDE in FireFox and recording your first test case.   Please refer to SeleniumHQ.org for a written tutorial.

Can you integrate a Selenium IDE test case into a C# unit test?

Yes! Using Selenium IDE, you can export recorded test cases to C# unit tests.  Let’s say we wanted to record a test case for searching for cats in Macon, GA.

Cats

The code might look like the following:

We recorded this test case by recording actions using Selenium IDE.  After recording screen actions, we exported the actions to a NUnit C# test case.  (File > Export Test Case As > C# / NUnit / WebDriver)

Here’s how this code breaks down.  In the setup method, we create an instance of the FirefoxDriver and configure the baseURL to craig’s list in Macon, Georgia.

  • In the test case starting on line 43, the web driver navigates the browser to the baseURL.
  • On the next line, we click the “free” link under the “For Sale” section. This is not obvious from reading the code, but the Selenium IDE tries to use XPath queries or CSS selectors to pick elements from the document object model.
  • The website navigates to a search screen.
  • On the search screen, we find the query textbox, clear it, and put the word “cat” into it.
  • Using XPath, we select the submit button and submit the search page.
  • In the final two actions, we tested that search results can render in a “picview” and “gridview.”

How do you run a Selenium IDE / NUnit Test Case in Visual Studio?

 The following videos from ExecuteAutomation.com outlines the procedure for running NUnit Test cases in VS.NET

 Check out the other videos in this series to learn more details on this pattern.   You can easily adapt these patterns to MSTest Unit testing framework or other testing frameworks.

Writing Maintainable Selenium Test Cases 

While learning Selenium UI test automation seems very attractive through Selenium IDE, it’s recommended that developers and testing teams learn to edit and hand code Selenium test cases.    Why?  An average enterprise application has hundreds of screens.   Code changes to the navigation pathways of the application will probably break many of your Selenium UI test suites.  It’s recommended that you groom your Selenium code into classes organized by pages.   This enables you to make your code readable and maintainable.  Suppose that we’re testing a simple grocery list application.   In this grocery list application, the test involves two application pages: Product List Page and Product Edit Page.  By encapsulating the Selenium driver commands in page classes, it will become easier to manage global changes in the application.  The DRY principle (Don’t repeat yourself) should apply to your Selenium test code.  A code generator will not do this work for you.

Here’s a breakdown of the code above:

  • In this test, we use a repository class to clear all products from the system.
  • We navigate to the root of the application.
  • Using the ProductListPage class, we open the page and click the new button.
  • At this point the system navigates us to the product edit page.
  • For the test, we generate a random product name and enter it into the product field.
  • On the edit page, we click the “save” button.
  • After verifying that we’ve moved back to the “productListScreen”, we verify that the list screen contains the text of product.

You can inspect this shopping list application and Selenium Test code here.

Final notes:

  • In this post, we have mostly explored using Firefox web driver. It should be noted that Selenium web drivers exist for Google Chrome and Internet explorer.  Refer to the install instructions for each web driver to properly install executables required per web driver.
  • If the user interacts or clicks on stuff in your web application, consider adding a clear “id” to each element. It helps improve the readability of Selenium tests.  While Selenium can search the DOM using Css path selectors and XPath, let’s be kind to our testing community!  Give elements clear “id” names.  It helps for the long term.
  • If you need to slow down the execution of your Selenium test, the following code will be helpful.

var driver = new FirefoxDriver();

driver.Manage().Timeouts().ImplicitWait = TimeSpan.FromSeconds(10);

For a more comprehensive discussion of the Page Object model pattern and other recommend best practices, please refer to the following:

 

 

Be the first to comment

Leave a Reply

Your email address will not be published.


*