如何单击量角器中的隐藏元素?

Posted

技术标签:

【中文标题】如何单击量角器中的隐藏元素?【英文标题】:How to click on hidden element in protractor? 【发布时间】:2014-04-11 11:35:12 【问题描述】:

我有一个元素,只有当我将鼠标悬停在它上面时才可见。

我编写了以下代码来悬停在面板上,以便元素可见。

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:元素不可见 量角器错误。

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

【问题讨论】:

无法发布我的答案,没有这样做的声誉。总之找到了答案。伙计们有答案,下面的代码对我有用 - 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.css('i.ng-scope.tea-ic-sorting')).then(function(elm) elm[0].click(); ); 我对您的问题投了赞成票,我想您现在可以将其设置为答案。我很惊讶 *** 上没有重复。这是一个反复出现的问题。 ;) 祝你好运! 谢谢。我现在将其设置为答案。 【参考方案1】:

有时,您会故意点击隐藏的元素。


一种选择是点击通过javascript

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

另请参阅:WebDriver click() vs JavaScript click()


另一个,使元素可见并单击它。现在,这取决于元素的隐藏方式 - 使用 style.blockstyle.visibility 或使用 ng-hide 等。示例解决方案我们将元素的 visibility 设置为 visible 并将 display 设置为 @987654329 @:

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

【讨论】:

第一个选项效果很好。我有一些测试已经在工作,但是一些同事改变了样式,由于某种奇怪的原因,我的代码不能再点击复选框,即使它们完全可见。谢谢! 如果它设置为 type="hidden",会有一个可以覆盖它的 executeScript 吗? @JeremyKahan 你,你可以做arguments[0].setAttribute('type', 'text'); 所以我尝试了,但即使在 EC.presenceOf(elm) 上的 browser.wait 之间的一行之后,我也得到了 arguments[0] 未定义 选项 1 没有给出关于选项 2 没有参数的错误,也没有给出量角器点击与不可见的东西交互的问题,但也没有给出填充底层菜单选项的结果实际点击在现实生活中的会话。【参考方案2】:

以下代码对我有用。

  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();
    );

【讨论】:

我试过了,但还是得到了"Element is not currently visible and may not be manipulated" 它可以悬停。在 Chrome 和 FireFox 中工作,但我试图在 PhantomJS 中强制点击,这对隐藏元素真的不满意。 Safari 也有鼠标功能的错误 - code.google.com/p/selenium/issues/detail?id=4136 对此非常感谢,我已经走错了路,试图让这个点击执行超过 24 小时,这种悬停方法第一次完美运行。谢谢!

以上是关于如何单击量角器中的隐藏元素?的主要内容,如果未能解决你的问题,请参考以下文章

如果单击两次而不在 vue nuxt 应用程序中切换,如何隐藏列表中的元素

如何在元素外部的任何位置隐藏单击事件上的元素?

通过单击 Android Map Fragment 中的地图来隐藏 UI 元素

单击到 iframe 时如何隐藏父元素

如何单击使用 Selenium WebDriver 隐藏的元素?

滚动到量角器中的第一个ng-repeat元素,然后单击