Choosing a specific dropdown option by using xpath (or a more efficient method)

How can I specifically choose an element from the drop down menu?

<li role="presentation" ng-repeat="match in $matches" ng-class="{active: $isActive($index)}" class="ng-scope active">
    <a style="cursor: default" role="menuitem" tabindex="-1" ng-click="$select($index, $event)">
        <!-- ngIf: $isMultiple && $isActive($index) -->
            <i class="glyphicon glyphicon-ok pull-right" ng-if="$isMultiple &amp;&amp; $isActive($index)"></i>
        <!-- end ngIf: $isMultiple && $isActive($index) --> 
        <span ng-bind="match.label" class="ng-binding">Streamer</span>
    </a>
</li> 

I attempted the following:

element(by.model('selectedAvailable')).click();
element(by.xpath('..//ul//li[1]')).click().

and also tried this approach:

element(by.repeater('match in $matches').row(0)).click();

Answer №1

One option could be to utilize the by.cssContainingText method:

element(by.cssContainingText('[ng-repeat="match in $matches"]', 'Streamer')).click();

Answer №2

To specifically target the "Streamer" label and click on it, you can utilize the filter() method:

var items = element.all(by.repeater('item in $items'));
items.filter(function (item) {
    return item.element(by.binding("item.label")).getText().then(function (text) {
        return text === "Streamer";
    });
}).first().click();

Alternatively, you can achieve the same result using evaluate() instead of getText():

var items = element(by.repeater('item in $items')); 
items.filter(function (item) {
    return item.evaluate("item.label").then(function (label) {
        return label === "Streamer";
    });
}).first().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

What is preventing my Button's onClick() method from being effective?

Below is a snippet of my HTML layout using the sciter framework: <div id="volume_micphone_slider" style="z-index:1;"> <input id="volume_slider" class="volume_slider" type="vslider" name="p1c" max="100" value="20" buddy="p1c-buddy" /> < ...

Step-by-step guide to installing gatsby-CLI on Windows without requiring admin permissions

Currently, I am facing an issue while trying to install the gatsby CLI using the following npm command: npm install --global gatsby-cli I suspect the problem might be due to lack of admin access. Does anyone have suggestions on how to resolve this error? ...

Importing a JavaScript file into another JavaScript file

var FS = require('fs'); var Path = require('path'); var Jsonfile = require('jsonfile'); var search = function () {}; search.prototype.projectContainerDirPath = null; /* * interface */ search.prototype.setPaths = function ...

Unable to render ng-view due to it being enclosed within a comment block

Currently, I am in the midst of developing a single page application which employs Node, Express, and Angular. The layout of my directory follows the typical format of an Express application <app> +--public +--routes +--views +--partials ...

Modifying the primary color theme does not impact the color of the buttons

"@mui/material": "^5.5.3" Hello there, I am currently in the process of customizing my MUI form using values imported from SCSS variables. Everything appears to be functioning correctly (I can see the values being passed in devtools) e ...

The validation of pre-filled input fields in Angular Material dialogs is not working as expected

I am encountering an issue with a mat-dialog that opens through an edit button within a (mat-)table. Upon opening the dialog, data is passed to populate certain input fields. One of these inputs has validation requiring that it cannot be left empty. The ...

Can you help me configure proxy settings for Selenium in my Java application?

In my Java application, I am attempting to update the proxy of the selenium server. However, when I set the proxy in the traditional way, the Selenium server does not recognize this setting. I would like for the proxy IP to be displayed instead of my ac ...

Incorporating images into CSS using an npm package

My npm package has the following structure: --src --styles -image.png -style.scss In the style.scss file, the image is referenced like this: .test { background-image: url(./image.png); } The issue arises when consuming the package, as th ...

The imported package in Node.js cannot be located

I'm encountering an issue when trying to deploy my project on the server. Everything runs smoothly on my PC with no import problems. Thank you for your assistance! Error Message: Error [ERR_MODULE_NOT_FOUND]: Module '/home/igor/backend/alina_edu ...

Vue-router: the browser tries to open a <router-link> element as if it were a local file

Having some trouble with Vue-router - when I click on a navigation link, the desired component briefly displays before the browser tries to open it as a file. For instance, clicking on the "Badger!" link results in the browser attempting to open a local f ...

Obtain the image URL using Selenium and Chrome WebDriver

Currently, I am utilizing selenium webdriver in C# to attempt to retrieve the src of an image by using the GetProperty method in order to confirm that the correct image is being displayed. var productImg = product.FindElement(By.TagName("img")); var produ ...

Issue with Jasmine SpyOn subscription not triggering subsequent function call

I am attempting to monitor my subscription, but I am struggling to understand how to accomplish it. The specific method in question looks like this: list.service.ts @Injectable({providedIn: 'root'}) export class ListService { public construct ...

Encountering a 500 internal server error while attempting to submit data to a Laravel project through Axios in Vue.js

I encountered an issue while attempting to send data to my Laravel application using Axios in Vue. The error I received was: Error: Request failed with status code 500 at e.exports (axios.min.js:8) at e.exports (axios.min.js:8) at XMLHttpReque ...

Is the value of useState not updating even after setting it in a callback function?

I am facing an issue where the error message is not being added to the error state when an error occurs. The backend sends the error message in JSON format { "error": "error message" }, and even though I can log this error message successfully, the error ...

Position of Vertices in Three.js PolyhedronGeometry

Currently, I am experimenting with creating my own unique shape using PolyhedronGeometry In a rough sketch: https://i.sstatic.net/PREZN.jpg I've encountered some challenges. Specifically, I'm attempting to attach this newly created shape onto a ...

Regular expression for matching zero's following a decimal

I'm currently working on a regex method to validate decimals that only allow 2 numbers after the decimal point. For example, it should return true for 1.00 and false for 1.000, which it currently does. However, I also want it to return false for value ...

What is the process for configuring browser environment variables in Next.js with the `"type": "module"` setting?

While working on my nextjs project, I have encountered an issue with setting environment variables that can be accessed at the browser level. Whenever I use console.log(process.env), it always returns {} in the javascript console, and any variable like pr ...

Exploring the depths of JSON with the power of jQuery

Struggling to create a JSON structure that is multi-level deep and encountering issues at two points. The primary challenge lies in formatting the data correctly, along with the intention to introduce a "level_two" within the dataset. The secondary hurdle ...

Tips for utilizing the Spacing Utility Classes in Bootstrap

While browsing through an article, I came across Bootstrap 4 Spacing Utility Classes, particularly the m-b-lg class used in the className section. <div class="row"> <div class="col-sm-6 m-b-lg"> <!-- column-small-50%, margin-bot ...

Using `useNavigate` does not function properly when paired with a Higher Order Component (H

My initial inquiry is related to my endeavor of self-studying React.js, Node.js, and Express. I am in the process of developing my own website where users can register, log in, and access personalized data upon successful login. Upon successful login, a t ...