The Protractor Custom Locator is experiencing difficulty in finding the element

For our project, the automation team is incorporating a custom attribute called 'lid' to elements where unique identification is challenging.

A new custom locator method has been developed to find elements using the 'lid' attribute:

   by.addLocator('lid', function(value, parentElement) 
    { 
    parentElement = parentElement || document; 
     var nodes = parentElement.querySelectorAll('lid'); 

     return Array.prototype.filter.call(nodes, function(node) 
     { 
         return (node.getAttribute('lid') === value); 
     }); 
   });

Provided below is an extract of the HTML code:

 <div class="col-sm-8 cbx">
                        <p class="ng-binding"><input type="radio" ng-model="theme"
 lid="create-user-them-radio1" ng-value="1" ng-click="user.theme = -1" class="ng-
pristine ng-untouched ng-valid ng-not-empty" name="1194" value="1"> Use the default
 for this domain</p>
                        <p class="litetext ng-binding">Following options override 
the domain's default value</p>
                        <p class="ng-binding"><input type="radio" ng-model="theme"
 lid="create-user-them-radio2" ng-value="2" class="ng-pristine ng-untouched ng-
valid ng-not-empty" name="1195" value="2"> Select theme for the user</p>
 </div>

The intention is to utilize the 'lid' attribute for element location and hence the creation of the aforementioned method to support any attribute and value combination.

To call the method in a test file, use the following syntax:

element(by.lid("create-user-them-radio1")).click();

An error message indicating 'No element found using locator: by.lid("create-user-theme-radio1")' is currently being encountered. Assistance is required to rectify this issue.

Answer №1

Is it necessary to create a custom method when default methods can achieve the same outcomes?

element(by.xpath('.//li[contains(@ng-if, "$select.open")]')).click();

Note: If you attempt to run tests in production mode, this locator may not function properly. Attributes such as ng-%blabla% are only present in development mode.

Answer №2

I have successfully identified the solution to this problem, which is outlined below:

by.addLocator('lid', function(value, parentElement) {
        var nodes;

        if(parentElement)
            nodes =  parentElement.querySelectorAll();
        else
            nodes = document.querySelectorAll('body *');


        return Array.prototype.filter.call(nodes, function(node) {
            if( node.hasAttribute("lid") && node.getAttribute('lid') === value)
                return node;
        });
    });

The function querySelectorAll() requires the 'tag' input. If no parentElement is provided, it will search for all tags under the 'body' tag. Otherwise, it will search for all elements within the specified parentElement. The function then iterates through each element to check for the presence of the 'lid' attribute. If the attribute exists, it checks whether the value matches the desired value and returns that specific element.

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

Create your own AngularJS directive for displaying or hiding elements using ng-show/ng

Caution: Angular rookie in action. I'm attempting to craft a personalized widget that initially displays a "Reply" link, and upon clicking it, should hide the link and reveal a textarea. Here's my current progress, but unfortunately, it's n ...

Cloud function for Firestore to recursively update a subcollection or collection group

I've been working on this cloud function: import pLimit from "p-limit"; const syncNotificationsAvatar = async ( userId: string, change: Change<DocumentSnapshot> ) => { if (!change.before.get("published") || !change.after.exists) { ...

Having trouble with the express message! I can't seem to access the template I created

I am looking to receive a notification similar to an alert, as described in this link: https://github.com/visionmedia/express-messages By default, I receive something like this https://i.stack.imgur.com/9XlA9.png If I use a template, I do not get any out ...

Is it feasible to conceal a certain field once the user has chosen another field?

Looking to create an IF statement that will help me establish a specific rule. On a customer portal page, customers can open tickets via a form where they provide information such as "software product" and "environment" from dropdown lists, as well as othe ...

Managing conflicting eslint rules within the AirBNB configuration can be challenging, but here are some best

Hey all, I'm new to Vue and I'm attempting to create a POC. I've set up ESLint with the AirBNB configuration, but I've run into an issue. Here is the section of code where I'm encountering problems within my Axios call: .catch((er ...

