Using cypress, how to select an item on a `<v-autocomplete>` if it has too many items

Question

While writing a E2E test for a Vuetify page using Cypress, I ran into difficulties selecting one or more elements from either a <v-select> or a <v-autocomplete>

The answer to a preexisting question works okay as long as there are only a few options on the select.

The problem is: if your component has many options selected, Vuetify will only render the options that are close to the corresponding scrollbar position on its popup, meaning that the option you need to select may not be visible and is therefore, not selectable via Cypress.

Does anyone know a reliable way to access an element on a Vuetify <v-select> / <v-autocomplete> even if the select has too many options?

Answer 1

This worked for me:

First I added a custom command for the tab key

Cypress.Commands.add("typeTab", (shiftKey, ctrlKey) => {
    cy.focused().trigger("keydown", {
        keyCode: 9,
        which: 9,
        shiftKey: shiftKey,
        ctrlKey: ctrlKey,
    });
});

Then added the command to my support/index.d.ts file

typeTab(shiftKey: Boolean, ctrlKey: boolean): Chainable<any>

And finally for the test

    cy.get("#country")
        .click({ force: true })
        .focused()
        .type("U{downArrow}nited St")
        .typeTab();

This is with Cypress 10.1.0 and Vuetify 2.6.6