vishnu vishnu - 2 months ago 15
AngularJS Question

'$' selector in Protractor

I have seen in many examples like this

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

itself is an element, when we does this
, it is an error.

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

Any help is greatly appreciated.



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() {
    $('h3').getText().then(function (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 $$ :