I'm using VueJS and Cypress to test e2e. I also use Vuetify's dropdown:
<div class="col-md-6" id="selecter">
<v-select
v-model="courseSelection.value"
:items="courseOptions"
:error-messages="courseSelection.errors"
:disabled="courseSelection.disabled"
label="select"
required
outlined
dense
/>
</div>
The courseOptions contains a lot of options with lazy-loading, meaning it loads if you scroll down. I'm trying to get latest item on that list, but I can't seem to figure a way to scroll down and so it could be loaded. What I tried:
cy.get('#selecter').click();
cy.get(".v-menu__content.theme--light.v-menu__content--fixed").eq(0).scrollIntoView();
cy.get('div[role="listbox"]').find('div[role="option"]').eq(-1).click();
But it selects only the latest loaded item and not the actual latest item. How it can be done?