Search code examples
cypress

Cypress how to select option containing text

In Cypress, the select('option-text') command will only work if there is an exact match. How can I tell it to select an option that contains the text instead ?

Solution

  • I haven't found anything like that in the api so far, nor in the github issues.

    So I resorted to adding a custom command in my project:

    // cypress/support/commands.ts
Cypress.Commands.add('selectContaining', {prevSubject: 'element'}, (subject, text, options) => {
  return cy.wrap(subject).contains('option', text, options).then(
    option => cy.get('select#report-selection').select(option.text().trim())
  );
});

    // cypress/support/commands_type.ts
declare namespace Cypress {
  interface Chainable<Subject = any> {
    requestApi(method: HttpMethod, url: string, body?: RequestBody): Chainable<Cypress.Response>;
    selectContaining(text: string | string[], options?: Partial<SelectOptions>): Chainable<Subject>;
  }
}