量角器找到父元素答案

【问题标题】：Protractor find parent element量角器找到父元素
【发布时间】：2019-10-17 14:04:22
【问题描述】：

<label class="radio inline check">

            <input class="input ng-new ng-valid" name="BookType" required="" type="radio">

            <!---->

            <!---->
            Fiction
</label>

<label class="radio inline check">   

            <input class="input ng-new ng-valid" name="BookType" required="" type="radio">

            <!---->

            <!---->
            NonFiction
</label>

<label class="radio inline check">

            <input class="input ng-new ng-valid" name="BookTypeReal" required="" type="radio">

            <!---->

            <!---->
            Fiction
</label>

<label class="radio inline check">   

            <input class="input ng-new ng-valid" name="BookTypeReal" required="" type="radio">

            <!---->

            <!---->
            Fantasy
</label>

http://www.protractortest.org/#/api?view=ElementArrayFinder.prototype.filter

如果我使用

element.all(locator).filter(filterFn)

返回的文本为空。

如何去父元素<label> 获取文本？

label[class="radio inline check"]

返回 60 个元素，其中多个 getText 将返回相同的文本，因此它不会是唯一的。

input[name="BookType"]

返回两个元素，其中每个元素都是唯一的。

【问题讨论】：

您要测试的场景是什么？在我看来，selenium 测试应该总是知道他们在寻找什么，而不是试图用一些逻辑来弄清楚。因此，在这种情况下，您将寻找带有文本 Fiction 或 NonFiction 的元素，而不是在值为静态时找出文本是什么。不过很难确定，因为我不确定你的情况。
@mrfreester 我正在尝试单击带有 Fiction 标签的单选按钮/标签
所以你需要input？还是label？如果label 有奇怪的空格，您可以尝试//label[text()='Fiction'] 或//label[contains(text(),'Fiction')]。如果您需要input，您可以在其末尾添加/input。如果您可以确认这是您正在寻找的并且有效，我可以发布作为答案。
@mrfreester //label[contains(text(),'Fiction')] 或 //label[text()='Fiction'] 不起作用。我更新了上面的代码以显示有许多标签具有相同的文本“小说”，使每个标签独一无二的是 input[name] 值。我想点击文本为 Fiction 和的标签
我想我现在明白了。所以你在找这个？ //label[contains(text(),'Fiction') and ./input[@name='BookType']]。那是一个 xpath ......不幸的是 css 选择器没有选择父 :( 这太糟糕了，因为 css 选择器通常更容易阅读。

标签： selenium protractor

【解决方案1】：

我使用 TypeScript 使用了以下方法：

import {by, ElementFinder} from 'protractor';

export interface ElementDescriptor {
  tag?: string;
  cssClass?: string;
}

async function matches(element: ElementFinder, parentDescription: ElementDescriptor): Promise<boolean> {
  const promises = [];
  if (parentDescription.tag) {
    promises.push(element.getTagName());
  }
  if (parentDescription.cssClass) {
    promises.push(element.getAttribute('class'));
  }

  let i = 0;
  const results: string[] = await Promise.all(promises);

  return (!parentDescription.tag || results[i++] === parentDescription.tag)
    && (!parentDescription.cssClass || results[i++].split(' ').includes(parentDescription.cssClass));
}

export async function findParent(element: ElementFinder, parentDescription: ElementDescriptor): Promise<ElementFinder> {
  let parent: ElementFinder;
  do {
    parent = element.element(by.xpath('..'));
  } while ((await parent.getTagName()) !== 'html' && !(await matches(parent, parentDescription)));
  return parent;
}

【讨论】：

【解决方案2】：

要点击<input>标签，其<label>的文本为Fiction，<input>标签的名称为BookType，您可以使用以下xpath ：

"//label[@class='radio inline check' and contains(normalize-space(), 'Fiction')]/input[@class='input ng-new ng-valid' and @name='BookType']"

【讨论】：

【解决方案3】：

您有两种选择：

如您所述，获取父元素。为此，您可以像这样使用xpath's ancestor：

.//*[@name='BookType']/ancestor::label
用@name='BookType'获取文本作为元素的兄弟：

.//*[@name='BookType']/following-sibling::text()[normalize-space()]

【讨论】：

【解决方案4】：

在 Xpath 中，如果你想要输入的父级，你可以使用 //input[name="BookType"]/..

【讨论】：

【解决方案5】：

我根据网络上可用的详细信息对此进行了构架。请试一试。

element.all(by.css('.radio inline check')).filter(function(elem){
        return elem.element(by.xpath("//*[text()[contains(.,'Fiction')]]")).getText() 
        }).then(function(filteredElements){
        filteredElements.first().element(by.css('input[name=BookType]')).click();
        });

注意：您可能有一些格式问题。

【讨论】：