0

Having pretty complex angular application with many pages (states) and conditional sections that creates a lot of test scenarios I need to perform e2e tests. I'm tired of nested selectors like 'div.SomeComponent > ul:nth-child(2) > ... ' and so on even using BEM namings (especially when app is evolving and it's easy to spoil tests by little change of html structure).

The question is, would you guys opt for creating some dummy (empty) classes or data-* attrs just to simplify protractor (or groovy) selector at the expense of loosing semantics? What's the alternative?

adam
  • 2,264
  • 2
  • 13
  • 6

1 Answers1

0

To avoid changing your element definitions every time developers change the css and to avoid using long css strings to select your elements, you can try referring to them by other means (id, className, model, etc.). See https://github.com/angular/protractor/blob/master/docs/locators.md for examples.

My personal favorite is to use element(by.css('[ng-click="executeSomeAction()"]')) as this will most likely not change with any application updates. It also works for other directives as well.

As for testing applications with a high volume of pages and elements, it's nice to define your elements in a class(es) and then call them in the test spec as needed. This reduces the code in your specs and makes them easier to read. You may also want to create a separate file for actions/functions your tests perform.

Hope this helps answer to your questions.

KCaradonna
  • 760
  • 6
  • 13
  • 1
    I totally agree with protractor locators, actually my fav is to use element(by.model(modelName)). The case is the testers (that are not devs) are using some other testing framework - selenium, groovy. Despite the selectors will be very similar there is a situation where we have couple of very generic components on page. Let say we have 5 of them, but first is conditionally shown. Without having some dummy class like 'componentName1', 'componentName2' etc. or having some special data-* attrs they find hard to hook to the nth component as the 'n' is dynamic. – adam Feb 06 '16 at 09:47