量角器中的“$”选择器答案

【问题标题】：'$' selector in Protractor量角器中的“$”选择器
【发布时间】：2016-04-22 10:32:38
【问题描述】：

我在很多这样的例子中看到过$('.selector')，我也在使用它。那么这个 $ 变量做了什么。这是我从量角器docs得到的。

对 $ 的调用可能会被链接起来以查找父元素中的元素。

文档中没有单独使用$ 的示例。我们使用$ 与element 选择器链接。

另外$('.selector')本身就是一个元素，当我们这样做element($('.selector'))时，它是一个错误。

那么如何在量角器中使用这个$ 选择器。它是否具有JQuery $ 的所有功能。我试过$('.selector').children，它说children 不是一个函数。

非常感谢任何帮助。

谢谢！

【问题讨论】：

$ 代表 jQuery。所以$(".selector") 表示所有以类为选择器的元素。
参考：angular.element Angular 内置的 jQuery 子集 => jqLite
使用 angular.element 代替 $，它只适用于指令的部分文档，而不适用于整个 html 文档

标签： angularjs protractor angularjs-e2e gulp-protractor

【解决方案1】：

看起来类似于 jQuery 语法，但实际上并非如此，它是 Protractor 的一部分。这就是.children 抛出错误的原因，因为我们实际上并没有使用 jQuery。 $ 是 element(by.css()) 的简写版本，即

$('my-css'); 与element(by.css('my-css')); 完全相同

他们也有$$，和element.all(by.css())一样

尽管缺乏文档，但它确实不是 必须用于链接来查找子元素。即使用 Julie 的量角器演示（我修改了示例）：

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

打印出我找到的 h3 元素的标题。 $ 和 $$ 只是 CSS 选择器的简写。

来源：here for $$、here for $ 和 here for more

这也是我找到的一个不错的文档（虽然它没有提到$$ 的使用：http://luxiyalu.com/protractor-locators-selectors/

【讨论】：

感谢指出$('my-css') 与element(by.css('my-css')) 相同，文档中未提及。
是的，出于某种原因，Protractor API 上没有记录 - 而且这里只提到过一次：github.com/angular/protractor/blob/master/docs/locators.md

【解决方案2】：

我们为 $ 更新了 Protractor 的 API。此外，Protractor 的规范中有几个地方使用了链式 $。见下文（来自spec/async_spec.js）：

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

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

【讨论】：

【解决方案3】：

这是 $ 的正确 API 文档：

"直接用css查询文档的快捷方式。element(by.css('.abc'))相当于$('.abc')"

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

【讨论】：