Protractor's modal dialogue displays numerous outcomes when accessing ng-repeater elements

Trying to click on an element located within a repeater has presented some challenges. The issue arises from the fact that it is a modal dialog and returns multiple elements for the repeater. Each page in our application functions as a modal dialog, leading to a stacking effect where the prior page remains 'underneath' the current one. This design allows users to navigate back to their previous location without reloading the page by simply hitting the back button.

The repeater being used is as follows: 

this.searchResults = element.all(by.repeater('provider in providers'));

Upon inspecting what is returned by the repeater (I conducted a search in the console for the class), I found this result: https://i.stack.imgur.com/X3gSy.png

How can I effectively target and click on one of the results returned by the repeater to interact with the element within it?

javascriptseleniumselenium-webdrivermodal-dialogprotractor

Answer №1

this.searchResults is designed to hold an ElementArrayFinder (essentially, an array of elements), which can be manipulated in various ways. For example, to access a specific element:

this.searchResults.get(2);
this.searchResults.first();
this.searchResults.last();

You can then continue the operation by using element or all to search within the repeater row:

this.searchResults.get(2).element(by.css(".provider-list-info-link"));

There are also functional programming tools like map(), each() functions available.

Furthermore, you can navigate through repeater rows and columns using row() and column().

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 unusual occurrence with the setTimeOut function within a for loop was observed

When attempting to log numbers at specific intervals on the console, I encountered an unexpected issue. Instead of logging each number after a set interval, all numbers are logged out simultaneously. I've experimented with two different approaches to ...

javascript

Tips for utilizing state and city dropdown menus in JavaScript multiple times without interfering with other dropdowns

Currently, I am utilizing CodeIgniter to create a dynamic dropdown functionality. The setup involves four select country dropdowns where the state options will populate based on the selected country, and once a state is chosen, the corresponding city optio ...

javascriptjqueryhtmljsonajax

Having trouble finding the "Sign In" button using Selenium

Here is the code snippet I am working with: driver.manage().timeouts().implicitlyWait(20, TimeUnit.SECONDS); //driver.findElement(By.xpath(".//button[starts-with(@type,’submit’)]")).click(); driver.findElement(By.xpath(".//*[/html/body/div[4]/div/form ...

selenium-webdriverselenium-chromedriver

When utilizing Javascript's Array.push method, a nested array is generated that is inaccessible using the index

I have reviewed several articles discussing the issue of asynchronous calls returning undefined. Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference Get data from fs.readFile However, none of these articles ...

javascriptarraysreactjsmernarray-push

Leverage promises to alter reactive data, strategically placing them to minimize the frequency of triggers being activated

Initial Method const list = reactive([1, 2, 3, 4, 5]); const clickHandler = () =>{ list.push(...[11, 12, 13, 14, 15]); list.push(...[16, 17, 18, 19, 20]); Promise.resolve().then(() => { list.push(33) ...

javascriptvue.jsasynchronouspromisevuejs3

typescript error is not defined

While browsing online, I came across a post discussing how to transfer data from an MVC model to a .ts file. The suggestion was to include the following code: <script type="text/javascript"> var testUrl = @Html.Raw(Json.Encode(Model.testUrl) ...

javascripttypescriptmodel-view-controllerundefined

Getting information from PHP through AJAX for transmission to a separate PHP script

Hi everyone, I'm facing a bit of a challenge with my project. Here's the situation: I've got a PHP file that interacts with a database and displays the query results. Then, there's an HTML file that uses AJAX to show these results dyna ...

javascriptphpjquerymysqlajax

"Receiving a 404 error when sending a POST request, but getting

When attempting to send a POST request, I encountered a 404 error response from the server. Strangely, when sending a GET request, I received a 200 response. I have experimented with different methods: $.ajax({ type:"POST", url: "script.php", ...

javascriptphpajaxpostxmlhttprequest

What is the best way to apply a jQuery function to multiple div elements simultaneously?

I am looking to implement a show/hide feature for a <div> using JavaScript and DOM properties. The idea is to use JavaScript's onclick() function with two buttons, show and hide, each in their respective <div>. Here is how it would ideall ...

javascriptjquery

Is there a way to ensure a web driver can detect an element even when the page is continuously refreshing?

I am facing an issue while running a script on a webpage that contains a list of links to news articles. The problem arises when the script clicks on the link and waits for the "h1" element to load before checking its text for specific keywords. However, o ...

pythonseleniumselenium-webdriver

Retrieving the class name using jQuery

In my HTML code, there is a div with three classes defined as: <div class = "a b c"> .. </div> My goal is to access only the class b using the .attr() method. Is this achievable? ...

javascriptjquery

Is there a way to create a new prettyphoto window by clicking on a link within the original prettyphoto window?

I have an HTML table that is dynamically constructed on the server side using AJAX. The table is displayed using prettyphoto, everything works fine up to this point. However, the last column of the table contains a link that should open an image using pret ...

phpjavascriptajaxjquery-pluginsjquery

What is the best way to determine which DOM element triggered a click event?

I currently have a few Card components from material UI, each containing an EDIT button with a corresponding handler. These cards are dynamically added using Map traversal (for this example, I have hard coded two of them). My challenge now is trying to ma ...

javascriptreactjsmaterial-ui

WebDriverException: Error: {"errorMessage":"The object is undefined"

I encountered an error while running the code on this HTML page, specifically at /html/body/div[3]/div[1]/div[1]/div[1]/div/div[10]/a/div[1]/div[2]: WebDriverException: Message: {"errorMessage":"null is not an object (near '...ull).singleNodeVa ...

pythonhtmlseleniumphantomjs

Selecting elements by their name using vanilla JavaScript

I am facing an issue where I have to assign a value to a checkbox based on certain variables. The challenge lies in the naming convention used in the HTML I am working with: <input id="jc_1" type="checkbox" name="jc[1]"> <input id="jc_2" type="c ...

javascript

Exploring the connections between Ajax, asp.net mvc3 routing, and navigating relative URLs

My ASP.NET MVC3 application is live at a URL like this: http://servername.com/Applications/ApplicationName/ In my code, I am making jQuery AJAX requests in this manner: $.get(('a/b/c'), function (data) {}, "json"); When running the applicati ...

javascriptjqueryajaxasp.net-mvc-3relative-path

Tracking the advancement of synchronous XMLHttpRequest requests

Within the client-side environment, there exists a File-Dropzone utilizing the HTML5 File-API which allows users to drop multiple files for uploading to the server. Each file triggers the creation of a new XMLHttpRequest Object that asynchronously transfer ...

javascriptajaxjqueryxmlhttprequest

What is the reason behind the lack of access for modal to an external controller?

Imagine having this code in your main HTML file: <body ng-app="app" ng-controller="session as vmSession"> ... <!-- Modal content goes here --> </body> Inside the modal, you have a link: <a ui-sref="siteManagement({ site: vmSession.u ...

javascriptangularjsangular-ui-bootstrap

Encountering an issue when bundling an application using electron-forge: "Unable to find solution for './→' "

Having trouble packaging my Electron application using electron-forge. It seems like the issue lies with native modules such as 'sqlite3'. Upon running the command npm run package, I encounter this error: Module not found: Error: Can't reso ...

javascriptnode.jswebpackelectronelectron-forge

Tips for accessing an attribute within an iframe using Selenium WebDriver

I'm encountering an issue where I am unable to retrieve an attribute in a site's iframe window. The iframe does not have an ID or any identifiable marker, so I need to locate it based on the title. Below is the code snippet: from selenium.webdri ...

pythonselenium-webdriveriframe