CODEWITHSUNDEEP
javascriptangularjsselenium-webdriverprotractor
user5736940
user5736940

Reputation:

Protractor can't click on embedded <span> inside <a> element

I have two embedded <span> elements inside an <a> element. I need to trigger a click event on the second <span>. The by.id method on the id classes I created didn't trigger a click. I also tried by.binding and that didn't work. help please?

The code:

<div class="add-player">
  <a href class="btn" data-ng-if="!currentUser.isAuthenticated && !vm.hasPendingInvitation">
    <span>Add Player</span>
  </a>
  <a href class="btn" id="invite" data-ng-if="currentUser.isAuthenticated && !vm.hasPendingInvitation">
    <span id="invite-player">Add Player</span>
  </a>
</div>

Upvotes: 3

Views: 4373

Answers (1)

alecxe
alecxe

Reputation: 474221

We can play around with locators:

$("div.add-player a span").click();
$("#invite-player").click();
element(by.xpath("//span[. = 'Add Player']")).click();

We can also wait for the element to be visible:

var addPlayer = $("div.add-player a span"),
    EC = protractor.ExpectedConditions;

browser.wait(EC.visibilityOf(addPlayer), 5000);
addPlayer.click();

We can also try clicking via JavaScript:

browser.executeScript("arguments[0].click();", addPlayer.getWebElement());

Or via browser.actions():

browser.actions().mouseMove(addPlayer).click().perform();

Or, scroll into view before clicking:

browser.executeScript("arguments[0].scrollIntoView();", addPlayer.getWebElement());
addPlayer.click();

You can also filter the visible element matching a locator:

var addPlayer = $$("#invite-player").filter(function (elm) {
    return elm.isDisplayed();
}).first();
addPlayer.click();

Upvotes: 8

Related Questions