f2abc80a00
The blocks e2e tests were flaky due to how we conditionally render fields as they enter the viewport. This prevented Playwright from every reaching the target element when running `locator.scrollIntoViewIfNeeded()`. This is especially flaky on pages with many fields because the page size would continually grow as it was scrolled. To fix this there are new `scrollEntirePage` and `waitForPageStability` helpers. Together, these will ensure that all fields are rendered and fully loaded before we start testing. An early attempt at this was made via `page.mouse.wheel(0, 1750)`, but this is an arbitrary pixel value that is error prone and is not future proof. These tests were also flaky by an attempt to trigger a form state action before it was ready to receive events. The fix here is to disable any buttons while the form is initializing and let Playwright wait for an interactive state.
35 lines
1.2 KiB
TypeScript
35 lines
1.2 KiB
TypeScript
import type { Page } from '@playwright/test'
|
|
|
|
import { waitForPageStability } from './waitForPageStability.js'
|
|
|
|
/**
|
|
* Scroll to bottom of the page continuously until no new content is loaded.
|
|
* This is needed because we conditionally render fields as they enter the viewport.
|
|
* This will ensure that all fields are rendered and fully loaded before we start testing.
|
|
* Without this step, Playwright's `locator.scrollIntoView()` might not work as expected.
|
|
* @param page - Playwright page object
|
|
* @returns Promise<void>
|
|
*/
|
|
export const scrollEntirePage = async (page: Page) => {
|
|
let previousHeight = await page.evaluate(() => document.body.scrollHeight)
|
|
|
|
while (true) {
|
|
await page.evaluate(() => {
|
|
window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' })
|
|
})
|
|
|
|
// Wait for the page to stabilize after scrolling
|
|
await waitForPageStability({ page })
|
|
|
|
// Get the new page height after stability check
|
|
const newHeight = await page.evaluate(() => document.body.scrollHeight)
|
|
|
|
// Stop if the height hasn't changed, meaning no new content was loaded
|
|
if (newHeight === previousHeight) {
|
|
break
|
|
}
|
|
|
|
previousHeight = newHeight
|
|
}
|
|
}
|