Question

我认为有一种方法可以将定位器连接起来并让直接的孩子这样做。例如，假设我有以下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的情况下执行此操作？

Answer 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

Answer 2

自从我提出这个问题以来已经有一年多的时间了，它仍然有一些观点。使用locator().value非常好。但它并非万无一失。特别是在动态生成ElementFinders时。例如，element(by.css('tab[title="my tab"]')).element(by.css('.my.other.content')).locator().value只会返回.my.other.content。

在我的项目中，对于我的Page Object类，我使用一个字符串来保存定位器，然后公开公开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的函数。

Answer 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

您也可以使用该插件做一些很棒的工作...请确认

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

3 个答案: