Protractor “by.css()” vs “$()” Dollar Sign vs “$$()” 'Bling Bling'

Question

I don't really understand what the $ and $$ commands are for. I thought they are just a replacement for 'by.css' but why the $$?

<element id = "eId"></element>

I thought, that given the above, these would be equivalent:

element(by.css('#eId'));

and

element($('#eId'));

However, the first one works and the second doesn't. Why, what's the difference between the three?

The docs are of little help. They seem to imply that "$" is for chaining only, e.g. element(by.css('#eId')).element($('#childId')); or "Select the first element, and then select the second element within the first element.' However, I have seen examples with $ being used to select the first element.

Anyway, that's a lot of text for "What are the differences between the three (by.css, $, and $$)?"

Answer 1

$ and $$ are just suitable keyboard shortcuts.

 

$("selector")is an alternative for element(by.css("selector")).

 

$$("selector")is an alternative for element.all(by.css("selector")).

 

FYI, source code quotes :

ElementFinder.prototype.$ = function(selector) {

  return this.element(webdriver.By.css(selector));

};

 

ElementArrayFinder.prototype.$$ = function(selector) {

  return this.all(webdriver.By.css(selector));

};

And the real rejection that originally happened.