Use Selenium to Find Elements By Knockout’s Data-bind

Comments | Share

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”;
  this.name = 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” />
</div>

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();
page.SetName("Kevin");
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.