How to select a element if value/title contains a text

Question

I have been trying to find out on how I can grab the element if a value contains "6 months". Here is few example and as we can see all of these values has the word 6 months and this is different scenarios of course so I don't want to click all of them but I gave example of different banktype that I need to click

<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">

and I wonder if its possible to click on a element if the value/title contains the word "6 months" inside it?

EDIT : Using protractor for testing

Use an attribute query selector with a substring matching selector, like `document.querySelectorAll('[title*="6 months"]')` — Teemu, Apr 20 '20 at 07:20
@Teemu I think my problem is that I can't use querySelectorAll in protractor :( — PythonNewbie, Apr 20 '20 at 07:22
Maybe this gives an idea, but I'm not sure: https://stackoverflow.com/questions/38108686/protractor-get-div-element-by-title — Milan Tenk, Apr 20 '20 at 07:29
@tenkmilan I believe that is more if we are aware of what exact title we want to get — PythonNewbie, Apr 20 '20 at 07:30

score 2 · Answer 1 · answered Apr 20 '20 at 09:01

2

You can achieve this using xpaths with the contains function like so:

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

The contains function is very useful for locating elements which contain certain text either in an attribute or in the node itself.

answered Apr 20 '20 at 09:01

DublinDev

2,318
2
8
31

Ohhhh this one works! Amazing, didnt thought I could do it that pretty easy! – PythonNewbie Apr 20 '20 at 09:10

score 1 · Answer 2 · answered Apr 20 '20 at 07:46

since you can't use the querySelectorAll, you might find this function helpful:

in case you don't depend on the element name:

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

or in case you do:

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

and the full 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];
        }
    }
}

full answer came from HERE

But if I understod correctly, the attributes needs to be exact matching to be valid, dont it in this case? — PythonNewbie, Apr 20 '20 at 07:51

Sergey Pleshakov · Accepted Answer · 2020-04-20T14:28:04.377

That's exactly what by.cssContainingText does (partial text matcher in conjunction with css)

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

REVISION

1 way for doing what you need, but very inefficient... You may use .filter against elementArrayFinder several times until you narrow down the results to the element you need

But I'd look for the element you need by 2 parameters

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

Correct the xpath as needed. But essentially it looks for an input element that partially matches anything (attribute, text etc) with first parameter AND the second one

How to select a element if value/title contains a text

3 Answers3