Validating Tab Order with WebDriver

I had a spec that defined the tab order on a form. Starting with the default form field the user will be able to press the tab key to move the cursor to the next form field. Tabbing through the fields will follow a specific order. I couldn’t find much on Google or Bing to help automate this with WebDriver, maybe I’m loosing my search skills.

Below is code to implement this with WebDriver. In production I use a SpecFlow Table instead of an array to hold the expected tab order and I have a custom wrapper around WebDriver so much of this code is hidden from test code. Below is the untested gist of my production implementation. Since all of my elements have IDs, and your’s should too, we are simply validating that the active element has the ID of the current element in the array iteration.

  • If the element doesn’t have an ID, fail the test.
  • If the element ID doesn’t match the expected ID, fail the test.
  • If the ID matches, tab to the next element and loop.
		public void TestTabOrder()
		{
			//Code to open the page elided.
			....

			//This is the expected tab order. The strings are element IDs so the test assumes all of your elements have IDs.
			string[] orderedElementIds = new string[] { "FirstControl", "SecondControl", "NextControl" };

			foreach (var item in orderedElementIds)
			{
				string elementId = item;

				//Get the current active element, element with focus.
				IWebElement activeElement = webDriver.SwitchTo().ActiveElement();

				//Get the id of the active element
				string id = activeElement.GetAttribute("id");

				//If the active element doesn't have an id, fail the test because all of our elements have IDs.
				if (string.IsNullOrWhiteSpace(id))
				{
					throw new AssertionException("Element does not have expected ID: " + elementId);
				}

				//If the active element doesn't match the current ID in our orderedElementIds array, fail the test.
				if (elementId != id)
				{
					throw new AssertionException("Element: " + elementId + " does not have focus.");
				}

				//Tab to the next element.
				element.SendKeys(Keys.Tab);
			}
		}

You don’t have to assert anything as the exceptions will fail the test (using MSTest AssertionException), hence no exception equals passing test. You get a bonus assert with this test in that it also verifies that you have a certain element with default focus (the first element in the array).

I am sure there is a better way to do this, but it works. Hope this helps someone as it wasn’t something well publicized.

2 comments

  1. santosh

    This is useful.

    For case GWT framework app, we hardly have element id’s, do we have any alternative to verify this case using xpaths. Thanks

    Santtii

    • Charles

      In the example I am explicitly failing when an element didn’t have an Id because our code convention is to have Ids on every element. If you need another convention or method to identify an element, you would have to update the code so that you have a list of the identifiers you want to match on. Then you would have to grab the identifier from the active element and determine if it matches the expected identifier.

      If you use XPath, you may be setting yourself up for very brittle tests. Also, there isn’t an easy way to get the XPath from an active element. I have only seen this example (https://code.google.com/p/selenium/issues/detail?id=5520), but I have never tried it. I would look for some other way of uniquely identifying your elements. Does your elements have a unique name attribute?

      Please let me know what you come up with or if you have additional questions.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s