WIP

Author: piecyk

packages/react-virtual/e2e/app/main.tsx

@@ -29,40 +29,46 @@ const App = () => {
   })
 
   return (
-    <div
-      ref={parentRef}
-      id="scroll-container"
-      style={{ height: 400, overflow: 'auto' }}
-    >
-      <div
-        style={{ height: rowVirtualizer.getTotalSize(), position: 'relative' }}
-      >
-        {rowVirtualizer.getVirtualItems().map((v) => (
-          <div
-            key={v.key}
-            data-testid={`item-${v.index}`}
-            ref={rowVirtualizer.measureElement}
-            data-index={v.index}
-            style={{
-              position: 'absolute',
-              top: 0,
-              left: 0,
-              transform: `translateY(${v.start}px)`,
-              width: '100%',
-            }}
-          >
-            <div style={{ height: randomHeight(String(v.key)) }}>
-              Row {v.index}
-            </div>
-          </div>
-        ))}
-      </div>
+    <div>
       <button
         id="scroll-to-1000"
         onClick={() => rowVirtualizer.scrollToIndex(1000)}
       >
         Scroll to 1000
       </button>
+
+      <div
+        ref={parentRef}
+        id="scroll-container"
+        style={{ height: 400, overflow: 'auto' }}
+      >
+        <div
+          style={{
+            height: rowVirtualizer.getTotalSize(),
+            position: 'relative',
+          }}
+        >
+          {rowVirtualizer.getVirtualItems().map((v) => (
+            <div
+              key={v.key}
+              data-testid={`item-${v.index}`}
+              ref={rowVirtualizer.measureElement}
+              data-index={v.index}
+              style={{
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                transform: `translateY(${v.start}px)`,
+                width: '100%',
+              }}
+            >
+              <div style={{ height: randomHeight(String(v.key)) }}>
+                Row {v.index}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
     </div>
   )
 }

packages/react-virtual/e2e/app/test/scroll.spec.ts

@@ -1,28 +1,32 @@
 import { expect, test } from '@playwright/test'
 
-test('scrolls to index 1000', async ({ page }) => {
-  await page.goto('/')
-  await page.waitForSelector('#scroll-to-1000', { state: 'visible' })
-  await page.click('#scroll-to-1000')
+const check = () => {
+  const item = document.querySelector('[data-testid="item-1000"]')
+  const container = document.querySelector('#scroll-container')
+
+  if (!item || !container) throw new Error('Elements not found')
 
-  const delta = await page.evaluate(() => {
-    const item = document.querySelector('[data-testid="item-1000"]')
-    const container = document.querySelector('#scroll-container')
+  const itemRect = item.getBoundingClientRect()
+  const containerRect = container.getBoundingClientRect()
+  const scrollTop = container.scrollTop
 
-    if (!item || !container) throw new Error('Elements not found')
+  const top = itemRect.top + scrollTop - containerRect.top
+  const botttom = top + itemRect.height
 
-    const itemRect = item.getBoundingClientRect()
-    const containerRect = container.getBoundingClientRect()
-    const scrollTop = container.scrollTop
+  const containerBottom = scrollTop + container.clientHeight
 
-    const top = itemRect.top + scrollTop - containerRect.top
-    const botttom = top + itemRect.height
+  return Math.abs(botttom - containerBottom)
+}
 
-    const containerBottom = scrollTop + container.clientHeight
+test('scrolls to index 1000', async ({ page }) => {
+  await page.goto('/')
+  await page.click('#scroll-to-1000')
 
-    return Math.abs(botttom - containerBottom)
-  })
-  console.log('delta:', delta)
+  // Wait for scroll effect (including retries)
+  await page.waitForTimeout(1000)
 
   await expect(page.locator('[data-testid="item-1000"]')).toBeVisible()
+
+  const delta = await page.evaluate(check)
+  console.log('bootom element detla', delta)
 })