How to remove the "selected" Attribute and move it to another option using Cypress?

user_15744516 0
Viewed 157

I have tried:

cy.get(`div[class="input-group input-group-sm"] select[name="activeStatus"]`).find(":selected").invoke("removeAttr", "selected")

which doesn't work as I have hoped, but it's been the closest to it I think. Anyone have any tips? I want to move the "Selected" attribute from Active, to Cancelled.

enter image description here

cypress attributes javascript
1 Answers

You're halfway there, the removal part works. To add selected to Cancelled, invoke attr

// remove
cy.get('select')
  .find(':selected')
  .should('contain', 'Active')
  .invoke('removeAttr', 'selected')

// add
cy.get('select')
  .find('option')
  .contains('Cancelled')
  .invoke('attr', 'selected', true)

//confirm
cy.get('select')
  .find(':selected')
  .should('contain', 'Cancelled')

This gives you

<option selected="selected">Cancelled</option>

If you prefer

<option selected>Cancelled</option>

use this instead

// add
cy.get('select')
  .find('option')
  .contains('Cancelled')
  .then($el => $el[0].setAttribute('selected', ''))
user_169977070
Related