Identifying objects generated through framework and not built through raw HTML

Question

I have a scenario where i am unable to identify some of my objects on page. They don't have a unique identifier (like name, class, id). Our Dev team uses a JS framework which generates models, views, controllers etc and assigns id's dynamically. Also there are many children views which get dynamically generated with dynamic id's.

So i cannot use id's as it changes. I don't want to use xpath as it is not the industry standard. I tried css-selector but it gives me a long path not sure if that's a right way.

I wanted to know from all of you, is it a right practice to add extra attributes to an object in the development code for testing purpose ? Or is there any better way of handling these scenarios?

Answer 1

If you're actually using SproutCore, you can easily add a classNames (doc link) or layerId (doc link) property to any view to make the CSS selectors shorter.

For instance:

MyApp.MainListView = SC.ListView.extend({
  layerId: 'my_special_view',
  classNames: 'my-special-class',

  content: ["Hi", "Foo", "Bar"],

  exampleView: SC.ListItemView.extend({
    classNames: 'my-special-list-class'
  })
})

Note: You will want to only use the layerId property if you're positive that there will only be 1 instance of the view on the screen, otherwise, the classNames property is the better way to go.

I would recommend adding some class names that are not testing specific, but that allow you to use shorter CSS selectors.