'$' 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!

Flop

$ stands for jQuery. So $(".selector") means all elements with class as selector. – Axil

Refer : angular.element Angular's built in subset of jQuery => jqLite – Axil

use angular.element instead of $, it works only on the part document of a directive and not on the entire html document – Lacerta

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/

Disbelieve

Thanks for pointing out $('my-css') is same as element(by.css('my-css')), which is not mentioned in documentation. – Flop

Yea for some reason that's not documented on the Protractor API - and it's only mentioned once here: github.com/angular/protractor/blob/master/docs/locators.md – Disbelieve

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');
  });

Senegal

Answer 3

This is the correct API doc for $:

"Shortcut for querying the document directly with css. element(by.css('.abc')) is equivalent to $('.abc')"

http://www.protractortest.org/#/api?view=build$

Proctoscope