Protractor is unable to interact with the embedded <span> within the <a> tag

I am facing an issue where I have two nested <span> elements inside an <a> tag. My objective is to trigger a click event on the second <span>. I tried using the by.id method on the custom classes I created, but it did not work. I also attempted using by.binding, which also failed to produce the desired result. Can someone please assist me with this problem?

Here is the code snippet:

<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>
javascriptangularjsselenium-webdriverprotractor

Answer №1

Exploring different ways to interact with elements:

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

Utilizing element visibility wait functionality:

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

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

Experimenting with clicking via JavaScript:

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

Alternatively, using browser.actions() for interaction:

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

Enhancing user experience by scrolling into view before clicking:

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

Another approach is to filter and select the visible element based on a locator:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"An error message stating 'Express: The body is not defined when

I'm encountering an issue while trying to extract data from a post request using express. Despite creating the request in Postman, the req.body appears empty (console.log displays 'req {}'). I have attempted various solutions and consulted s ...

javascriptnode.jsexpress

Issue with Retrieving the Correct Element ID in a Loop with JavaScript Function

I'm in the process of developing a dynamic wages table with HTML and JavaScript to compute each employee's wage based on input from each row. In order to achieve this, I've utilized a loop to assign a unique ID to the total cell in every ro ...

javascripthtmlmodel-view-controller

The controller is referencing $rootScope which has not been properly defined

Here is my understanding of the controller concept. Whenever I launch the application, an error message appears saying "$rootScope is not defined." Can someone provide assistance in identifying the issue? var webadmin = angular.module('PcPortal' ...

javascripthtmlangularjs

Using socket.io to listen for events and wait for promises to resolve

I am facing an issue with a button that communicates with the server to verify if a value entered in an input box already exists. The current code is as follows: $("#button").click(function () { var exists = false; var name = $("#name").val(); ...

javascriptjquerynode.jssocket.iopromise

What is the best way to efficiently handle onChange events for multiple input checkboxes in Reactjs?

When I attempt to assign an onChange event listener to a group of checkboxes, clicking on one checkbox results in all checkboxes being clicked and the conditional inline styles that I defined are applied to all of them. Here is the JSX code snippet: class ...

javascriptreactjs

My JavaScript seems to be having an issue with .className - can anyone help me troubleshoot

I'm currently working on a navigation menu, and my objective is to have the class change to .nav-link-active when a link is clicked, while also reverting the current .nav-link-active back to .nav-link. Here's the code snippet I am using: <he ...

javascripthtml

Troubleshooting the Confirm Form Resubmission problem on my website

Hello everyone! I'm working on a website and facing an issue where refreshing the page triggers a confirm form resubmission prompt. Could someone please advise me on how to resolve this? Thank you in advance! ...

javascriptphpcssajaxweb

How to update the selected autocomplete item in Vue using programming techniques?

Although I am still learning Vue, consider the following scenario: <v-autocomplete v-model="defaultUser" :hint="`User: ${defaultUser.username}`" :items="users" :item-text="item =>`${item.firstName} - $ ...

javascriptvue.jsvue-componentvuetify.js

I'm having trouble getting FlowType.js to function properly

I have added the following code just before the closing </body> tag, but unfortunately, it seems like the type is not changing as expected. I am struggling to identify what mistake I might be making. Check out FlowType.JS on GitHub View the code on ...

javascriptjqueryresponsive-designtypography

Unable to assign value to Angular scope variable

Currently, I am delving into Angular JS as a learner. My attempt at using $http to set the corresponding value to the scope variable seems to be failing. Below is a snippet of the HTML code I am working with: <div ng-app="fileapp" ng-controller="myctl" ...

angularjs

Receive the complete HTML page as a response using JavaScript

When making an Ajax post to a specific page, I either expect to receive an ID as a response if everything goes smoothly, or I might get a random html page with a HTTP 400 error code in case of issues. In the event of an error, my goal is to open the enti ...

javascriptjqueryajax

Showcasing a dynamic image as a task is being completed within a JavaScript function

Is there a way to show a loading image while waiting for a JavaScript function to finish? <script type="text/javascript"> function create() { //Perform operation } </script> I am looking for a solution to display a loading image until ...

javascripthtml

The Chrome browser is experiencing delays with processing ajax requests, causing them

When I make a series of 8 requests in quick succession, they load successfully. However, any requests made after that get stuck in a "pending" state. Below is my basic HTML template: <!DOCTYPE html> <html> <head> <meta charset= ...

javascriptajaxgoogle-chrome

Maximizing Efficiency: Sending Multiple Responses during computation with Express.js

Seeking a way to send multiple responses to a client while computing. See the example below: app.get("/test", (req, res) => { console.log('test'); setTimeout(() => { res.write('Yep'); setTime ...

javascriptnode.jsexpress

Saving information from JSON data obtained through the Google People API

My server is connected to the Google People API to receive contact information, and the data object I receive has a specific structure: { connections: [ { resourceName: 'people/c3904925882068251400', etag: '%EgYBAgkLNy4aDQECAwQFBgcICQoLD ...

javascriptjsongoogle-people-api

Position the typography component to the right side

Is there a way to align two typography components on the same line, with one aligned to the left and the other to the right? I'm currently using this code but the components are aligned next to each other on the left side. const customStyles = makeSt ...

javascriptcssreactjsalignmentmaterial-ui

Tips for assigning a value in a dropdown menu with AngularJS

Can someone help me with setting the same value in multiple drop-down lists using angular.js? Below is an explanation of my code. <table class="table table-bordered table-striped table-hover" id="dataTable"> <tr> <td width="100" align ...

javascriptangularjs

Bring in LOCAL .obj for loading with Three.js OBJLoader in a React environment

Attempting to import a local .obj file using the THREE.OBJLoader().load() function is causing issues. While it successfully loads non-local URLs such as '', loading the local file takes a long time due to downloading it every time. The setup inv ...

javascriptreactjswebpackthree.jsobjloader

Building a hierarchical tree structure using arrays and objects with Lodash Js

I am attempting to create a tree-like structure using Lodash for arrays and objects. I have two arrays, one for categories and the other for products, both with a common key. The goal is to organize them into a tree structure using string indexing. let ca ...

javascriptnode.jsreactjstypescriptlodash

Steering clear of using relative paths for requiring modules in Node.js

When it comes to importing dependencies, I like to avoid using excessive relative filesystem navigation such as ../../../foo/bar. In my experience with front-end development, I have found that using RequireJS allows me to set a default base path for "abso ...

javascriptnode.js