cypress - How to get selection element by selected value?

Question

I'm trying to use Cypress in a Vue project. I have a page that has a table with many rows. Each row has a selection label. This selection label has different options and the current status of each row, such as: "Processing", "Awaiting review", etc.

By changing this, there are some conditions; some changing from one state to another are not allowed, some require confirmation, some are OK and show success message.

To test this, I have to get the element based on its current value. As I saw in the cypress documentation or on different websites, there is no explanation for this (if possible).

So, to be more clear, I want something like this (I know hasValue is not something that exists on cypress):

cy.get('select').hasValue('In Process')
// or
cy.get('select').hasValue(3)

I've tried something like contains but that returns all the text.

Answer 1

Documentation located hereSelect example,

There are many display methods, such as using .invoke('val') to extract the value of .

cy.get('select')
  .invoke('val')
  .should('eq', 'In Process')

cy.get('select')
  .should('have.value', 'In Process')