I have a bunch of elements that contain data-testid attributes.
Think of them as something like this:
<div data-testid="my-page">
<div data-testid="my-page-content"></div>
<div data-testid="my-page-footer">
<button data-testid="my-page-action-button">Do something</button>
<button data-testid="my-page-cancel-button">Cancel</button>
</div>
</div>
For one of my tests, I need to find the buttons through their data test id pattern.
As you can see, it is my-page-**-button.
I need to know how to adjust my selectors accordingly so that I grab the elements that begin with my-page and end with button.
So far, I've been doing:
$("[data-testid^='my-page-']")
Unfortunately, this will grab my-page-content (or my-page-footer). How can I grab all elements with data-testids like my-page-**-button?
either include the button
button[data-testid^='my-page-']
or include the ends with
[data-testid^='my-page-'][data-testid$='button']
console.log($("button[data-testid^='my-page-']").length);
console.log($("[data-testid^='my-page-'][data-testid$='button']").length);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-testid="my-page">
<div data-testid="my-page-content"></div>
<div data-testid="my-page-footer">
<button data-testid="my-page-action-button">Do something</button>
<button data-testid="my-page-cancel-button">Cancel</button>
</div>
</div>Select with prefix AND Suffix .
$("[data-testid^='my-page-'][data-testid$='-button']")
, between selector(s)You need here the Execulsive AND
I think this does what you need:
$('[data-testid^=my-page-][data-testid $=button')
A working demo is below, let me know if you needed something else.
DEMO
// Select using start and end selectors
$('[data-testid^=my-page-][data-testid $=button').each( function() {
console.log($(this).attr("data-testid"));
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-testid="my-page">
<div data-testid="my-page-content"></div>
<div data-testid="my-page-footer">
<button data-testid="my-page-action-button">Do something</button>
<button data-testid="my-page-cancel-button">Cancel</button>
</div>
</div>