test: fixes pagination and sorting list-view tests due to hydration timing issues (#15925)

# Overview

Fixes flaky list view pagination / sorting e2e test failures in slow CI
environments caused by Next.js 16 hydration timing issues.

<img width="1123" height="536" alt="Screenshot 2026-03-12 at 9 25 25 AM"
src="https://github.com/user-attachments/assets/357d968c-5838-4308-adda-cc9b37002a07"
/>

## Key Changes

- Added `wait(500)` calls at strategic interaction points:
  - After page loads/reloads before user interactions
  - After clicks that trigger UI state changes
  - After navigation actions
  - After column/drawer toggles

- Applied to pagination, per-page limits, list drawer, and column
sorting tests
- Added CPU throttling (4x slower) to these tests to simulate slow CI
and catch regressions

## Design Decisions

In slow CI environments, React hydration takes longer to complete.
Playwright sees elements as visible and actionable before React event
handlers are fully attached, leading to:
- Clicks happening before handlers are ready
- Drawers/modals appearing briefly then disappearing (hydration
mismatch)
- Tests timing out before pages become truly interactive

The 500ms waits give Next.js 16 enough time to complete hydration before
interactions. CPU throttling was added to replicate slow CI conditions
locally and prevent future regressions.

Author: PatrikKozak

test/access-control/e2e.spec.ts

@@ -324,8 +324,8 @@ describe('Access Control', () => {
       const regression1URL = new AdminUrlUtil(serverURL, 'regression1')
       await page.goto(regression1URL.list)
 
-      await page.locator('.cell-id a').first().click()
-      await page.waitForURL(`**/collections/regression1/**`)
+      const href = await page.locator('.cell-id a').first().getAttribute('href')
+      await page.goto(`${serverURL}${href}`)
 
       await ensureRegression1FieldsHaveCorrectAccess()
 
@@ -368,8 +368,9 @@ describe('Access Control', () => {
       const regression2URL = new AdminUrlUtil(serverURL, 'regression2')
       await page.goto(regression2URL.list)
 
-      await page.locator('.cell-id a').first().click()
-      await page.waitForURL(`**/collections/regression2/**`)
+      const href = await page.locator('.cell-id a').first().getAttribute('href')
+      await page.goto(`${serverURL}${href}`)
+      await wait(500)
 
       await ensureRegression2FieldsHaveCorrectAccess()
 
@@ -717,8 +718,8 @@ describe('Access Control', () => {
       await wait(1000)
 
       // Ensure admin user cannot unlock other users
-      await adminUserRow.locator('.cell-id a').click()
-      await page.waitForURL(`**/collections/users/**`)
+      const adminUserHref = await adminUserRow.locator('.cell-id a').getAttribute('href')
+      await page.goto(`${serverURL}${adminUserHref}`)
 
       const unlockButton = page.locator('#force-unlock')
       await expect(unlockButton).toBeVisible()
@@ -731,8 +732,8 @@ describe('Access Control', () => {
       await wait(1000)
 
       // Ensure non-admin user cannot see unlock button
-      await nonAdminUserRow.locator('.cell-id a').click()
-      await page.waitForURL(`**/collections/users/**`)
+      const nonAdminUserHref = await nonAdminUserRow.locator('.cell-id a').getAttribute('href')
+      await page.goto(`${serverURL}${nonAdminUserHref}`)
       await expect(page.locator('#force-unlock')).toBeHidden()
     })
   })

test/access-control/payload-types.ts

@@ -166,6 +166,9 @@ export interface Config {
     'read-not-update-global': ReadNotUpdateGlobalSelect<false> | ReadNotUpdateGlobalSelect<true>;
   };
   locale: null;
+  widgets: {
+    collections: CollectionsWidget;
+  };
   user: User | PublicUser | AuthCollection;
   jobs: {
     tasks: unknown;
@@ -1916,6 +1919,16 @@ export interface ReadNotUpdateGlobalSelect<T extends boolean = true> {
   createdAt?: T;
   globalType?: T;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "collections_widget".
+ */
+export interface CollectionsWidget {
+  data?: {
+    [k: string]: unknown;
+  };
+  width: 'full';
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "auth".

test/admin/e2e/list-view/e2e.spec.ts

@@ -1519,7 +1519,9 @@ describe('List View', () => {
       })
 
       await page.goto(postsUrl.list)
-      await expect(page.locator('.per-page .per-page__base-button')).toContainText('Per Page: 5')
+      await expect
+        .poll(async () => await page.locator('.per-page .per-page__base-button').textContent())
+        .toContain('Per Page: 5')
       await expect(page.locator(tableRowLocator)).toHaveCount(5)
     })
 
@@ -1531,9 +1533,17 @@ describe('List View', () => {
       })
 
       await page.goto(postsUrl.list)
+
+      await wait(1000)
+
+      await expect
+        .poll(async () => await page.locator('.per-page .popup-button').isVisible())
+        .toBe(true)
+
       await page.locator('.per-page .popup-button').click()
+      await wait(500)
       const options = page.locator('.popup__content button.per-page__button')
-      await expect(options).toHaveCount(3)
+      await expect.poll(async () => await options.count()).toBe(3)
       await expect(options.nth(0)).toContainText('5')
       await expect(options.nth(1)).toContainText('10')
       await expect(options.nth(2)).toContainText('15')
@@ -1547,15 +1557,22 @@ describe('List View', () => {
       })
 
       await page.reload()
-      await expect(page.locator(tableRowLocator)).toHaveCount(5)
+
+      await wait(1000)
+
+      await expect.poll(async () => await page.locator(tableRowLocator).count()).toBe(5)
       await expect(page.locator('.page-controls__page-info')).toHaveText('1-5 of 6')
       await expect(page.locator('.per-page')).toContainText('Per Page: 5')
 
+      await wait(500)
+
       await goToNextPage(page)
-      await expect(page.locator(tableRowLocator)).toHaveCount(1)
+      await wait(500)
+      await expect.poll(async () => await page.locator(tableRowLocator).count()).toBe(1)
 
       await goToPreviousPage(page)
-      await expect(page.locator(tableRowLocator)).toHaveCount(5)
+      await wait(500)
+      await expect.poll(async () => await page.locator(tableRowLocator).count()).toBe(5)
     })
 
     test('should paginate without resetting selected limit', async () => {
@@ -1566,22 +1583,32 @@ describe('List View', () => {
       })
 
       await page.reload()
+
+      await wait(1000)
+
       const tableItems = page.locator(tableRowLocator)
-      await expect(tableItems).toHaveCount(5)
+      await expect.poll(async () => await tableItems.count()).toBe(5)
       await expect(page.locator('.page-controls__page-info')).toHaveText('1-5 of 16')
       await expect(page.locator('.per-page')).toContainText('Per Page: 5')
+
+      await wait(500)
+
       await page.locator('.per-page .popup-button').click()
 
+      await wait(500)
+
       await page
         .locator('.popup__content button.per-page__button', {
           hasText: '15',
         })
         .click()
+      await wait(500)
 
       await expect(tableItems).toHaveCount(15)
       await expect(page.locator('.per-page .per-page__base-button')).toContainText('Per Page: 15')
 
       await goToNextPage(page)
+      await wait(500)
       await expect(tableItems).toHaveCount(1)
       await expect(page.locator('.per-page')).toContainText('Per Page: 15') // ensure this hasn't changed
       await expect(page.locator('.page-controls__page-info')).toHaveText('16-16 of 16')
@@ -1594,6 +1621,8 @@ describe('List View', () => {
 
       await page.goto(noTimestampsUrl.list)
 
+      await wait(1000)
+
       await page.locator('.per-page .popup-button').click()
       await page.getByRole('button', { name: '5', exact: true }).click()
       await page.waitForURL(/limit=5/)
@@ -1627,11 +1656,16 @@ describe('List View', () => {
 
       await page.goto(withListViewUrl.list)
 
+      await wait(1000)
+
       // Open the list drawer via the "Select posts" button
       const selectButton = page.locator('button:has-text("Select posts")')
       await selectButton.waitFor({ state: 'visible' })
+
       await selectButton.click()
 
+      await wait(1000)
+
       const listDrawer = page.locator('.list-drawer.drawer--is-open')
       await listDrawer.waitFor({ state: 'visible' })
       await expect(listDrawer).toBeVisible()
@@ -1792,12 +1826,19 @@ describe('List View', () => {
       })
 
       await page.goto(postsUrl.list)
+
+      await wait(1000)
+
       await expect(page.locator(tableRowLocator).first()).toBeVisible()
 
       // sort by title
       const sortButton = page.locator('#heading-title button.sort-column__asc')
       await sortButton.waitFor({ state: 'visible' })
+
       await sortButton.click()
+
+      await wait(1000)
+
       await page
         .locator('#heading-title button.sort-column__asc.sort-column--active')
         .waitFor({ state: 'visible' })
@@ -1806,6 +1847,8 @@ describe('List View', () => {
       // enable a column that is _not_ part of this collection's default columns
       await toggleColumn(page, { columnLabel: 'Status', targetState: 'on', columnName: '_status' })
 
+      await wait(500)
+
       await page.locator('#heading-_status').waitFor({ state: 'visible' })
 
       const columnAfterSort = page.locator(
@@ -1824,12 +1867,14 @@ describe('List View', () => {
         targetState: 'on',
         columnName: 'wavelengths',
       })
+      await wait(500)
 
       await toggleColumn(page, {
         columnLabel: 'Select Field',
         targetState: 'on',
         columnName: 'selectField',
       })
+      await wait(500)
 
       // check that the cells have the classes added per value selected
       await expect(
@@ -1849,7 +1894,7 @@ describe('List View', () => {
       await page.waitForURL(/sort=-title/)
 
       // allow time for components to re-render
-      await wait(100)
+      await wait(500)
 
       // ensure the column is still visible
       const columnAfterSecondSort = page.locator(

test/admin/payload-types.ts

@@ -174,6 +174,9 @@ export interface Config {
     settings: SettingsSelect<false> | SettingsSelect<true>;
   };
   locale: 'es' | 'en';
+  widgets: {
+    collections: CollectionsWidget;
+  };
   user: User;
   jobs: {
     tasks: unknown;
@@ -1548,6 +1551,16 @@ export interface SettingsSelect<T extends boolean = true> {
   createdAt?: T;
   globalType?: T;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "collections_widget".
+ */
+export interface CollectionsWidget {
+  data?: {
+    [k: string]: unknown;
+  };
+  width: 'full';
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "auth".