QSelect does not render certain items in test environment

[rmehner]

trafficstars

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>

4. 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()
  })
})

5. Remove Chrome:: Hack for shaking AUT from test/cypress/plugins/index.js, as this will break current Cypress versions.
6. Start server quasar dev
7. Run npm run test:e2e
8. Click init.spec.js in the opened browser for Cypress
9. 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: -

[rmehner]

Btw. we've tried to use the command that the quasar plugin for cypress creates, but that one doesn't seem to be compatible to current Quasar versions.

[pdanpdan]

I don't know how Cypress works, but could you try adding a delay between .scrollTo('bottom') and .contains('4999')...? When scrolling there is a $nextTick between the scroll and the rendering.

[pdanpdan]

Any news on this? Does it work with the delay?

[rmehner]

Added a little wait of 5000ms, still no dice.

diff --git a/test/cypress/integration/home/init.spec.js b/test/cypress/integration/home/init.spec.js
index 2766544..10f1cc2 100755
--- a/test/cypress/integration/home/init.spec.js
+++ b/test/cypress/integration/home/init.spec.js
@@ -14,6 +14,10 @@ describe('Landing', () => {
 
     cy.get('.q-menu')
       .scrollTo('bottom')
+
+    cy.wait(5000)
+
+    cy.get('.q-menu')
       .contains('4999')
       .click()
   })

Window looks like this:

I just realised that this issue might be better suited in https://github.com/quasarframework/quasar-testing, sorry if this is the wrong repo to report this in.

[pdanpdan]

Are you doing a render when waiting? I don't know exactly how the testing framework works, but the virtual list needs a tick to re-render the content.

[rmehner]

We don't explicitly render, as Cypress is like remote control for Chrome and if we wait, it just sits there and wait and Chrome does its thing, so the tick should happen.

[rmehner]

👋

We've tried around a little and extended the example over at https://github.com/rmehner/quasar-select-cypress

Things we've found out / extra info:

• We've added a progress bar that updates on nextTick to see if we miss ticks, but ticks are running fine, so that's out
• We've added a @virtual-scroll event handler on the select and when we use it in the browser, we see 4 scroll events in the log, but with Cypress we only ever see one, no matter how often we scroll in the element. Not sure if what this tells us, but just throwing it out here.
• when we set virtual-scroll-item-size on the element to 0 it works in cypress. If we leave it out, it does not work. I have a hunch that calculating the right heights for the virtual scrolling seems to no work properly within the Cypress environment.

Does this information help you in any case?

(We've also updated to latest quasar, just to rule out that there is a bug in the older version)

[pdanpdan]

After the release of v1.8.4 tomorrow can you please try to call the new refresh method of QSelect after scrolling? - it might fix the things for you also

[pdanpdan]

I'll close it because a lot changed since the last update. If you have the same problem please comment here to reopen.

[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

[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.