How to select options by text in Cypress

[HankBreck]

Hey all. I have been needing to test React Select with Cypress lately, and until now I didn't have a great way to do so. Previously, I was selecting options by their automatic ID, which was entirely dependent on the ordering. I haven't been able to find any better solution here or online, so I figured I would share in case anyone else is having the same issues. If people find this useful, maybe it would be worthwhile to add a prop to inject test ID attributes to avoid hacky solutions like this one.

The old setup is shown below:

In the app:

<Select
  ...
  inputId="selection-id"
  instanceId="selection-id"
/>

In the test:

cy.get("#selection-id").click()
cy.get("#react-select-selection-id-option-0").click();

This is not ideal if you have dynamic content. The ordering of options can break your tests, which is not great :/

I put together this custom command that uses partial ID matching and inspects the text content of each option.

Cypress.Commands.add("getSelectOptionByText", (selectId, optionText) => {
  return cy.get(`#${selectId}`).click().then(() => {
    let foundOption = null;
    // Iterate over partial matches for the option ID
    cy.get(`*[id^="react-select-${selectId}-option-"]`).each(($option) => {
      if ($option.text() === optionText) {
        foundOption = $option;
        return false;
      }
    }).then(() => {
      return foundOption;
    });
  });
});

I would appreciate any feedback on this solution, and I would be happy to assist with adding test IDs if we want to go down that path!