Cypress: Is it possible to select an item out of a dynamic dropdown with only a partial word/s?

user_18578613 0
Viewed 174

I have a dropdown list which is always increasing in the number of options available. I Have the 'RecieptName' from the option, however, it is followed by text that is constantly changing. eg: RecieptName: 'Changing sentence including words and numbers'.

What I am trying to do is something along the lines of:

cy.get('#RecieptName').select('RecieptName:');

However, it can't find an option with it as it is followed by changing the numbers. Is it possible to find the option based on a partial option?

enter image description here

cypress drop-down-menu
3 Answers

You would need to scan the options first, find it's index and select by number

Using .contains() command

cy.get('option')
  .contains('ReceiptName:')
  .invoke('index')           // index among siblings
  .then(index => {
    cy.get('dropdown').select(index);
  })

Using a regex

cy.get('option')
  .contains(/^ReceiptName:/)
  .invoke('index')           // index among siblings
  .then(index => {
    cy.get('dropdown').select(index);
  })

Using selected prop

cy.get('#RecieptName option')
  .contains(/^ReceiptName:/)
  .invoke('prop', 'selected', true)
user_169977070

The option containing the the text "RecieptName:" can be selected by adding :contains()

cy.get('#RecieptName option:contains(RecieptName:)')
  .then($option => {
    cy.get('#RecieptName').select($option.text())
  })

cy.get('#RecieptName option:contains(RecieptName:)')
  .then($option => {
    cy.get('#RecieptName').select($option.index())
  })
user_185730650

filter will get the DOM element that match a specific selector. Once we get the element, then we get the exact text of RecieptName option by using the invoke(text) and then we pass the same text to the select command, something like this:

cy.get('#RecieptName option')
  .filter(':contains("RecieptName:")')
  .invoke('text')
  .then((recieptNameText) => {
    cy.get('dropdown').select(recieptNameText)
  })

You can also use the value attribute to directly select the dropdown as I can see the value attributes are unique, I guess that would be the cleanest way to do this:

cy.get('select#RecieptName').select('scoredesc')
cy.get('select#RecieptName').select('modifieddesc')
cy.get('select#RecieptName').select('createdasc')
user_45712710
Related