如何点击量角器中的隐藏元素？

Question

我有一个元素，只有当我悬停在它上面时才可见。

我编写了以下代码来覆盖面板，以便元素可见。

ptor.actions().
            mouseMove(ptor.findElement(protractor.By.xpath('//*[@id="productapp"]/div/div/div[2]/div/div/div/div[2]/div/div/div/div[4]/table/thead/tr/th[2]'))).
            perform();
        ptor.element.all(by.tagName('i')).then(function(elm){
            elm[0].click();
        });

现在我试着点击它，但它说-ElementNotVisibleError：量角器中的元素不可见错误。

基本场景是，我想将鼠标悬停在面板上，然后单击隐藏元素，因为该元素在悬停之前是不可见的。

Answer 1

以下代码对我有用。

  ptor.actions().
    mouseMove(ptor.findElement(protractor.By.xpath('//*@id="productapp"]/div/div/di‌​v[2]/div/div/div/div[2]/div/div/div/div[4]/table/thead/tr/th[2]'))).perform();

   ptor.element.all(by.css('i.ng-scope.tea-ic-sorting')).then(function(elm){
       elm[0].click();
    });

Answer 2

有时，在某些情况下，您有意要单击隐藏的元素。

一种选择是通过脚本单击：

var elm = element(by.id("myid"));
browser.executeScript("arguments[0].click();", elm.getWebElement());

另请参见：网络驱动程序单击（） 与 JavaScript 单击（）

另一种方法是，使一个元素可见并单击它。现在，这取决于元素是如何隐藏的——用< code>style.block或< code>style.visibility或用< code>ng-hide等。我们将元素的< code>visibility设置为< code>visible并将< code>display设置为< code>block的示例解决方案:

var elm = element(by.id("myid"));
browser.executeScript(function (arguments) {
    arguments[0].style.visibility = 'visible'; 
    arguments[0].style.display = 'block';
}, elm.getWebElement());