How to click on hidden element in protractor?

Question

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.

pto         


        

Answer 1

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