Custom selector to match a node and all descendants

this is TestCafe-specific question. I want to be able to select elements based on the attribute value of the element itself or anywhere in descendants. And the main requirement is to be able to do this without async calls.

Basically, i'm trying to write something like the following:

const findByTestName = (context: Selector, testName: string): Selector => {
    // if context itself matches [data-test~='${testName}'] return context;
    // return context.find('[data-test~='${testName}']');
};

Is it possible?

EDIT: To give a bit more context: I could've tried to solve it using css query like "#someid[data-test='testname'], #someid [data-test='testname']", but i'm trying to create nested page models like so:

class Page {
   constructor() {
     this.root = new Selector('[data-test="page"]');
     this.button = new Button(findByTestName(this.root, 'page__button'));
   }
}

class Button {
   constructor(context: Selector) {
     this.root = findByTestName(context, 'button');
     this.label = findByTestName(this.root, 'button__label');
   }
}

where DOM configuration could be like this:

<div id="page">
  <div data-test="page__button button">
    <span data-test="button__label" />
  </div>
</div>

or this. depending on the actual layout

<div id="page">
  <div data-test="page__button">
    <div data-test="someotherstuff">
      <div data-test="button>
        <span data-test="button__label" />
      </div>
    </div>
  </div>
</div>

this way Button pageModel would be a reusable thing that can be applied to any button.