Protractor AngularJS CSS 选择器查找多个元素

Question

我是 CSS 的新手，我试图避免在 Protractor AngularJS 测试自动化中使用 xpath。我正在尝试获取列表中的特定元素，我正在获取该元素，但是 Protractor 告诉我找到了多个用于定位器的元素。将来我想避免这种情况，因为我并不总是想要在列表中排在第一位。我对 CSS 以及如何到达我要去的地方以及我找到的文档含糊不清感到有些困惑。我正在尝试获取 Marketing Venue 元素，但在某些时候还需要获取下面的其他元素。最上面的代码是 AngularJS 以及我目前如何抓取文本。提前致谢。

var iPlanLevel=element(by.css("div:nth-of-type(2) > div:nth-of-type(2) > div > div:nth-of-type(1) > span")).getText().then(function (text) {
  console.log(text);
}
);

<!-- begin snippet: js hide: false -->

<div class="home-info">

  <span class="web-developer-id-class-details"></span>
  <div class="home-top home-section"></div>
  <span class="web-developer-id-class-details"></span>
  <div class="home-bottom home-section">
    <h3></h3>
    <span class="web-developer-id-class-details"></span>
    <div class="home-box">
      <span class="web-developer-id-class-details"></span>
      <span class="home-name"></span>
      <br></br>


      Lindemannstrasse 88

      <br></br>


      Dortmund 44137

      <br></br>
      <br></br>
      <span class="web-developer-id-class-details"></span>
      <div class="property-group meduim">
        <div></div>
        <span>

                    MarketingVenue

                </span>
      </div>
      <span class="web-developer-id-class-details">

                .property-group.meduim

            </span>
      <div class="property-group meduim">
        <div></div>
        <span>

                    December 31, 2016

                </span>
      </div>
      <span class="web-developer-id-class-details"></span>
      <div class="property-group meduim"></div>
      <div></div>
      <br></br>
    </div>
    <span class="web-developer-id-class-details"></span>
    <div class="home-box"></div>
  </div>

</div>

Answer 1

您可以编辑您正在测试的 HTML 吗？如果是这样，将标签添加到 Marketing Venue 跨度中将非常有用。假设你添加 name="marketingVenue"，那么你可以这样做：

// Element by css selector shorthand($ = by.css())
var marketingVenue = $('[name="marketingVenue"]');

// Child selector using css selector shorthand
var marketingChild = marketingVenue.$('[name="childBeneathMarketingVenue]');

// Child selector using a variable and element(el.locator())
var marketingChildSelector = $('[name="childBeneathMarketingVenue"]');
var marketingChild = marketingVenue.element(marketingChildSelector.locator());

如果您无法编辑 HTML，您仍然可以使用上面的代码，但是使用更长、更脆弱的 css select 或。

要清除多个元素的警告，您必须获取所有元素 select .first 或 .get(x) 数组中的特定元素。

// Get all elements with a tag using shorthand $$ element.all(by.css(x))
var marketingVenues = $$('[name="marketingVenues"]');
var firstMarketingVenue = marketingVenues.first();
var specificMarketingVenue = marketingVenues.get(12); // Get the 13th element from the array

您也可以使用此功能仅抓取可见元素，假设您的 html 有一些隐藏元素和一些可见元素。

// Pass a string css selector to get the first visible element of that selector
function getVisibleElements(selector){
    var allElementsOfSelector = element.all(by.css(selector));
    var displayedElement = allElementsOfSelector .filter(function(elem) {
        return elem.isDisplayed('cannot find' + ' ' + selector);
    }) // Add '.first();' here if you want just the first visible
    return displayedElement ;
}

var visibleMarketingVenues = getVisibleElements('[name="marketingVenues"]');
var marketingVenue = visibleMarketingVenues.first();
var fifthMarketingVenue = visibleMarketingVenues.get(4);

对于您的特定 select 或者，如果您无权编辑 html，您可能正在考虑更改 select 或者如果页面本身有任何更改, 因为 div select 或真的很脆弱。您的 selector 现在可能是这样的：

var marketingVenue = $$('.property-group').get(0).$('span');

Protractor AngularJS CSS 选择器查找多个元素

Protractor AngularJS CSS selector finding multiple elements

html

css

angularjs

protractor