Bootstrap 4 modal experiencing issues with the form end tag functionality

Currently, I am facing an issue while attempting to incorporate a confirmation delete feature using a Bootstrap 4 modal in my Laravel project. The problem arises when the modal is opened, and the submit button fails to function. Upon inspecting the browser ...

Concentrate on Selecting Multiple Cells in ag-Grid (Similar to Excel's Click and Drag Feature)

Is there a way to click and drag the mouse to adjust the size of the focus box around specific cells in ag-Grid? This feature is very handy in Excel and I was wondering if it is available in ag-Grid or if there is a workaround. Any insights would be apprec ...

My goal is to extract the usernames of all sellers from the Poshmark webpage using a combination of JavaScript, Cheerio, and Axios

After experimenting with various methods, I've come close to the solution, but it only retrieves one of the div elements I'm looking for... Although I managed to retrieve multiple divs at one point, when I attempted to extract text using the .te ...

Issue with Ajax post redirection back to original page

I'm facing an issue with my ajax call where I send multiple checkbox values to a php file for processing and updating the database. The post request and database updates are successful, but the page doesn't return to the calling php file automati ...

The onChange method in React is failing to execute within the component

I am having trouble overriding the onChange method in a component. It seems like the method is not triggering on any DOM events such as onChange, onClick, or onDblClick. Below are the snippets of code where the component is rendered and the component itsel ...

Adjusting the size of HighCharts HighMaps with a custom function

Simple query here (I believe) I have a DIV with the class "container" acting as my Map. The Highcharts plugin I'm using is responsive, but it only resizes when the window does. I'm looking to manually trigger a resize without adjusting my windo ...

Baconjs exclusively retrieves the final debounce value

Below is a code snippet that showcases my current implementation: let watcher; const streamWatcher = bacon.fromBinder(sink => { watcher = chokidar.watch(root, { ignored: /(^|[\/\\])\../ }); watcher.on('all&a ...

Cordova triggers a 500 (Internal Server Error) when making an Ajax request

When I send an ajax request, it works fine in the browser but returns an internal error when sent within a Cordova APK. Upon comparing the headers, I noticed that the only difference is in the ORIGIN: The one not working has origin: file:// POST 500 (In ...

Tips for calculating the total sum of inner object property values using JavaScript, TypeScript, or Angular 5

What is the total sum of successCount values in the given array object? var successCount;//I want count of all successCount attributes from the below object var accordianData = [ { name: "Start of Day", subItemsData: [ { title: " ...

The Controller is encountering an empty child array when attempting to JSON.stringify it

After examining numerous similar questions, I am uncertain about what sets my configuration apart. I've experimented with various ajax data variations and JSON formatting methods, but the current approach seems to be the closest match. This issue is ...

Ways to choose a designated element without relying on ids or classes

I am looking to create an on-click function for each button, so I require a method to select each one individually without relying on IDs <div class="col"> <div> <b>Name:</b> <span ...

What is the best way to animate the preprending of a div in an AJAX response?

Here is the code I am currently working with: $.ajax({ type: 'POST', url: 'load_more.php', data: {val:myval}, success: function (data) { $("#load_current").prepend(data); ...

The $routeProvider is unable to load the view specified in ngRoute

I am currently in the process of implementing ngRoute into my application, but I am facing challenges with getting it to function properly. To showcase my efforts, I have developed a basic app. index.html: <!DOCTYPE html> <html ng-app="tester"& ...

When trying to interact with an element using partial XPath with contains in Selenium WebDriver using Java, encountering difficulties in clicking

Attempting to interact with an element using partial xpath, as the ID is not unique. Confirmed correctness of xpath by highlighting intended element in firepath. Below is the HTML code snippet: <div class="acme_color_swatches"> <div class="ac ...

Obtain precise JSON information using Node.js

Having limited experience with Angular JS and Node JS, I find myself in need of assistance. On the server side, I have multiple JSON files containing language translations. Based on a client's request for a specific language, such as French, I must re ...