Cypress multiple-select test fails with strange error

[khteh]

template:

<template>
  <q-item tag="label" v-ripple>
    <q-select
      borderless
      stack-label
      emit-value
      map-options
      multiple
      class="full-width"
      v-model="model"
      :options="options"
      :label="name"
    >
      <template v-slot:after>
        <q-btn
          data-test="btnMultipleDropDownSetting"
          round
          dense
          flat
          color="primary"
          icon="done"
          @click="multiSelectionCompletes"
          :disable="submitButtonDisable"
        />
      </template>
    </q-select>
  </q-item>
</template>

test code:

   it('Verify Multiple-Select from auto-generated page', () => {
    cy.get('[data-test="multidropdown-setting-4"]').find('label').should('contain', "Auto Generated Multi-Selection box");
    cy.get('[data-test="multidropdown-setting-4"]').find('label').select(["Option 1"]);
   });

Error: https://stackoverflow.com/questions/73233046/quasar2-vue3-cypress-multi-select-test-fails-with-strange-error

Software version

OS: Ubuntu 22.04 Node: v18.4.0 NPM: 8.15.0 Any other software related to your bug:

What did you get as the error?

What were you expecting?

What steps did you take, to get the error?

[IlCallo]

The images show that you're using our portal helpers, which check for the menu to be closed Since multi-select won't close the menu after selecting, you should use persistent option of withinSelectMenu

Check out my talk into QuasarConf of last month, it could help you We should probably better document this option and portal based helpers in general

As a side note, please always provide a repro, instead of copy/pasting the code In the code you pasted there is no withinSelectMenu used and this would have made impossible for anyone else except me to debug your problem, as they would have focused on code you pasted and wouldn't be able to reproduce the error

[khteh]

How to use withinSelectMenu? Any doc? I tried:

cy.withinSelectMenu(
  {persistent: true},           // this means you have a multiple select
  () => { 
    cy.get('.q-item[role=option]').contains("Option 1").click();
  });

Error:

https://stackoverflow.com/questions/73233046/quasar2-vue3-cypress-multi-select-test-fails-with-strange-error

[khteh]

/open /reopen

[IlCallo]

Into the docs:

It seems like you're not opening the select before trying to click stuff around into it's options menu

[khteh]

I did at the line before it:

cy.get('[data-test="multidropdown-setting-4"]').find('label').should('contain', "Auto Generated Multi-Selection box").should('be.visible').click();

And the test console does show it is open:

[iampawan31]

I was facing the same issue. Got it to work by going through the github repo based on suggestion by @IlCallo. Sample Code if anyone is facing similar issue.

cy.dataCy('select').click()
cy.withinSelectMenu({
      persistent: true,
      fn: () => {
        cy.contains('Option One').click()
      },
    })