Select an element by particular pattern with jquery

December 7, 2021

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?

>Solution :

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>