Tips for choosing an element based on the presence of a specific text in its value or title

I've been exploring ways to select an element if its value contains "6 months." Here are a few examples where all values include the phrase "6 months" in different scenarios. I'd like to avoid clicking on each one individually, but rather click based on the bank type specified.

<input type="button" aria-label="AMEX 6 months Extended Payment Plan" title="AMEX 6 months Extended Payment Plan" value="AMEX 6 months Extended Payment Plan" class="pm-button pp-content-btn pm-button-half">

<input type="button" aria-label="DBS IPP 6 months 0%" title="DBS IPP 6 months 0%" value="DBS IPP 6 months 0%" class="pm-button pp-content-btn pm-button-half">

<input type="button" aria-label="UOBSG IPP 6 months 0%" title="UOBSG IPP 6 months 0%" value="UOBSG IPP 6 months 0%" class="pm-button pp-content-btn pm-button-half">

Is it possible to click on an element if the value/title contains the string "6 months"?

EDIT: Using protractor for testing.

javascriptseleniumprotractor

Answer №1

To accomplish this, you can make use of xpaths and the contains function in the following manner:

element(by.xpath('//input[contains(@title,"6 months")]');

The contains function is a valuable tool for identifying elements that contain specific text within an attribute or the element itself.

Answer №2

That's exactly what the by.cssContainingText method does, which is a partial text matcher in conjunction with CSS.

let elem = element(by.cssContainingText('[style]', '6 months'));

REVISION

There is one way to achieve your goal, but it may be inefficient. You can use the .filter method against elementArrayFinder multiple times until you narrow down the results to the desired element.

Alternatively, you could look for the element using two parameters.

let $elem = (bank, range) => element(by.xpath(`//input[contains(.,"${bank}") and contains(.,"${range}")]`));

Make sure to correct the XPath as needed. Essentially, this code looks for an input element that partially matches both the first and second parameters provided.

Answer №3

If you're unable to utilize querySelectorAll, this function may be of use:

If the element name is not a factor:

FindByAttributeValue("Attribute-Name", "Attribute-Value");

Or if it is:

FindByAttributeValue("Attribute-Name", "Attribute-Value", "div");

Here is the complete function implementation:

function FindByAttributeValue(attribute, value, element_type){
    element_type = element_type || "*";
    var All = document.getElementsByTagName(element_type);
    for (var i = 0; i < All.length; i++){
        if (All[i].getAttribute(attribute) == value){
            return All[i];
        }
    }
}

The original solution can be found HERE

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

Retrieve the data from a Sequelize Promise without triggering its execution

Forgive me for asking, but I have a curious question. Imagine I have something as simple as this: let query = User.findAll({where: {name: 'something'}}) Is there a way to access the content of query? And when I say "content," I mean the part g ...

javascriptnode.jsexpresspromisesequelize.js

Suggestions are not being displayed by Pycharm for Robotframework

https://i.sstatic.net/1uc0V2.png https://i.sstatic.net/Gooi77.png https://i.sstatic.net/dRYJx9.png I've set up everything correctly, but Pycharm isn't providing any suggestions. Can someone assist me with this issue? ...

seleniumpycharmrobotframeworkintellibot

Is there a way to properly position an element in line with the element directly above it using html, css, and

I need help with aligning two <input type="text"> boxes on my form. Currently, I have a dropdown button and one text input in one row, and another text input in the second row (refer to the screenshot below). How can I ensure that the "Choi ...

javascripthtmlcssbootstrap-4

Storing JSON information within a variable

I'm currently working on an autocomplete form that automatically populates the location field based on the user's zipcode. Below is the code snippet I've written to retrieve a JSON object containing location information using the provided zi ...

javascriptjson

The Facebook bots are unable to crawl our AngularJS application because the JavaScript is not being properly

I have a unique setup where my website is built with AngularJS and Wordpress as a single page application. Depending on the routing of the page, I dynamically define meta tags in the controller. Here's a snippet of my HTML header: <meta property=" ...

javascriptangularjsfacebookfacebook-graph-api

Create shorter nicknames for lengthy reference names within the ng-repeat loop

Is it possible to assign an alias to a long reference name in ng-repeat? Currently, I have 2 complex objects where one acts as a grouped index for the other. Although the ng-repeat template code is functioning correctly, it's getting hard to read and ...

javascriptangularjs

Tips on hiding the product analytics notification bar in Brave Browser with Python, Selenium, and ChromeDriver

I've successfully automated the Brave Browser launch using Selenium, ChromeDriver, and Python Here is a snippet of the code I used: from selenium import webdriver from selenium.webdriver.chrome.options import Options from selenium.webdriver.chrome.se ...

pythonseleniumgoogle-chromeselenium-chromedriverbrave-browser

Combine two shapes to create a single form using the PLYLoaders tool

I have encountered an issue while attempting to merge two PLY files using the PLYLoader method. How can I simultaneously access the Geometry of both loaders? After loading the two ply files and defining a new BufferGeometry for the combined shape, I found ...

javascriptmergethree.jsply-file-format

Tips for displaying an alert after a successful form submission and ensuring user input validation

I created a form with PHP code to send emails, but I'm struggling to add an alert without page refresh upon submission. The alert needs to display in green or red text below the button. Validation for email input is needed, as well as protection again ...

javascriptphphtmlformsvalidation

Is there a way to automate clicking on the second button on a webpage using Selenium with Python 3?

My task involves working with Python, Selenium, and Windows 7. I need to click on the sowcomment button once it becomes clickable on this webpage. I will handle the button click using the wait command. After that, I want to click on the showmore Comments b ...

python-3.xseleniumselenium-webdriverweb-crawler

Tips for solving the "jQuery needs a window with a document" error when using import statements

I'm encountering the "jQuery requires a window with a document" error, and it appears that I require guidance similar to this solution: Error: jQuery requires a window with a document My quest is to find the precise syntax for addressing this using i ...

javascriptnode.jsnpmwebpack

Failure in SystemJS during ahead-of-time compilation due to missing NgZone provider

Previously, I have successfully used Angular's ahead-of-time compilation. However, after adding routing and lazy loading to my app, I am facing difficulties in making it work again. Upon updating my code to the latest 2.0 release, it functions well w ...

javascriptangulartypescript

Laravel modal causing video playback to continue even after closing

I have been working on creating a process where a video will play in a modal when clicked and then pause when the modal is closed. However, I have encountered an issue where the video continues to play even after the modal is closed. Here is the code I am ...

javascriptphpjquerylaravel

Attempt to capture a parameter transmitted from res.render

Within my ejs webpage, I am implementing a try catch block within a script tag. Sometimes when rendering the page, my server includes the token and user, while other times it does not. In previous instances where variables were passed through, I would use ...

javascripttry-catchejs

Is your Ajax response suddenly failing to work after the initial attempt?

Describing my predicament: The code snippet below is what I have been using to insert a custom-designed div into my webpage. Initially, the div is successfully added; however, it stops working after the first instance. $('#addanother').click(fu ...

javascriptjqueryajax

Tips on locating the specific web element that displays the error message within the Gmail login form

When attempting to test login success by entering an incorrect password, I am trying to obtain the div element that contains the error message. Unfortunately, I keep encountering the org.openqa.selenium.NoSuchElementException. Despite researching online f ...

javaseleniumgmail

Navigating the complexities of custom directive attributes within Angular can be a daunting task

I'm feeling a bit lost as to why this isn't functioning properly... Here's the directive I am working with: app.directive('dateDropDowns', function () { function link($scope, elem, attr) { console.log($scope.startYear); }; ...

javascriptangularjsangularjs-directive

Odd behaviour when using JSON in CouchDB

I have developed an updates handler in CouchDB with test code like this (before inserting into Couch I am removing newlines): function (doc, req) { if (req['userCtx']['roles'].indexOf('editor') < 0) { return [ ...

javascriptangularjsjsoncouchdbseamonkey

What causes the closure variable to be reset after iterating over JSON data using $.each method?

Take a look at this scenario: var elements = []; $.getJSON(data_url, function(result) { $.each(result, function(key, value) { elements.push(parser.read(value.data)); // at this point, "elements" contains items }); }); dataLayer.addElements( ...

javascriptjqueryjsonclosures

Create a VueJS/VuetifyJS implementation inspired by the WhatsApp swipe between tabs animation

Currently, I am utilizing the VuetifyJS framework for VueJS and I am interested in replicating the swipe between tabs transition seen in WhatsApp for Android. In WhatsApp, you have the ability to swipe left or right to view a new section as you swipe. Vue ...

javascriptmobilevue.jsswipevuetify.js