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

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

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 { ///

/// Find the element by data bind property. /// ex: (data-bind='text: name'). ///

/// /// The container element. /// /// /// The data bind property. /// /// /// The binding after data-bind=. For example text /// /// /// The . /// 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.

New on Geeks with Blogs