'$' selector in Protractor

Question

I have seen in many examples like this $('.selector') and I am also using this. So what this $ variable does. This is what I got from the protractor docs.

Calls to $ may be chained to find elements within a parent.

There is no example in docs which use $ alone. We are using $ to chain with element selector.

Also $('.selector') itself is an element, when we does this element($('.selector')), it is an error.

So how to use this $ selector in protractor. Does it have all the features of JQuery $. I tried $('.selector').children which says children is not a function.

Any help is greatly appreciated.

Thanks!

Answer 1

That looks like jQuery syntax but it is not, it's part of Protractor. That's why .children is throwing an error because we're not actually using jQuery. $ is a shorthanded version of element(by.css()) i.e.

$('my-css'); is the exact same as element(by.css('my-css'));

They also have $$ which is the same as element.all(by.css())

Despite the lack of documentation, it does not have to be used for chaining to find child elements. i.e. using Julie's protractor demo (I modified the example):

describe('Protractor Demo App', function() {
  it('read the header', function() {
    browser.get('http://juliemr.github.io/protractor-demo/');
    $('h3').getText().then(function (val) {
      console.log(val);
    });
  });
});

That prints out the title of the h3 element that I located. The $ and $$ are simply a shorthand for css selectors.

Source: here for $$, here for $, and here for more

Also this is a nice document I found (though it does not mention the use of $$ : http://luxiyalu.com/protractor-locators-selectors/

Answer 2

We made updates to the Protractor's API for $. Also, there are several places in Protractor's specs that use chained $. See below (from spec/async_spec.js):

  it('should work with synchronous actions', function() {
    var increment = $('#increment');
    increment.$('.action').click();

    expect(increment.$('.val').getText()).toEqual('1');
  });