找出量角器元素 CSS 链答案

【问题标题】：Find out protractor element CSS chain找出量角器元素 CSS 链
【发布时间】：2015-12-28 20:05:15
【问题描述】：

出于开发和调试目的，最好知道我在以下方法中询问的完整 CSS 链是什么：

divElm.element(by.css("article")).element(by.css("tbody > tr")).then(function(elm) {
  // is there a way to know here what is the "CSS chain" of 'elm'?
});

如果我调试elm，我会看到locator 属性：

locator_: { using: 'css selector', value: 'tbody > tr' },

但这只是链中最后一个元素的定位器。

拥有所有这些真的很有用，例如：divElm, article, tbody > tr 这样我就可以在页面上手动调试它以查看该元素是否真的存在。

更新：我真正需要的是，当量角器选择器期望失败（例如使用 isPresent() 方法）时，我得到的错误只显示 链中的最后一个 选择器。如果显示整个链条，那将非常方便。

【问题讨论】：

我不认为这是可能的，因为获取父元素也可以通过其他方式实现。甚至 Selenium 也没有包含这种方法 - here's a link of that。但是，您可以使用 xpath 来获取父元素。 Here's how
您希望在 Protractor 中使用的确切值到达元素或 HTML 文档的完整 DOM 路径？
抱歉，问题可能令人困惑。我希望我在 Protractor 中使用的确切选择器/值能够到达元素，而不是完整的 DOM 路径。
当它在那里声明时你为什么需要它： element(by.css("article")).element(by.css("tbody > tr")) ？
嗯，你明白了。这是一个简化的例子。如果您实现了类似 PageObjects 概念的东西，或者您有更复杂的分层对象关系（ej：Page > section > header），那么您可能会浪费一些时间来尝试了解完整的量角器选择器是什么。我能够发现完整的链，但如果我的选择器有很多父母，则需要一些时间。我在失败的期望中得到的唯一错误仅与链中的 LAST 选择器有关。

标签： javascript angularjs css-selectors protractor

【解决方案1】：

问题是，最后一个元素出现错误，所以如果你想看到完整的定位器，尝试一步选择元素。例如：

var el = element(by.css("article > tbody > tr"));

但是它不是最适合你的，所以如果你想识别元素，你可以使用 getInnerHtml() 的量角器到达内部 HTML。

您可以一一获取定位器。例如：divElm locator 和 divElm.element(by.css("article")) locator 等。

【讨论】：

【解决方案2】：

如果您想直接从浏览器测试 CSS 链，最简单的方法是按照那篇优秀文章中的建议进行操作： http://yizeng.me/2014/03/23/evaluate-and-validate-xpath-css-selectors-in-chrome-developer-tools/

这样你就不必再调试它了，你从一开始就知道你的选择器匹配什么（什么不匹配）

【讨论】：

我熟悉 Google/FF 开发者工具。问题是我通常必须重建整个 CSS 链，因为我有一个对象层次结构，例如页面>部分>标题，所以我必须寻找父...等等。所以我真正想要的是，当期望因为选择器而失败时，让所有量角器选择器显示在错误中，而不仅仅是最后一个选择器在链中。
另一种选择是为您的元素添加 ID。这样你就不会再浪费时间在复杂的选择器上了。