Piyush Jajoo
Piyush Jajoo

Reputation: 1093

How to click on hidden element in protractor?

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.

Upvotes: 11

Views: 17383

Answers (2)

alecxe
alecxe

Reputation: 474221

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

Upvotes: 7

Piyush Jajoo
Piyush Jajoo

Reputation: 1093

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

Upvotes: 5

Related Questions