11

I have an element which is visible only when I hover over it.

I've written following code to hove over the panel so that the element is visible.

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

Now I tried to click on it, but it says - ElementNotVisibleError: element not visible error in protractor.

Basic scenario is, I want to hover over a panel and then click on the hidden element, because the element is not visible until it is hovered over.

Piyush Jajoo
  • 1,095
  • 2
  • 18
  • 27
  • Can't post my answer, don't have reputation to do it. Anyways found the answer. Guys have the answer, following code worked for me - `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(); });` – Piyush Jajoo Mar 08 '14 at 04:40
  • I voted up your question, I think you'll be able to set this as an answer now. I'm surprised there were no duplicate on StackOverflow. This is a recurrent issue. ;) Good luck! – glepretre Mar 11 '14 at 08:15
  • Thanks. I will set this as an answer now. – Piyush Jajoo Mar 11 '14 at 09:44

2 Answers2

7

Sometimes, there are cases when you intentionally want to click a hidden element.

One option would be to click via javascript:

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

See also: WebDriver click() vs JavaScript click()

Another, to make an element visible and click it. Now, this depends on how the element was hidden - with a style.block or style.visibility or with the ng-hide etc. Sample solution where we set the element's visibility to visible and the display to block:

var elm = element(by.id("myid"));
browser.executeScript(function (arguments) {
    arguments[0].style.visibility = 'visible'; 
    arguments[0].style.display = 'block';
}, elm.getWebElement());
Community
  • 1
  • 1
alecxe
  • 462,703
  • 120
  • 1,088
  • 1,195
  • The first option worked fine. I had some tests that were already working, but some colleagues changed the styles and for some strange reason my code could no longer click on the checkboxes, even when they were fully visible. Thanks! – Óscar Palacios Jun 15 '16 at 23:17
  • If it were set up with type="hidden", would there be an executeScript that could override that? – Jeremy Kahan Mar 21 '17 at 02:45
  • 1
    @JeremyKahan you, you can do `arguments[0].setAttribute('type', 'text');` – alecxe Mar 21 '17 at 03:04
  • so I tried, but I got arguments[0] is undefined even after a line in between that did a browser.wait on EC.presenceOf(elm) – Jeremy Kahan Mar 22 '17 at 04:18
  • Option 1 does not give the error about no arguments you get with option 2 nor the problem with protractor's click about interacting with something not visible, but also does not give the result of populating the underlying menu options that an actual click does in a real life session. – Jeremy Kahan Mar 22 '17 at 04:27
  • and after the executescript click and a browser.sleep, the element still does not have focus, and browser.actions().sendKeys(" ", protractor.Key.DOWNARROW).perform(); do not get through to it. – Jeremy Kahan Mar 22 '17 at 04:55
  • terrible hack: bypassed the whole issue by taking the element and saying: browser.executeScript("arguments[0].setAttribute('value','"+t+"');", elm.getWebElement()); where t was a string holding the desired value. Note I am just trying to automate a repeated task, not to test the product, so anything that would get past this was good. Thanks for the help @alecxe – Jeremy Kahan Mar 22 '17 at 05:12
5

Following code worked for me.

  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();
    });
Piyush Jajoo
  • 1,095
  • 2
  • 18
  • 27
  • I tried this but still got `"Element is not currently visible and may not be manipulated"` – BradGreens Apr 28 '14 at 20:32
  • It's hoverable. Works in Chrome and FireFox but am trying to force the click in PhantomJS, which really isn't happy about the hidden element. And Safari has a bug with mouse functions as well - https://code.google.com/p/selenium/issues/detail?id=4136 – BradGreens Apr 29 '14 at 15:11
  • Can't thank you enough for this, I have been going down the wrong path trying to get this click to execute for over 24 hours now and this hover method worked perfectly the first time. Thank you! – parchambeau Jan 28 '15 at 18:53