I would like to perform the following tests with Cypruss E2E:
(1) Verify the number and content of the select options
(2) Select one of them and verify the value matches the selection.
This is what I have done for (2):
it('Verify Options from auto-generated page', () => {
cy.get('[data-test="dropdown-setting-3"]').find('label').select("Option 1"); // OK
cy.get('[data-test="dropdown-setting-3"]').should('have.value', 1); // XXX
});
I am able to select one of the options from the q-select.However, validation of the value selected fails:
Timed out retrying after 4000ms: expected '<label.q-item.q-item-type.row.no-wrap.q-item--clickable.q-link.cursor-pointer.q-focusable.q-hoverable>' to have value '1', but the value was ''
But none of them succeed. I have not figured out how to achieve (1).
The quasar select has an input, but it's value does not get updated.
Instead you can check the child element span that displays the selected value.
cy.get('[data-test="dropdown-setting-3"]')
.click() // open select
cy.get('.q-menu .q-item') // list of options
.should('have.length', 5) // substitute your list count
cy.get('.q-menu .q-item')
.click() // select 2nd item
// OR
// cy.contains('Option 2')
// .click() // select 2nd item
cy.get('[data-test="dropdown-setting-3"]')
.find('span') // value is displayed via span
.should('have.text', 'Option 2') // verify the text
I think the problem with using .q-item selector is you have an additional <q-item> around the <q-select>, but I can't see what it's purpose is.
You can strengthen the option selector by adding .q-menu to it (see above).