test: stabilize frequent fails (#13318)

Adjusts tests that "flake" frequently.

Author: JarrodMFlesch

packages/ui/src/views/List/GroupByHeader/index.tsx

@@ -15,7 +15,9 @@ export const GroupByHeader: React.FC<{
 }> = ({ collectionConfig, groupByFieldPath, groupByValue, heading }) => {
   return (
     <header className={baseClass}>
-      <h4 className={`${baseClass}__heading`}>{heading}</h4>
+      <h4 className={`${baseClass}__heading`} data-group-id={groupByValue}>
+        {heading}
+      </h4>
       <ListSelection
         collectionConfig={collectionConfig}
         label={heading}

test/access-control/e2e.spec.ts

@@ -6,7 +6,7 @@ import { devUser } from 'credentials.js'
 import { openDocControls } from 'helpers/e2e/openDocControls.js'
 import { openNav } from 'helpers/e2e/toggleNav.js'
 import path from 'path'
-import { email, wait } from 'payload/shared'
+import { wait } from 'payload/shared'
 import { fileURLToPath } from 'url'
 
 import type { PayloadTestSDK } from '../helpers/sdk/index.js'
@@ -16,7 +16,6 @@ import {
   closeNav,
   ensureCompilationIsDone,
   exactText,
-  getRoutes,
   initPageConsoleErrorCatch,
   login,
   saveDocAndAssert,
@@ -71,7 +70,6 @@ describe('Access Control', () => {
   let disabledFields: AdminUrlUtil
   let serverURL: string
   let context: BrowserContext
-  let logoutURL: string
   let authFields: AdminUrlUtil
 
   beforeAll(async ({ browser }, testInfo) => {
@@ -98,17 +96,6 @@ describe('Access Control', () => {
     await ensureCompilationIsDone({ page, serverURL, noAutoLogin: true })
 
     await login({ page, serverURL })
-
-    await ensureCompilationIsDone({ page, serverURL })
-
-    const {
-      admin: {
-        routes: { logout: logoutRoute },
-      },
-      routes: { admin: adminRoute },
-    } = getRoutes({})
-
-    logoutURL = `${serverURL}${adminRoute}${logoutRoute}`
   })
 
   describe('fields', () => {
@@ -515,6 +502,13 @@ describe('Access Control', () => {
 
     describe('global', () => {
       test('should restrict update access based on document field', async () => {
+        await payload.updateGlobal({
+          slug: userRestrictedGlobalSlug,
+          data: {
+            name: 'dev@payloadcms.com',
+          },
+        })
+
         await page.goto(userRestrictedGlobalURL.global(userRestrictedGlobalSlug))
         await expect(page.locator('#field-name')).toBeVisible()
         await expect(page.locator('#field-name')).toHaveValue(devUser.email)

test/eslint.config.js

@@ -75,6 +75,7 @@ export const testEslintConfig = [
             'createFolder',
             'createFolderFromDoc',
             'assertURLParams',
+            'uploadImage',
           ],
         },
       ],

test/fields/collections/JSON/e2e.spec.ts

@@ -131,13 +131,23 @@ describe('JSON', () => {
     const jsonField = page.locator('.json-field:not(.read-only) #field-customJSON')
     await expect(jsonField).toContainText('"default": "value"')
 
-    const originalHeight =
-      (await page.locator('.json-field:not(.read-only) #field-customJSON').boundingBox())?.height ||
-      0
-    await page.locator('#set-custom-json').click()
-    const newHeight =
-      (await page.locator('.json-field:not(.read-only) #field-customJSON').boundingBox())?.height ||
-      0
-    expect(newHeight).toBeGreaterThan(originalHeight)
+    const boundingBox = await page
+      .locator('.json-field:not(.read-only) #field-customJSON')
+      .boundingBox()
+    await expect(() => expect(boundingBox).not.toBeNull()).toPass()
+    const originalHeight = boundingBox!.height
+
+    // click the button to set custom JSON
+    await page.locator('#set-custom-json').click({ delay: 1000 })
+
+    const newBoundingBox = await page
+      .locator('.json-field:not(.read-only) #field-customJSON')
+      .boundingBox()
+    await expect(() => expect(newBoundingBox).not.toBeNull()).toPass()
+    const newHeight = newBoundingBox!.height
+
+    await expect(() => {
+      expect(newHeight).toBeGreaterThan(originalHeight)
+    }).toPass()
   })
 })

test/fields/collections/Relationship/e2e.spec.ts

@@ -23,7 +23,6 @@ import { AdminUrlUtil } from '../../../helpers/adminUrlUtil.js'
 import { assertToastErrors } from '../../../helpers/assertToastErrors.js'
 import { initPayloadE2ENoConfig } from '../../../helpers/initPayloadE2ENoConfig.js'
 import { reInitializeDB } from '../../../helpers/reInitializeDB.js'
-import { RESTClient } from '../../../helpers/rest.js'
 import { POLL_TOPASS_TIMEOUT, TEST_TIMEOUT_LONG } from '../../../playwright.config.js'
 import { relationshipFieldsSlug, textFieldsSlug } from '../../slugs.js'
 const filename = fileURLToPath(import.meta.url)
@@ -33,7 +32,6 @@ const dirname = path.resolve(currentFolder, '../../')
 const { beforeAll, beforeEach, describe } = test
 
 let payload: PayloadTestSDK<Config>
-let client: RESTClient
 let page: Page
 let serverURL: string
 // If we want to make this run in parallel: test.describe.configure({ mode: 'parallel' })
@@ -59,12 +57,6 @@ describe('relationship', () => {
       uploadsDir: path.resolve(dirname, './collections/Upload/uploads'),
     })
 
-    if (client) {
-      await client.logout()
-    }
-    client = new RESTClient({ defaultSlug: 'users', serverURL })
-    await client.login()
-
     await ensureCompilationIsDone({ page, serverURL })
   })
 
@@ -693,7 +685,7 @@ describe('relationship', () => {
     await createRelationshipFieldDoc({ value: textDoc.id, relationTo: 'text-fields' })
 
     await page.goto(url.list)
-    await wait(300)
+    await wait(1000) // wait for page to load
 
     await addListFilter({
       page,

test/fields/collections/Upload/e2e.spec.ts

@@ -17,7 +17,6 @@ import {
 import { AdminUrlUtil } from '../../../helpers/adminUrlUtil.js'
 import { initPayloadE2ENoConfig } from '../../../helpers/initPayloadE2ENoConfig.js'
 import { reInitializeDB } from '../../../helpers/reInitializeDB.js'
-import { RESTClient } from '../../../helpers/rest.js'
 import { POLL_TOPASS_TIMEOUT, TEST_TIMEOUT_LONG } from '../../../playwright.config.js'
 import { uploadsSlug } from '../../slugs.js'
 
@@ -28,7 +27,6 @@ const dirname = path.resolve(currentFolder, '../../')
 const { beforeAll, beforeEach, describe } = test
 
 let payload: PayloadTestSDK<Config>
-let client: RESTClient
 let page: Page
 let serverURL: string
 // If we want to make this run in parallel: test.describe.configure({ mode: 'parallel' })
@@ -57,12 +55,6 @@ describe('Upload', () => {
       uploadsDir: path.resolve(dirname, './collections/Upload/uploads'),
     })
 
-    if (client) {
-      await client.logout()
-    }
-    client = new RESTClient({ defaultSlug: 'users', serverURL })
-    await client.login()
-
     await ensureCompilationIsDone({ page, serverURL })
   })
 

test/group-by/e2e.spec.ts

@@ -57,17 +57,6 @@ test.describe('Group By', () => {
         password: devUser.password,
       },
     })
-
-    // Fetch category IDs from already-seeded data
-    const categories = await payload.find({
-      collection: 'categories',
-      limit: 1,
-      sort: 'title',
-      where: { title: { equals: 'Category 1' } },
-    })
-
-    const [category1] = categories.docs
-    category1Id = category1?.id as number | string
   })
 
   beforeEach(async () => {
@@ -649,7 +638,12 @@ test.describe('Group By', () => {
     await firstTable.locator('.row-1 .cell-_select input').check()
     await firstTable.locator('.list-selection__button[aria-label="Delete"]').click()
 
-    const modalId = `[id^="${category1Id}-confirm-delete-many-docs"]`
+    const firstGroupID = await firstTable
+      .locator('.group-by-header__heading')
+      .getAttribute('data-group-id')
+
+    const modalId = `[id^="${firstGroupID}-confirm-delete-many-docs"]`
+    await expect(page.locator(modalId)).toBeVisible()
 
     // Confirm trash (skip permanent delete)
     await page.locator(`${modalId} #confirm-action`).click()

test/helpers/e2e/openListFilters.ts

@@ -18,6 +18,7 @@ export const openListFilters = async (
 ): Promise<{
   filterContainer: Locator
 }> => {
+  await expect(page.locator(togglerSelector)).toBeVisible()
   const filterContainer = page.locator(filterContainerSelector).first()
 
   const isAlreadyOpen = await filterContainer.isVisible()

test/i18n/e2e.spec.ts

@@ -44,8 +44,8 @@ describe('i18n', () => {
 
     const context = await browser.newContext()
     page = await context.newPage()
-    initPageConsoleErrorCatch(page)
 
+    initPageConsoleErrorCatch(page)
     await ensureCompilationIsDone({ page, serverURL })
   })
   beforeEach(async () => {

test/lexical/collections/RichText/e2e.spec.ts

@@ -13,7 +13,6 @@ import {
 import { AdminUrlUtil } from '../../../helpers/adminUrlUtil.js'
 import { initPayloadE2ENoConfig } from '../../../helpers/initPayloadE2ENoConfig.js'
 import { reInitializeDB } from '../../../helpers/reInitializeDB.js'
-import { RESTClient } from '../../../helpers/rest.js'
 import { POLL_TOPASS_TIMEOUT, TEST_TIMEOUT_LONG } from '../../../playwright.config.js'
 
 const filename = fileURLToPath(import.meta.url)
@@ -22,7 +21,6 @@ const dirname = path.resolve(currentFolder, '../../')
 
 const { beforeAll, beforeEach, describe } = test
 
-let client: RESTClient
 let page: Page
 let serverURL: string
 // If we want to make this run in parallel: test.describe.configure({ mode: 'parallel' })
@@ -48,12 +46,6 @@ describe('Rich Text', () => {
       uploadsDir: [path.resolve(dirname, './collections/Upload/uploads')],
     })
 
-    if (client) {
-      await client.logout()
-    }
-    client = new RESTClient({ defaultSlug: 'users', serverURL })
-    await client.login()
-
     await ensureCompilationIsDone({ page, serverURL })
   })