6

For development and debugging purposes it would be really good to know what is the full chain of CSS I'm asking in methods like:

divElm.element(by.css("article")).element(by.css("tbody > tr")).then(function(elm) {
  // is there a way to know here what is the "CSS chain" of 'elm'?
});

If I debug elm I see a locator property with:

locator_: { using: 'css selector', value: 'tbody > tr' },

But that's only the locator of the last element in the chain.

It would be really useful to have all, like: divElm, article, tbody > tr in this way I'd be able to debug this manually on the page to see if the element really exists or not.

UPDATE: what I really need is, when a Protractor selector expectation fails (e.g. using isPresent() method), the error I get only shows the last selector in the chain. It would be really handy if the whole chain is shown.

hhaamm
  • 398
  • 1
  • 2
  • 13
  • 1
    I don't think that's possible, because getting parent element can be achieved through other ways too. Even Selenium hasn't included such method - [here's a link of that](https://groups.google.com/forum/#!topic/webdriver/UDdU8FkQTSo). However you can use xpath to get to the parent element. [Here's how](http://stackoverflow.com/a/18001659/4180674) – giri-sh Oct 01 '15 at 08:50
  • Do you want the exact values you've used in Protractor to reach the element or the full DOM path withing HTML document? – Michael Radionov Oct 01 '15 at 11:39
  • Sorry, maybe the question was confusing. I want the exact selectors / values I used in Protractor to reach the element, not the full DOM path. – hhaamm Oct 02 '15 at 02:38
  • 1
    Why would you need it when it's declared right there: element(by.css("article")).element(by.css("tbody > tr")) ? – alcfeoh Oct 15 '15 at 20:03
  • Well, you got the point. This is a simplified example. If you implement something like PageObjects concept, or you have a more complex hierarchical object relationship (ej: Page > section > header) then you might waste some time trying to know what's the complete protractor selector. I'm able to discover the full chain, but it takes some time if I the selector has many parents. And the only error I get in a failed expectation is related only with the LAST selector in the chain. – hhaamm Oct 16 '15 at 02:43

2 Answers2

0

If you want to test a CSS chain right from your browser, the easiest way to do it is do what is suggested in that excellent article: http://yizeng.me/2014/03/23/evaluate-and-validate-xpath-css-selectors-in-chrome-developer-tools/

That way you don't have to debug it anymore, you know right from the start what your selector matches (and what it doesn't)

alcfeoh
  • 2,147
  • 1
  • 18
  • 33
  • I'm familiar with Google / FF Developer Tools. The problem is that I usually have to reconstruct the whole CSS chain because I have a hierarchy of objects, e.g. Page > section > header, so I have to look for the parent... etc. So what I really want is, when an expectation fail because a selector, to have ALL the protractor selectors displayed in the error and not only the last selector in the chain. – hhaamm Oct 16 '15 at 02:47
  • Another option is to add IDs to your elements. That way you won't waste any more time with complex selectors. – alcfeoh Oct 18 '15 at 16:44
0

The problem is that, the last element occurs the error, so if you want to see the full locator, try to select the element in one step. For example:

var el = element(by.css("article > tbody > tr"));

However it is not the best for you, so you can reach the inner HTML with protractor with getInnerHtml(), if you want to identify the element.

You can get the locators one by one. For eg.: divElm locator and divElm.element(by.css("article")) locator etc.

Zippy
  • 1,804
  • 5
  • 27
  • 36
ktom
  • 228
  • 1
  • 3
  • 11