protractor 中的$与$$

protractor API

以下内容仅代表个人观点，欢迎指点，补充~

element.all中有个$$

用CSS查找元素数组的简写函数。element.all(by.css('.abc'))相当于$$('.abc')；

view

<div class="count">
  <span class="one">First</span>
  <span class="two">Second</span>
</div>

code

// The following two blocks of code are equivalent.
let list = element.all(by.css('.count span'));
expect(list.count()).toBe(2);
expect(list.get(0).getText()).toBe('First');
expect(list.get(1).getText()).toBe('Second');

// Or using the shortcut $$() notation instead of element.all(by.css()):

let list = $$('.count span');
expect(list.count()).toBe(2);
expect(list.get(0).getText()).toBe('First');
expect(list.get(1).getText()).toBe('Second');

从上图的例子中可以看到element.all也就是当前页面的所有元素，通过css的选择器选择到类名为count下的span标签

另外还是element下有$与$$，在我的理解中$与$$的区别是$是查找单个元素，而$$是查找一个数组，也就是一类元素

 调用$可以被链接到父元素中查找元素

view

<div class="parent">
  <div class="child">
    Child text
    <div>{{person.phone}}</div>
  </div>
</div>

code

// Chain 2 element calls.
let child = element(by.css('.parent')).
    $('.child');
expect(child.getText()).toBe('Child text\n555-123-4567');

// Chain 3 element calls.
let triple = element(by.css('.parent')).
    $('.child').
    element(by.binding('person.phone'));
expect(triple.getText()).toBe('555-123-4567');

// Or using the shortcut $() notation instead of element(by.css()):

// Chain 2 element calls.
let child = $('.parent').$('.child');
expect(child.getText()).toBe('Child text\n555-123-4567');

// Chain 3 element calls.
let triple = $('.parent').$('.child').
    element(by.binding('person.phone'));
expect(triple.getText()).toBe('555-123-4567');

-------------------------------------------------1-------------------------------------

调用$$可以被链接以查找父元素中的数组

view

<div class="parent">
  <ul>
    <li class="one">First</li>
    <li class="two">Second</li>
    <li class="three">Third</li>
  </ul>
</div>

code

let items = element(by.css('.parent')).$$('li');

// Or using the shortcut $() notation instead of element(by.css()):

let items = $('.parent').$$('li');

个人理解：element.all中的$$就是根据css选择器来查找元素，单个或多个都适应

element中的$与$$就会分一些情况来选择使用，例如是ul下的多个元素则使用$$

总的来说就是 ： $$的使用范围大于$，$$可以是单个也可以是多个，$只能是单个