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

Developing a Customized Filtering Mechanism in Angular 8

I have some experience working in web development, but I am relatively new to Angular. My current project involves creating a simple filter for a table's column based on user input. However, I'm facing an issue where typing in a single letter fil ...

javascripthtmlangularweb

Consolidate all data connected to the specified key from a JSON dataset

Looking at the json string presented below [{"_id":"9/17/2015","amt1":0,"amt2":13276.5},{"_id":"9/18/2015","amt1":8075,"amt2":6445.5}] The expected outcome is: [{"_id": ["9/17/2015", "9/18/2015"], "amt1": [0, 8075], "amt2": [13276.5, 6445.5]}] Is there ...

javascriptjqueryjsonangularjs

Unable to save Ajax data in session array

Currently, I am developing a cart system using jquery, ajax, and php. The issue I am facing is that the text within the HTML elements is not being added to the session array. Below is the ajax code I am using: $(document).ready(function(){ $("#car ...

javascriptphpjqueryajax

Access the website using Python's Selenium module

I am attempting to use Python Selenium to log in to this website, and have written the following code: # -*- coding: utf-8 -*- from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.common.keys import Keys from ...

pythonseleniumselenium-webdriver

Python Selenium test on AngularJS UI slider implemented

I've been experimenting with setting up a UI slider (Label=ON/OFF, Slider, Apply button) using Angular JS in combination with selenium. Here's an example of the code I've been working on: jsfiddle In my attempts, I tried using the followin ...

javascriptpythonangularjsseleniumtesting

Sort by user identifier

I'm having an issue trying to filter a list of posts and comments by userId. I've passed the userId params as postCreator and commentCreator, but something seems to be amiss. Can anyone help me identify what I might be doing wrong? // Defining ...

javascriptnode.jsexpress

How to switch around div elements using CSS

There are two unordered list items in a container div and one swap button. When the swap button is clicked, the order of items needs to change. This functionality can be achieved using the following swap function. var ints = [ "1", "2", "3", "4" ], ...

javascripthtmlcss

Unable to replicate the functionality of the tab key using jQuery for the enter key

How can I focus on the first input ('Qtd on the table') after pressing enter on the 'Buscar' input? I've tried various solutions like $(this).nextAll('input').first().focus(); $(this).next('input:text').focus ...

javascriptjqueryhtml

Accessing an array of objects within nested objects results in an undefined value

I am facing an issue with my JavaScript object that is retrieved from MySQL. The object has a property which contains an array of other objects, as demonstrated below: parentObject = { ID: "1", Desc: "A description", chi ...

javascriptarraysangularjsobject

The dynamic change of a required field property does not occur

I am facing an issue where one of my fields in the form should be mandatory or not based on a boolean variable. Even if the variable changes, the field always remains required. I'm puzzled about why my expressionProperties templateOptions.required is ...

javascriptangularjsangular-formly

What methods can be used to defer the visibility of a block in HTML?

Is there a way to reveal a block of text (h4) after a delay once the page has finished loading? Would it be necessary to utilize setTimeout for this purpose? ...

javascripthtml

To include a request parameter in every HTTP request made with $http in AngularJS

I am looking to utilize Angular's $http service to communicate with an API. However, I need to find a way to save my authorization token within $http so that it is included in every request, whether it is a post, get, put, or delete request. I have ob ...

javascriptangularjs

Using DataProvider to read an Excel file and skipping the first row

Unique Heading how can I skip the first row in a loop and avoid getting null values I'm trying to skip the first row by starting my loop at i=1, but it's returning null values for the first row. Problem with First Row Values how can I skip ...

javaselenium-webdriver

Understanding Vue.js - encountering the error message "property or method is not defined"

Recently, I've come across an issue that seems to be common among many people, but for some reason, I am unable to find a solution despite looking at similar questions. The problem arises when I use a v-for in a Vue Component and the array value cons ...

javascripttypescriptvue.jsvuejs2vue-component

How to refresh an image in Next.js using setState even when the src path remains unchanged

Define a state variable: const [picture, setPicture] = useState(null); Assuming the picture is initially set to "123" and even after updating the image, the value remains "123". How can I reload the Image? <Image src={profileurl + picture} alt="profile ...

javascriptreactjsnext.js

When the button is clicked, verify the existence of the file, then display a message and undo

I encountered a situation where I needed to verify if a user tries to input data with the same date and same region again, they should receive a prompt alert. I attempted to achieve this using code in the backend, as shown below:- protected void btnSave ...

javascriptjqueryasp.net

Display sub-objects within Chart.js

I'm currently tackling a project in Ionic 3 where I am utilizing an API that returns a JSON response with nested objects. My goal is to display certain aspects of these objects within a bar graph using chart.js. Unfortunately, I lack experience in ma ...

javascripttypescriptchartschart.js

Ways to determine the vertical size of a React component

Currently, I am dynamically generating a list of Symbol(react.element) by utilizing the map function to iterate through an array and incorporate each element's HTML tags. My question is: How can I determine the height of each individual rendered Symbo ...

javascriptnode.jsreactjs

Next.js App encounters a missing API route (The requested page is not found)

I have been working on a Next.js app and I created an api route for sending emails. Everything is functioning properly in my development environment. However, after deploying to production, I encountered a 404 error with the message "The page could not b ...

javascriptreactjsapinext.jsserver-side-rendering

Challenge encountered with asynchronous angular queries

Dealing with asynchronous calls in Angular can be tricky. One common issue is getting an array as undefined due to the asynchronous nature of the calls. How can this be solved? private fetchData(id){ var array = []; this.httpClient.get('someUrl ...

javascriptangulartypescriptrxjs5