使用链接在量角器中获取直接子元素答案

【问题标题】：Getting direct child element in protractor using chaining使用链接在量角器中获取直接子元素
【发布时间】：2016-11-18 20:58:24
【问题描述】：

我认为有一种方法可以链接定位器并让直接孩子这样做。例如，假设我有以下 html 结构

<tab title="my tab">
    <div _ngcontent-cjx-7>
        <div class='my other content'>...</div
    </div>
</tab>

我有一个父 ElementFinder

var myTab = element(by.css('tab[title="my tab"]'));

但我需要选择那个 div。这对我不起作用，但我以为我见过类似的东西。

var myTabsDiv = myTab.$(' > div');

有没有办法在不回退到 xpath 的情况下做到这一点？

【问题讨论】：

标签： javascript xpath css-selectors protractor

【解决方案1】：

一般来说，没有办法在 CSS 选择器中引用当前节点。

您有三个选择：

有点违反DRY原则，重复父定位器：

var myTabsDiv = myTab.$('tab[title="my tab"] > div');

或恢复为 XPath 定位技术：

var myTabsDiv = myTab.element(by.xpath('./div'));

或者，这是 Protractor 特定的：获取父元素的 locator() 并连接以创建一个新的 CSS 选择器：
```
var myTabsDiv = myTab.$(myTab.locator().value + ' > div');
```

我最近也遇到了类似的问题：

Using CSS selectors instead of XPath locators when searching through siblings

【讨论】：

我是这么认为的。我想我已经看到了我所展示的一个例子，那个量角器有一些秘诀可以做到这一点。我很喜欢这个解决方案。
@Macchtyn 等等，我想我有第三个选项。你能检查一下它是否适合你吗？
@Macchtyn 抱歉，.key 应该是 .value - 已修复 - 对我有用 :)
您的更新适用于 myTab.locator().value ...我不确定这是否“更容易”，我想需要进行一些测试以确定它是否是比使用 xpath 解决方案更快。

【解决方案2】：

我问这个问题已经一年多了，它仍然得到一些意见。使用locator().value 非常好。但这并非万无一失。特别是在动态生成 ElementFinder 时。例如，element(by.css('tab[title="my tab"]')).element(by.css('.my.other.content')).locator().value 只会返回 .my.other.content。

在我的项目中，对于我的页面对象类，我使用字符串来保存定位器，然后公开公开 ElementFinder 对象。

假设我们有一个结构如下的页面：

<tab title="my tab">
    <div _ngcontent-cjx-7>
        <div class='my other content'>...</div
    </div>
    <div id="shopping-cart"> ... </div>
    <div class="pricing">
        <div class="sub-total">...</div>
        <div class="tax">...</div>
        <div class="total">...</div>
    </div>
</tab>

我的打字稿页面对象可能如下所示：

export class TheTab {
    private static myTab = 'tab[title="my tab"]';
    private static otherContent = '.my.other.content';
    private static shoppingCart = '#shopping-cart';
    private static subTotal = '.pricing > .sub-total';
    private static tax = '.pricing > .tax';
    private static total = '.pricing > .total';

    public static myTabEl = $(TheTab.myTab);
    public static otherContentEl = $(`${TheTab.myTab} ${TheTab.otherContent});
    public static shoppingCartEl = $(`${TheTab.myTab} > ${TheTab.shoppingCart});
    public static subTotalEl = $(`${TheTab.myTab} > ${TheTab.subTotal});
    public static taxEl = $(`${TheTab.myTab} > ${TheTab.tax});
    public static totalEl = $(`${TheTab.myTab} > ${TheTab.total});
}

如果需要动态生成 ElementFinder，则可能需要公开字符串或提供使用私有字符串构建和返回 ElementFinder 的函数。

【讨论】：

【解决方案3】：

使用 Xpath 选择器并不是一个更好的选择，因为它会减慢元素查找机制。

使用protractor-css-booster 插件将非常简单。

下载插件

npm install --save protractor-css-booster

在你的配置文件中添加插件：

exports.config = {
  // ... the rest of your config
  plugins: [
    {
      // The module name
      package: "protractor-css-booster"
    }
  ]
};

现在，您可以找到如下元素：

const divElement=element(by.firstChildOf('tab[title="my tab"]')); \\ returns the first div

你也可以用这个插件做一些很酷的工作人员......检查一下

【讨论】：