Cypress: Unable to scroll with React Virtualized

[alveshelio]

Current behavior:

cy.get('.ReactVirtualized__Grid__innerScrollContainer').scrollTo(0, 500)
Cypress is unable to scroll to bottom on React Virtuazlied

Desired behavior:

Cypress should be able to scroll to bottom with React Virtualized

Versions

Cypress 3.1.4

Right now I'm doing a proof of concept to see if Cypress is the right choice for our project and we are using React Virtualized to display a list of elements.

When I try to use scrollTo() on the React Virtualized container, I get this error:

CypressError: Timed out retrying: cy.scrollTo() failed because this element is not scrollable:

<div class="ReactVirtualized__Grid__innerScrollContainer" role="rowgroup" style="width: auto; height: 3960px; max-width: 820px; max-height: 3960px; overflow: hidden; position: relative;">...</div>

I've read in this thread: https://github.com/applitools/eyes.cypress/issues/9 that Cypress falls short on elements which scroll internally.

I'd like to know if you guys are planning on implementing this behaviour, is there any workaround in the meantime?

Thank you

[lukeapage]

Virtualized works by making a 0 width scroll element with a scrollbar - have you tried finding that element and scrolling that?

[alveshelio]

Hi @lukeapage,

Thank you for taking the time to reply to my question. I wish you a happy New Year :)

I was indeed targeting the wrong element. I needed to target the element above that.

Everything is working great now.

Thank you again for your help

[alveshelio]

Hi @lukeapage,

So, I'm trying to compare the elements inside React Virtualized and then scroll and compare them again to see if they are different but when I try to get the children, Cypress is unable to to find anything.

This is my HTML

<div class="Contents--listContainer__3C_Li" data-testid="infiniteLoader" style="position: relative;">
    <div style="overflow: visible; width: 0px;">
      <div aria-label="grid" aria-readonly="true" class="ReactVirtualized__Grid ReactVirtualized__List" role="grid"
        tabindex="0" style="box-sizing: border-box; direction: ltr; height: 810px; position: relative; width: 1300px; will-change: transform; overflow: auto;">
        <div class="ReactVirtualized__Grid__innerScrollContainer" role="rowgroup" style="width: auto; height: 3496.98px; max-width: 1300px; max-height: 3496.98px; overflow: hidden; position: relative;">
          <div data-qa="genericContentCardDiv" id="genericContentCard0" class="Contents--contentcard__3no13" style="height: 85.2923px; left: 0px; position: absolute; top: 0px; width: 100%;">
            <div class="MuiPaper-root-168 MuiPaper-elevation1-171 MuiPaper-rounded-169 MuiCard-root-167 Tile--container__jEwPa"
              data-qa="Tile">
              <div class="MuiCardContent-root-195">
                <div class="MuiGrid-container-196 MuiGrid-spacing-xs-24-220">
                  <div class="MuiGrid-item-197 MuiGrid-grid-xs-12-236 MuiGrid-grid-md-6-258 ContentCardGeneric--gridItem__2zO7C ContentCardGeneric--gridChild__3eMjw">
                    <div class="MuiGrid-container-196 MuiGrid-spacing-xs-24-220">
                      <div class="MuiGrid-item-197 MuiGrid-grid-xs-12-236 MuiGrid-grid-sm-3-241 ContentCardGeneric--gridItem__2zO7C">
                        <div class="ContentType--container__252qq" data-qa="ContentType">
                          <p class="MuiTypography-root-75 MuiTypography-body2-83 TextPlaceholder--container__1H_jV"
                            data-qa="TextPlaceholder">ContentList</p>
                        </div>
                      </div>
                      <div class="MuiGrid-item-197 MuiGrid-grid-xs-12-236 MuiGrid-grid-sm-9-247 ContentCardGeneric--gridItem__2zO7C">
                        <p class="MuiTypography-root-75 MuiTypography-body2-83 MuiTypography-alignLeft-97 TextPlaceholder--container__1H_jV"
                          data-qa="TextPlaceholder"><span width="0"><span><span>Trudeau le midi - Jonathan Trudeau</span></span><span
                              style="position: fixed; visibility: hidden; top: 0px; left: 0px;">...</span></span></p>
                      </div>
                    </div>
                  </div>
        .....
      </div>
    </div>
    <div class="resize-triggers">
      <div class="expand-trigger">
        <div style="width: 1301px; height: 795px;"></div>
      </div>
      <div class="contract-trigger"></div>
    </div>
  </div>

I've tried multiple approaches to get the children.
I've tried
cy.get('ReactVirtualized__Grid__innerScrollContainer').children().should('have.length', 20)
cy.get('.ReactVirtualized__Grid').next('div').children().should('have.count', 20)

But every time Cypress times out because it is unable to find the element.
CypressError: Timed out retrying: Expected to find element: 'ReactVirtualized__Grid__innerScrollContainer', but never found it.

If I try with cy.get('.ReactVirtualized__Grid').next('div')
Then I get this error:

CypressError: Timed out retrying: Expected to find element: 'div', but never found it. Queried from element: [ <div.ReactVirtualized__Grid.ReactVirtualized__List>, 1 more... ]

Why is Cypress unable to find the div inside cy.get('.ReactVirtualized__Grid').next('div')

Any idea what I might be doing wrong?

Thank you for your help.

[lukeapage]

Note that I do not work for cypress, I just spotted a question that intrigued me and I could answer it.

However.. your missing a dot on the first class selector.

Also, commands retry but I am not sure if next/children retry all the way to the get, so bear that in mind too - I would make the selector in get complete, so it’s just get, should.