Then You can directly use the text to find the locator and click it, something like:

cy.contains('Tool').click()

For the search button, you have the aria-label tag, you can use that directly:

cy.get('input[aria-label*="main-search-box"]').type('text')

I believe it goes against cypress' best practices to try and select any element other than using data-cy="add-unique-id-here" selector. The docs suggest that using CSS-style selectors is brittle, and may cause tests to fail in the future when you update your code. By using data-* selectors, you can gaurantee you're always selecting what you need.

Here's the link for the cypress docs: https://docs.cypress.io/guides/references/best-practices#Selecting-Elements

In your case, adding <span class="ui-lib-checkbox__box" data-cy="descriptive-checkbox-name"> <svg>...</svg> </span> to your html

and cy.get('[data-cy=descriptive-checkbox-name]') to your cypress testing file, should do the trick.

Given the text for the checkboxes are unique, you can use cy.contains()

// 'Under 6 min' checkbox
cy.contains('span', 'Under 6 min')

// 'Tool' checkbox
cy.contains('span', 'Tool')

As for the search box, it will get a bit trickier. If it is the only search box that is visible on the page you can do the following.

cy.get('input[type=text][placeholder]')
  .filter(':visible')