Question

我是CSS新手，我试图避免在我的Protractor AngularJS测试自动化中使用xpath。我试图获得列表中的特定元素，我得到了，但是Protractor告诉我，找到了多个定位器元素。在将来，我想避免这种情况，因为我并不总是首先要在列表中。我对CSS有点困惑，到底如何到达我要去的地方，我发现的文档含糊不清。我试图抓住营销场地元素，但也需要在某些时候抓住下面的其他元素。最顶层的代码是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 =＆＃34; marketingVenue＆＃34;，那么您可以执行以下操作：

// 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选择器。

为了清除多个元素的警告，你必须得到所有元素都选择.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);

对于您的特定选择器，如果您无权编辑html，那么您可能正在考虑更改选择器，如果页面本身有任何更改，因为div选择器非常脆弱。你的选择器现在可能是这样的：

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

量角器AngularJS CSS选择器查找多个元素

1 个答案: