Locating Elements in Protractor: Exploring Nested Elements within an Element that is Also a Parent Element Elsewhere on the Page

<div class="base-view app-loaded" data-ng-class="cssClass.appState">
<div class="ng-scope" data-ng-view="">
<div class="ng-scope" data-ng-include="'partial/navigation/navigation.tpl.html'">
<div class="feedback-ball feedback-ball-show feedback-ball-big" data-ng-class="feedback.cls" data-ng-click="outside($event)" data-feedback-ball="">
<span class="close-button"></span>
<h2 class="ng-binding">Welcome to Garbo</h2>
<div class="ng-scope ng-binding" data-ng-bind-html="feedback.html" data-ng-if="feedback.html">
<p>Discover the elegance of playing in a secure and stylish environment here at Garbo.</p>
<p>
<a class="btn" href="/account">My Account</a>
<a class="btn" href="/deposit">Deposit</a>
</p>
</div>
</div>
</div>

I am attempting to locate and click on the /account button within the data-ng-bind-html="feedback.html". Although I have successfully identified the data-ng-bind-html="feedback.html", I am encountering difficulty in finding the account button within it. The presence of multiple account buttons on the page requires me to be more specific in my approach, leading to errors when I try to select the correct one.

Despite trying various methods such as element().element(), I have not been successful. Assistance would be greatly appreciated.

javascriptangularjstestingselenium-webdriverprotractor

Answer №1

The issue at hand is that webDriver is identifying multiple elements that match the criteria. You can use the element method to find a single element, and element.all to capture an array of elements. From there, you can utilize methods like .get() with the index of the element, or first() and last(). For example,

element(by.css('[data-ng-bind-html="feedback.html"]')
.element(by.cssContainingText('.btn', 'My account'));

If this approach fails, it indicates that there are more than one matching elements. In such cases, you can adjust your code as follows: 

element(by.css('[data-ng-bind-html="feedback.html"]')
.all(by.cssContainingText('.btn', 'My account')).first();

In scenarios where there are multiple buttons in your HTML, webDriver will still select only one. Additionally, you can use the count() method to determine the length of the array of elements and gain insights into how many elements are present.

Answer №2

element method has the ability to be chained together, allowing you to locate elements within other elements, making your element().element() approach viable.

Another option is to create an xpath expression to access the link within the specified div:

element(by.xpath('//div[@data-ng-bind-html = "feedback.html"]//a[@href = "/account"]'))

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

Issue with AngularJS: Controller unable to access property of ng-model object

I am looking to create a reusable controller that can be used by multiple views. This controller will essentially serve as a template. The issue I'm facing is with setting up simple validation. The problem lies in the fact that the properties set in ...

javascriptangularjsangularjs-controller

Injecting Ajax-loaded content into an HTML modal

Hey there! I'm currently working on a project involving the IMDb API. The idea is that when you click on a film title, a popup should appear with some details about the movie. I've made some progress, but I'm stuck on how to transfer the mov ...

javascriptphpjqueryhtmlajax

Using Selenium to extract information from a scrolling table

My goal is to extract data from the website gate.io by gathering a list of all the coins/tokens displayed in the left table. The purpose is to be able to click on each coin/token and retrieve the long/short ratio information located on the right side of ...

pythonseleniumselenium-webdriverselenium-chromedriver

Is the feature unavailable due to a need for an "unnecessary" revision?

Two Selenium/Java calls are causing me some confusion: List<WebElement> aList = driver.findElements(By.xpath("//something")); List<WebElement> bList = driver.findElements(By.xpath("//something")); The first call populates a ...

javaseleniumselenium-webdriversyntaxoperator-precedence

I am configuring Jest in my Vite and TypeScript-powered React project

I am having trouble with the relative path of the file I imported in App.test.tsx. It keeps showing me this error message: Cannot find module '@/components/items/card.tsx' from 'src/__tests__/App.test.tsx' Below is the code snippet: // ...

javascriptreactjstypescriptvitets-jest

Angulajs: The correct way to simulate a Promise received from $http

Seeking guidance after struggling with unit testing an angular service, specifically the failed part of a promise. (function () { angular.module('testable') .factory('myService', ["$http", "$q", function ($http, $q) { retur ...

javascriptangularjsunit-testingjasmineangular-promise

Execute the strace command using the child_process module in Node.js

Having received no answers and being unsatisfied with the previous approach, I am now attempting a different method to monitor the output of a program that is currently running. Inspired by a thread on Unix Stack Exchange, the goal is simply to retrieve th ...

javascriptnode.jslinuxloggingchild-process

Using Rails: How to invoke a function in the asset pipeline from a JS response?

In one of the JavaScript files I am working with, I have defined an object and a function: chosen.coffee Foo = do_this: -> $('.slider').slider() $ -> Foo.do_this() This code initializes JQueryUI to turn a specific div into a ...

javascriptjqueryruby-on-rails

transform JSON data into XML format with the help of JavaScript

I need help converting a JSON object to an XML String and I'm struggling to find the right method. I recently came across a jQuery plugin called json2xml on https://gist.github.com/c4milo/3738875 but unfortunately, it does not properly escape the data ...

javascriptxmljson

Refresh collection of texts

I am attempting to update an item within a subarray of a document. The type of the subarray is an array of strings: Dictionary.findOne({ name: req.query.name }, function(err1, data){ if(err1){ logger.error(err1); res.send({ ...

javascriptnode.jsmongodbmongoose

Attempting to iterate through an array of HTML5 videos

Having some trouble with my video array - it plays but doesn't loop. I've tried using the HTML video attribute 'loop' and variations like loop="true" and loop="loop" without success. Tonight, all I want is for it to loop properly! var ...

javascriptjqueryhtmlvideo

What is the best way to send $event data from a custom directive to a function?

Here is a directive I created to detect the enter key being pressed: .directive('enterSubmit', function() { return { restrict: 'A', link: function(scope, elem, attrs) { elem.bind('keydown', function(event) { ...

angularjs

Obtaining the client's IP address using socket.io 2.0.3: a comprehensive guide

Currently, I am facing a challenge using socket.io v2.0.3 in my node.js server as I am unable to retrieve the client's IP address. Although there are several suggestions and techniques on platforms like stackoverflow, most of them are outdated and no ...

javascriptnode.jssocket.io

I have a question for you: How can I customize the font size in Material-UI TextField for different screen sizes?

I'm facing a challenge in Material-UI where I need to set different font sizes for TextField. While it may be simple in HTML/CSS, it's proving to be tricky in Material-UI. Can anyone help me figure out how to achieve this? The code snippet below ...

javascriptcssreactjsmaterial-ui

What is the process for reducing the value displayed on the label?

I have three labels and I would like to subtract the value of two labels and place the result in the third label. $(document).ready(function() { //Retrieve the values from both labels var value1 = document.getElementById("addition").innerText; ...

javascripthtmljquerysubtraction

Swapping out data points using JQuery

What could be causing line 10 to return null? Click here for the code file The code seems to function properly with line 40, but not with line 10. ...

javascriptjqueryhtmlsiblings

Converting nested JSON to CSV for simplified data organization

I need help flattening JSON in order to parse it as a CSV. The current flattening process is not working correctly, as the customer.addresses field is being filled with 'addresstype: r' and then skipping all other fields such as city, countrycode ...

javascriptjson

What could be causing NestJS/TypeORM to remove the attribute passed in during save operation?

Embarking on my Nest JS journey, I set up my first project to familiarize myself with it. Despite successfully working with the Organization entity, I encountered a roadblock when trying to create a User - organizationId IS NULL and cannot be saved. Here ...

javascripttypescriptnestjstypeorm

Using AngularJS to update text content retrieved from a file and display it in a textarea

Is there a way to create a textarea using AngularJS that can be populated either by typing, entering a URL, or uploading a plain text file? While I am able to load the file content into the variable linked to the textarea, I'm facing an issue where ge ...

javascriptangularjstextarea

Angular.js is experiencing difficulties when using the input value attribute in conjunction with ng-model

I've been hard at work on an app that allows users to edit items, with those changes updating in a database. To prevent empty form submissions, I automatically fill the input fields with the current item's information. form.form-update(method="p ...

javascriptangularjsmongodbpost