QSelect does not render certain items in test environment

Describe the bug

We’re seeing a problem that when we use QSelect with current Cypress (3.6.1) on both Chrome stable (78) and Canary (80), QSelect’s virtual scrolling does not render all items, which leads to this:

Codepen/jsFiddle/Codesandbox (required)

I don’t have that, but a full repo that you can clone and check out yourself: https://github.com/rmehner/quasar-select-cypress

To Reproduce

Steps to reproduce the behavior:

1. Init quasar app (quasar init qselect-demo) with standard options
2. Add Cypress to app (quasar ext add @quasar/testing-e2e-cypress), say yes to everything
3. Edit src/pages/Index.vue to look like this:

<template>
  <q-page class="flex flex-center">
    <q-select outlined label="Number" :options="options" />
  </q-page>
</template>

<script>
export default {
  name: "PageIndex",
  data() {
    return {
      options: [...Array(5000).keys()]
    };
  }
};
</script>

1. Add cypress test test/cypress/integration/home/init.spec.js:

import * as ctx from  '../../../../quasar.conf.js'

describe('Landing', () => {
  beforeEach(() => {
    cy.visit('/')
  })

  it('.should() - select the number', () => {
    cy.get('.q-page')
      .contains('Number')
      .within(() => {
        cy.contains('arrow_drop_down').click()
      })

    cy.get('.q-menu')
      .scrollTo('bottom')
      .contains('4999')
      .click()
  })
})

1. Remove Chrome:: Hack for shaking AUT from test/cypress/plugins/index.js, as this will break current Cypress versions.
2. Start server quasar dev
3. Run npm run test:e2e
4. Click init.spec.js in the opened browser for Cypress
5. See that some items are not rendered in the list

Expected behavior

All items should be rendered, just like it normally does in the browser.

Platform (please complete the following information): OS: macOS 10.14.6 (although we’re also seeing this on other machines that run Win10 and Linux) Node: 12.13.0 NPM: 6.11.1 Yarn: - Browsers: Chrome 78 / Chrome 80 iOS: - Android: - Electron: -

[kamcnally]

I came across this problem using a table with virtual scroll. In the end, I disabled modifyObstructiveCode in the Cypress configuration and the problem was immediately solved.

I’m guessing that something in the virtual scroll code is similar enough to a framebusting technique that Cypress is by default removing it.

[Nervus86]

I have the same problem with quasar 2.0.3, I don’t use @ virtual-scroll, however only the last 20-30 options are rendered.

it works correctly only if virtual-scroll-item-size=“0” is set