1

Our team is starting with Angular JS development and for testing we are using Jasmine-Karma-Protractor. The debate is whether we should use IDs for accessing DOM elements or use XPATH/CSS/Binding to access the elements since Angular doesn't really enforce use of IDs.

It is a question of best practice and I want to know what is recommended by the community. Please share what strategy is followed in your team.

Thanks.

Update

After going through all your answers and comments I realize that there is no specifically right or wrong way to do this. (Personally I am leaning towards using IDs!) We will have a meeting to discuss the approach we want and decide whether to use IDs or not. Thank you all very much for your help.

Abhishek
  • 249
  • 2
  • 15
  • I doubt the answers to this question might be opinion based. – Naman Jun 06 '16 at 06:33
  • There is also that partially related thread: http://stackoverflow.com/questions/37492803/test-automation-html-element-selectors-element-id-or-dataattribute/37493264#37493264. – alecxe Jun 06 '16 at 09:25

3 Answers3

4

Of course you should use IDs. That will make your tests much easier to write and read, faster, and most importantly, more robust: the test won't have to change every time the markup on the page changes for whatever reason (style, new layout, etc.).

It's much clearer to say "find the menu item 'customers'" than to say "find the 4th li contained in the third ul contained in the second div of the page".

JB Nizet
  • 678,734
  • 91
  • 1,224
  • 1,255
  • some times ID aren't fix and not all elements can have id in the provided code to test . – Emna Ayadi Jun 06 '16 at 07:30
  • 2
    @Emna so what? That doesn't mean you should never use IDs. Use static IDs when they make sense. Use dynamic IDs when they make sense. Use semantic CSS classes when they make sense. – JB Nizet Jun 06 '16 at 07:34
1

As i have worked on Protractor for 2 years and designed good POM testing framework from the scratch, i can suggest you below order for Angularjs application:

Order:

by.model()

by.repeater()

by.css()

by.id()

by.name()

by.xpath() - least preference

Optimworks
  • 2,537
  • 17
  • 20
0

I can also add 2 more options to the existing answers. :

  • by.className();
  • by.tagName();
  • by.cssSelector();

in case there is no fix id in your html code!

Emna Ayadi
  • 2,430
  • 8
  • 37
  • 77