Learn CSS protractor chain

Question

For development and debugging purposes, it would be very helpful to know what a complete CSS chain is that I set in methods such as:

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 the locator property with:

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

But this is only the locator of the last element in the chain.

It would be very useful to have everything, for example: divElm, article, tbody > tr so I could debug it manually on the page to see if the element really exists or not.

UPDATE : I really need it when the expected selector function does not work (for example, using the isPresent () method), the error I get shows only the last selector in the chain. It would be very convenient if the whole chain is shown.

Answer 1

If you want to check the CSS chain directly from your browser, the easiest way to do this is to do what is offered in this wonderful article: http://yizeng.me/2014/03/23/evaluate-and-validate-xpath-css -selectors-in-chrome-developer-tools /

Thus, you no longer need to debug it, you know from the very beginning what matches your selector (and what doesn't)

Answer 2

The problem is that the last item contains an error, so if you want to see the full locator, try selecting the item in one step. For instance:

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

However, this is not the best for you, so you can get to the internal HTML using the protractor using getInnerHtml() if you want to identify the element.

You can get the locators one at a time. For example: divElm locator and divElm.element(by.css("article")) locator , etc.