How to Click on Hidden Element in Protractor

How to click on hidden element in protractor?

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

A way of clicking on hidden elements in protractor end to end tests

ok so after a long and painful search trying to find an answer to this question I finally came across the answer trying to answer a different question.

Most of the documentation I found explain that we must use Actions in the form of a WebElement and then cast that to Javascript and pass it a script element in the form of an array with the click action.

Well the same kinds goes here but with a few modifications.

describe('', function() {
    var ptor = protractor.getInstance();
    var driver = ptor.driver;

    it('', function() {
        var hiddenElement = driver.findElement(protractor.By.yourchosenlocator(''));
        driver.executeScript("arguments[0].click()", hiddenElement).then(function() {
            expect(whatever).toMatch(whatever);
        });
    }, 30000);
});

as you can see there is no use of webelement and no cast required.

Here are the sources that helped me in my search for answers

How do you click on an element which is hidden using Selenium Webdriver?

SELENIUM WEBDRIVER – HOW TO CLICK ON A HIDDEN LINK OR MENU

Selenium WebDriver - hidden select and anchor

Not able to click on hidden element in protractor?(Please go through the image.)

browser.actions(), "by link text" and the "by partial link text" locators should help here:

var EC = protractor.ExpectedConditions;

// open up the menu

// choose position
var choosePosition = element(by.linkText('Create Position'));
browser.actions().mouseMove(choosePosition).perform();

// choose new position
var newPosition = $('a[ng-click*=openPositionModal]');
browser.wait(EC.elementToBeClickable(newPosition), 3000);
newPosition.click();

Cannot select hidden element in drop down list in Protractor

Use following code. :)

// Create instance of Javascript executor
JavascriptExecutor je = (JavascriptExecutor) driver;
//Identify the WebElement which will appear after scrolling down
WebElement element = driver.findElement(By.tagName("...."));
// now execute query which actually will scroll until that element is not appeared on page.
je.executeScript("arguments[0].scrollIntoView(true);",element);

Protractor - Can't click on invisible ng-click element

Are you sure there are no other elements having ng-click="reply()"?

Judging by the source code of the provided page, this is exactly the case. There are two elements having ng-click="reply()" and the first one is disabled which means you cannot interact with it. You need the second element:

$$('[ng-click="reply()"]').last().click();

You may also improve your selector to match the element inside the button bar:

$('.actions-bar > [ng-click="reply()"]').click();

How to select a visible element in Protractor with Angularjs

Working with angular, it is pretty common to have many layers of the same bit of html hidden, but earlier in the overall html page than the visible element you would like to work with.

For general debugging, open up your site to the position you expect your protractor test to be in, then open the html and do a search on the html for the element your protractor test is searching for. Note if it is visible or not and where it is located overall.

Consider if you would like to add a tag for different areas of the page where the element can appear, and then use parent and child selectors to get the one you'd like.

You can also use this to select just the first visible element:

// Takes a protractor webelement and returns the first displayed version
// Ex:
// var coolBox = $('.coolBox');
// var visibleCoolBox = getFirstVisibleProtractorElement(coolBox);
this.getFirstVisibleProtractorElement = function(selector){
    var allElementsOfSelector = element.all(by.css(selector.locator().value));
    return allElementsOfSelector.filter(function(elem) {
        return elem.isDisplayed().then(function(displayedElement){
             return displayedElement;
        });
    }).first();
};

Pass in any element you'd like, it will take the locator and get the first visible version of it. You can also take off the .first() portion to return an array of the visible elements to work with.

EDIT:

To use this, I will give a protractor+jasmine example. I thiiiink this should work given there is any number of desired elements on the page, with at least one being visible. This is off the top of my head though, so I may have made a mistake somewhere.

example_spec.js

var examplePage = require('./example_page.js');

describe('Extracting visible elements', function(){
    it('A visible element can be extracted', function(){
        expect(examplePage.isACoolBoxVisible()).toBeTruthy('Error: No visible CoolBoxes');
    });
});

example_page.js

var protractorUtils = require('./protractor_utils.js');

module.exports = new function(){
    var elements = {
        coolBox: $('.coolBox')
    };

    this.getVisibleCoolBox = function(){
        return protractorUtils.getFirstVisibleProtractorElement(elements.coolBox);
    };

    this.isACoolBoxVisible = function(){
        return getVisibleCoolBox.isDisplayed();
    };
};

protractor_utils.js

module.exports = new  function(){
    this.getFirstVisibleProtractorElement = function(selector){
        var allElementsOfSelector = element.all(by.css(selector.locator().value));
        return allElementsOfSelector.filter(function(elem) {
            return elem.isDisplayed().then(function(displayedElement){
                 return displayedElement;
            });
        }).first();
    };
};

Protractor : Identify invisible element.

If the element you click should be visible and should be on the page (not conditional appearance or randomness) then you can do it this way:

browser.executeScript("$('#toast-container').remove();");
element.all(by.css('.dx-datagrid-table')).all(by.css('.dx-data-row')).get(0).click().then(function () {
    element.all(by.css('.dx-row.dx-data-row.dx-column-lines.bold_item.dx-selection')).first().click().click().then(function () {
        var currentUrl = browser.driver.getCurrentUrl();
        expect(currentUrl).toMatch('/itemMaintenance/edit');
        browser.sleep(2000);
        browser.executeScript("$('#toast-container').remove();");
        var family = element.all(by.css('.selectize-input')).get(4);

        //added-start
        var EC = protractor.ExpectedConditions;
        browser.wait(EC.visibilityOf(family), 5000, 'Element was not visible in time');
        //added-end

        family.click().then(function () {
            browser.sleep(12222);
            element.all(by.css('.selectize-input input')).get(4).sendKeys(121212);
            browser.sleep(10000);
            var content = element.all(by.css('.selectize-dropdown-content')).get(0);
            content.all(by.css('.option')).get(1).click();
            browser.sleep(2000);
        });
    });
    browser.sleep(1000);
});

How to conditionally click an element in Protractor?

you're missing return. Your function returns nothing explicitly and thus implicitly returns undefined which is always falsy, and your if block doesn't get executed

This should work

let checkForPopUp = async function() {
  return element(by.css('button[id="gdprStopEmails"]')).isPresent().then(function (isVisible) {
    return isVisible;
  });
}

it('description', async function() {
      let hasPopUp = await checkForPopUp();
      if(hasPopUp) {
        await element(by.id("gdprStopEmails")).click();
      }
      await connectedAccounts.revokePermission(partnerInfo.revokeId, partnerInfo.confirmRevokeId);
    });

but since you're using async/await don't mix syntaxes. I'd do it this way

let checkForPopUp = async function() {
  return element(by.css('button[id="gdprStopEmails"]')).isPresent()
}

it('description', async function() {
      let hasPopUp = await checkForPopUp();
      if(hasPopUp) {
        await element(by.id("gdprStopEmails")).click();
      }
      await connectedAccounts.revokePermission(partnerInfo.revokeId, partnerInfo.confirmRevokeId);
    });

and keep in mind isPresent doesn't guarantee the visibility

---

Related Topics