Protractor - 元素不可见（但手动检查时可见）

Question

我很高兴能帮助您。我对protractor并不熟悉。在protractor中无法单击元素，即使手动检查时可见，也会显示其不可见。以下是详细信息：

CSS代码：

<div class="list" ng-click="openOtherUsers(perCrisis)" ng-show="detailView">
<div class="item item-input-inset content-bg search-bar">
<button class="button button-clear" type="button">
<i class="icon ion-chevron-right"></i>
</button>
<label class="item-input-wrapper">
<i class="icon acc-search placeholder-icon"></i>
<input class="ng-pristine ng-untouched ng-valid" type="text" placeholder="Search for people" ng-model="search.keywords">
</label>
</div>
</div>

Protractor 代码：

it("this is a trail for SEARCH click", function () {
    browser.waitForAngular();
    var search = element(by.css('.list.list'));
    //expect(search.isPresent()).toBeTruthy(); <<<<< PRESENT, but if     //isDisplayed is used: its false
    search.click(); 
});

请注意：父类为列表，我也尝试使用“list”、“[ng-click="openOtherUsers(perCrisis)"]”或“[ng-show="detailView"]”作为CSS定位器。

希望你能帮助我解决这个问题。谢谢。

- Mer Boy Anthony Duran

---

这方面有任何进展吗？ - Julio Marins

Answer 1

问题的可能原因之一是，可能有另一个与定位器匹配的元素。在这种情况下，您可能需要改进您的定位器以唯一标识所需的元素。

另一件可能有帮助的事情是等待 - 我们会等待元素变得可见：

var search = element(by.css('[ng-click="openOtherUsers(perCrisis)"]')),
    EC = protractor.ExpectedConditions;

browser.wait(EC.visibilityOf(search), 5000);

search.click();

- alecxe

---

嗨@alecxe。感谢您的回复，非常感激。但是它没有起作用，即使将等待时间延长到20秒，但仍然没有。 - Mer Boy Anthony Duran

@MerBoyAnthonyDuran 你确定这个元素是唯一匹配的定位器吗？在测试运行期间是否收到任何警告？谢谢。 - alecxe

嗨@alecxe。我实际上尝试获取所有元素，然后点击第一个找到的元素-但仍然不起作用。实际上，我有很多元素，当单击时返回“元素不可见”错误。我是protractor的新手，所以我真的不知道如何处理它。非常感谢您的帮助。 - Mer Boy Anthony Duran

当我尝试获取所有元素时，出现了错误：无法读取未定义的属性“bind”。 - Mer Boy Anthony Duran

嗨 @alecxe，我猜你是对的，有许多与定位器匹配的元素 - 当我使用isPresent时找到了它（尽管isDisplayed返回false）。你如何处理这个问题？我不明白为什么它会说它不可见，而在手动测试期间，它是可见的。 - Mer Boy Anthony Duran

Answer 2

你可以尝试使用“actions”将鼠标移动到元素上，然后执行click()。

browser.actions().mouseMove(search, 1, 1).perform().then(function(){elem.click()});

- CodeJockey

---

嗨，@CodeRJ。谢谢回复。我已经尝试了，但它仍然返回“元素不可见”。 - Mer Boy Anthony Duran

Answer 3

isClickable: async function(el) {
  if (await el.isPresent()) {
    if (await el.isDisplayed()) {
      if (await el.isEnabled()) {
        return true;
      }
    }
  }
  return false;
},

我之前写了这个来解决那个问题。await需要异步 (node 8+), 但简化了事情。但这显示了元素的可访问性层次结构。

要启用它，它必须被显示，并且要显示它必须被呈现。

- Drew Royster