Geeks With Blogs

News Please visit me at my new blog!!

profile for Aligned at Stack Overflow, Q&A for professional and enthusiast programmers
"free in Christ Jesus from the law of sin and death." Romans 8:2 (ESV) Check out the Falling Plates video on YouTube.
more about the Gospel
And then listen to Francis Chan speaking at LifeLight in SD.

Programming and Learning from SD

I created a quick C# extension method for Selenium to find an element by its data-bind attribute. I wanted to find an element by the binding instead of having to add a class or id to the element.

If you have a Knockout Model

function MyViewModel()
  “use strict”; = ko.observable();

In the html the element may look like this

<input id="nameInput" data-bind="text: name" />
<div id="infoContainer">
  <span data-bind=”text: name/>

With the extension method I can call:

public class MappedPage
   public string GetName()
      var container= Browser.Driver.FindElement(By.Id("infoContainer"));

      // call the extension method
      return container.FindElementByDataBind("name").Text;
  public void SetName(string name)
    // ... assume code to set the text box...

// in a test method
var page = new MappedPage();
Assert.AreEqual("Kevin", page.GetName();, "Name should match what I put in the text box");


Here’s the extension method in a static class. Don’t forget to add the using statement to this class to be able to find the method (Resharper helps you find it if you have Resharper)

public static WebElementExtensions
    /// <summary>
    /// Find the element by data bind property.
    /// ex: (data-bind='text: name').
    /// </summary>
    /// <param name="element">
    /// The container element.
    /// </param>
    /// <param name="dataBindProperty">
    /// The data bind property.
    /// </param>
    /// <param name="binding">
    /// The binding after data-bind=. For example text
    /// </param>
    /// <returns>
    /// The <see cref="IWebElement"/>.
    /// </returns>
    public static IWebElement FindElementByDataBind(this IWebElement element, string dataBindProperty, string binding = "text")
        return element.FindElement(By.CssSelector(string.Format("[data-bind*='{0}: {1}']", binding, dataBindProperty)));

Update: the above only works if the the data-bind matches exactly. Changing to data-bind*=’{0}: {1}’] changes the search with contains. Sauce has a nice reference on css selectors.

Posted on Wednesday, July 9, 2014 11:14 AM Unit Testing , UI Automated Testing , Selenium | Back to top

Comments on this post: Use Selenium to Find Elements By Knockout’s Data-bind

No comments posted yet.
Your comment:
 (will show your gravatar)

Copyright © Aligned | Powered by: