How to select a DOM element with only part of src attribute?

Question

There is a thing: I have an element which I need to select using their src attribute, but the src attribute is like this:

src = "https://xyz.amazonaws.com/c95eb334-e9ae-43c3-a75d-e926efa4661e/wardrobe/1601210284_bag-thumbnail.jpg?AWSAccessKeyId=AKIAVQ6TQWKMM4EMM232&Expires=1626957604&Signature=d3ITnIQDEvIk3UknRjEMuglUF0I%3D"

I am interested with this part: "1601210284_bag-thumbnail.jpg". The last part of the src is changing with every login/logut so I can't just make an assertion for all the src value.

Is there any way to select the element using only part of the src attribute? Any Ideas?

EDIT: I found that jQuery has somethig like attribute-contains-selector like this: [attr*=value]. Is there any similar in testcafe?

Answer 1

See if this helps

Array.from(document.querySelectorAll('img')).filter(function(x) {
                    console.log(new String(x.src).replace(/^.*[\\\/]/, '').split('?')[0]);
                }) ;

 <img src = "https://xyz.amazonaws.com/c95eb334-e9ae-43c3-a75d-e926efa4661e/wardrobe/1601210284_bag-thumbnail.jpg?AWSAccessKeyId=AKIAVQ6TQWKMM4EMM232&Expires=1626957604&Signature=d3ITnIQDEvIk3UknRjEMuglUF0I%3D">


<img src = "https://xyz.amazonaws.com/c95eb334-e9ae-43c3-a75d-e926efa4661e/wardrobe/asdsad-thumbnail.jpg?AWSAccessKeyId=AKIAVQ6TQWKMM4EMM232&Expires=1626957604&Signature=d3ITnIQDEvIk3UknRjEMuglUF0I%3D">

Answer 2

In your case, you could make use of the withAttribute() method as in the following in order to select the HTML element that you desire to:

import Selector from "testcafe";

const mySelector = Selector("img").withAttribute("src", /1601210284_bag-thumbnail.jpg/i);

This assumes, that you are trying to target an img element. If you target a div or any other element, you would need to replace the content within the Selector accordingly. The withAttribute method takes two arguments, the attribute of HTML element that you want to target as well as its value. For both arguments, the values can be supplied as either as a string or a regex. In this case, I supplied the attribute as a string and its value as a regex.