test: add array field helpers (#13493)

Adds various helpers to make it easier and more standard to manage array
fields within e2e tests. Retrofits existing tests to ensure consistent
interactions across the board, and also organizes existing blocks and
relationship field helpers in the same way.

---
- To see the specific tasks where the Asana app for GitHub is being
used, see below:
  - https://app.asana.com/0/0/1211094073049046

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

@@ -4,6 +4,7 @@ import type { Page } from '@playwright/test'
 import { expect, test } from '@playwright/test'
 import { assertToastErrors } from 'helpers/assertToastErrors.js'
 import { copyPasteField } from 'helpers/e2e/copyPasteField.js'
+import { addArrayRow, duplicateArrayRow, removeArrayRow } from 'helpers/e2e/fields/array/index.js'
 import { toggleBlockOrArrayRow } from 'helpers/e2e/toggleCollapsible.js'
 import path from 'path'
 import { wait } from 'payload/shared'
@@ -89,7 +90,7 @@ describe('Array', () => {
   test('should render RowLabel using a component', async () => {
     const label = 'custom row label as component'
     await loadCreatePage()
-    await page.locator('#field-rowLabelAsComponent >> .array-field__add-row').click()
+    await addArrayRow(page, { fieldName: 'rowLabelAsComponent' })
     await expect(page.locator('#field-rowLabelAsComponent__0__title')).toBeVisible()
     await expect(page.locator('.shimmer-effect')).toHaveCount(0)
 
@@ -119,7 +120,7 @@ describe('Array', () => {
     const label = 'test custom row label'
     const updatedLabel = 'updated custom row label'
     await loadCreatePage()
-    await page.locator('#field-rowLabelAsComponent >> .array-field__add-row').click()
+    await addArrayRow(page, { fieldName: 'rowLabelAsComponent' })
 
     await page.locator('#field-rowLabelAsComponent__0__title').fill(label)
 
@@ -130,14 +131,7 @@ describe('Array', () => {
     await expect(customRowLabel).toBeVisible()
     await expect(customRowLabel).toHaveCSS('text-transform', 'uppercase')
 
-    const rowActionsButton = page.locator('#rowLabelAsComponent-row-0 .array-actions__button')
-    await rowActionsButton.click()
-
-    const duplicateButton = page.locator(
-      '#rowLabelAsComponent-row-0 .popup__scroll-container .array-actions__duplicate',
-    )
-    await expect(duplicateButton).toBeVisible()
-    await duplicateButton.click()
+    await duplicateArrayRow(page, { fieldName: 'rowLabelAsComponent' })
 
     await expect(page.locator('#rowLabelAsComponent-row-1')).toBeVisible()
     await expect(
@@ -157,8 +151,7 @@ describe('Array', () => {
 
   test('should render default array field within custom component', async () => {
     await loadCreatePage()
-
-    await page.locator('#field-customArrayField >> .array-field__add-row').click()
+    await addArrayRow(page, { fieldName: 'customArrayField' })
     await expect(page.locator('#field-customArrayField__0__text')).toBeVisible()
   })
 
@@ -169,7 +162,7 @@ describe('Array', () => {
 
   test('should fail min rows validation when rows are present', async () => {
     await loadCreatePage()
-    await page.locator('#field-arrayWithMinRows >> .array-field__add-row').click()
+    await addArrayRow(page, { fieldName: 'arrayWithMinRows' })
 
     // Ensure new array row is visible and fields are rendered
     await expect(page.locator('#arrayWithMinRows-row-0')).toBeVisible()
@@ -210,36 +203,29 @@ describe('Array', () => {
       await wait(300)
 
       // Add 3 rows
-      await page.locator('#field-potentiallyEmptyArray > .array-field__add-row').click()
-      await wait(300)
-      await page.locator('#field-potentiallyEmptyArray > .array-field__add-row').click()
-      await wait(300)
-      await page.locator('#field-potentiallyEmptyArray > .array-field__add-row').click()
-      await wait(300)
+      await addArrayRow(page, { fieldName: 'potentiallyEmptyArray' })
+      await addArrayRow(page, { fieldName: 'potentiallyEmptyArray' })
+      await addArrayRow(page, { fieldName: 'potentiallyEmptyArray' })
 
       // Fill out row 1
       await page.locator('#field-potentiallyEmptyArray__0__text').fill(assertText0)
+
       await page
         .locator('#field-potentiallyEmptyArray__0__groupInRow__textInGroupInRow')
         .fill(assertGroupText0)
+
       // Fill out row 2
       await page.locator('#field-potentiallyEmptyArray__1__text').fill(assertText1)
+
       // Fill out row 3
       await page.locator('#field-potentiallyEmptyArray__2__text').fill(assertText3)
+
       await page
         .locator('#field-potentiallyEmptyArray__2__groupInRow__textInGroupInRow')
         .fill(assertGroupText3)
 
-      // Remove row 1
-      await page.locator('#potentiallyEmptyArray-row-0 .array-actions__button').click()
-      await page
-        .locator('#potentiallyEmptyArray-row-0 .popup__scroll-container .array-actions__remove')
-        .click()
-      // Remove row 2
-      await page.locator('#potentiallyEmptyArray-row-0 .array-actions__button').click()
-      await page
-        .locator('#potentiallyEmptyArray-row-0 .popup__scroll-container .array-actions__remove')
-        .click()
+      await removeArrayRow(page, { fieldName: 'potentiallyEmptyArray', rowIndex: 1 })
+      await removeArrayRow(page, { fieldName: 'potentiallyEmptyArray', rowIndex: 0 })
 
       // Save document
       await saveDocAndAssert(page)
@@ -251,11 +237,7 @@ describe('Array', () => {
       const input = page.locator('#field-potentiallyEmptyArray__0__groupInRow__textInGroupInRow')
       await expect(input).toHaveValue(assertGroupText3)
 
-      // Duplicate row
-      await page.locator('#potentiallyEmptyArray-row-0 .array-actions__button').click()
-      await page
-        .locator('#potentiallyEmptyArray-row-0 .popup__scroll-container .array-actions__duplicate')
-        .click()
+      await duplicateArrayRow(page, { fieldName: 'potentiallyEmptyArray' })
 
       // Update duplicated row group field text
       await page
@@ -270,11 +252,7 @@ describe('Array', () => {
         page.locator('#field-potentiallyEmptyArray__1__groupInRow__textInGroupInRow'),
       ).toHaveValue(`${assertGroupText3} duplicate`)
 
-      // Remove row 1
-      await page.locator('#potentiallyEmptyArray-row-0 .array-actions__button').click()
-      await page
-        .locator('#potentiallyEmptyArray-row-0 .popup__scroll-container .array-actions__remove')
-        .click()
+      await removeArrayRow(page, { fieldName: 'potentiallyEmptyArray', rowIndex: 0 })
 
       // Save document
       await saveDocAndAssert(page)
@@ -361,11 +339,8 @@ describe('Array', () => {
     await arrayOption.click()
     await wait(200)
 
-    const addRowButton = page.locator('#field-items > .array-field__add-row')
+    await addArrayRow(page, { fieldName: 'items' })
 
-    await expect(addRowButton).toBeVisible()
-
-    await addRowButton.click()
     await wait(200)
 
     const targetInput = page.locator('#field-items__0__text')
@@ -389,7 +364,7 @@ describe('Array', () => {
   test('should initialize array rows with collapsed state', async () => {
     await page.goto(url.create)
 
-    await page.locator('#field-collapsedArray >> .array-field__add-row').click()
+    await addArrayRow(page, { fieldName: 'collapsedArray' })
 
     const row = page.locator(`#collapsedArray-row-0`)
     const toggler = row.locator('button.collapsible__toggle')
@@ -401,7 +376,7 @@ describe('Array', () => {
   test('should not collapse array rows on input change', async () => {
     await page.goto(url.create)
 
-    await page.locator('#field-collapsedArray >> .array-field__add-row').click()
+    await addArrayRow(page, { fieldName: 'collapsedArray' })
 
     const row = page.locator(`#collapsedArray-row-0`)
     const toggler = row.locator('button.collapsible__toggle')
@@ -599,10 +574,8 @@ describe('Array', () => {
       await page.goto(url.create)
 
       const field = page.locator('#field-items')
-      const addSubArrayBtn = field.locator(
-        '#field-items__0__subArray > button.array-field__add-row',
-      )
-      await addSubArrayBtn.click()
+
+      await addArrayRow(page, { fieldName: 'items__0__subArray' })
 
       const textInputRowOne = field.locator('#field-items__0__subArray__0__text')
       await expect(textInputRowOne).toBeVisible()
@@ -633,18 +606,10 @@ describe('Array', () => {
 
       const field = page.locator('#field-items')
 
-      const addSubArrayBtn = field.locator(
-        '#field-items__0__subArray > button.array-field__add-row',
-      )
-      await expect(addSubArrayBtn).toBeVisible()
-      await addSubArrayBtn.click()
-      await addSubArrayBtn.click()
+      await addArrayRow(page, { fieldName: 'items__0__subArray' })
+      await addArrayRow(page, { fieldName: 'items__0__subArray' })
 
-      const addSubArrayBtn2 = field.locator(
-        '#field-items__1__subArray > button.array-field__add-row',
-      )
-      await expect(addSubArrayBtn2).toBeVisible()
-      await addSubArrayBtn2.click()
+      await addArrayRow(page, { fieldName: 'items__1__subArray' })
 
       const subArrayContainer = field.locator(
         '#field-items__0__subArray > div.array-field__draggable-rows > div',

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

@@ -1,10 +1,9 @@
 import type { BrowserContext, Page } from '@playwright/test'
 
 import { expect, test } from '@playwright/test'
-import { addBlock } from 'helpers/e2e/addBlock.js'
 import { copyPasteField } from 'helpers/e2e/copyPasteField.js'
-import { openBlocksDrawer } from 'helpers/e2e/openBlocksDrawer.js'
-import { reorderBlocks } from 'helpers/e2e/reorderBlocks.js'
+import { addArrayRowBelow, duplicateArrayRow } from 'helpers/e2e/fields/array/index.js'
+import { addBlock, openBlocksDrawer, reorderBlocks } from 'helpers/e2e/fields/blocks/index.js'
 import { scrollEntirePage } from 'helpers/e2e/scrollEntirePage.js'
 import { toggleBlockOrArrayRow } from 'helpers/e2e/toggleCollapsible.js'
 import path from 'path'
@@ -127,14 +126,8 @@ describe('Block fields', () => {
 
   test('should open blocks drawer from block row and add below', async () => {
     await page.goto(url.create)
-    const firstRow = page.locator('#field-blocks #blocks-row-0')
-    const rowActions = firstRow.locator('.collapsible__actions')
-    await expect(rowActions).toBeVisible()
 
-    await rowActions.locator('.array-actions__button').click()
-    const addBelowButton = rowActions.locator('.array-actions__action.array-actions__add')
-    await expect(addBelowButton).toBeVisible()
-    await addBelowButton.click()
+    await addArrayRowBelow(page, { fieldName: 'blocks' })
 
     const blocksDrawer = page.locator('[id^=drawer_1_blocks-drawer-]')
     await expect(blocksDrawer).toBeVisible()
@@ -157,14 +150,8 @@ describe('Block fields', () => {
 
   test('should duplicate block', async () => {
     await page.goto(url.create)
-    const firstRow = page.locator('#field-blocks #blocks-row-0')
-    const rowActions = firstRow.locator('.collapsible__actions')
-    await expect(rowActions).toBeVisible()
 
-    await rowActions.locator('.array-actions__button').click()
-    const duplicateButton = rowActions.locator('.array-actions__action.array-actions__duplicate')
-    await expect(duplicateButton).toBeVisible()
-    await duplicateButton.click()
+    await duplicateArrayRow(page, { fieldName: 'blocks' })
 
     const blocks = page.locator('#field-blocks > .blocks-field__rows > div')
     expect(await blocks.count()).toEqual(5)
@@ -172,14 +159,8 @@ describe('Block fields', () => {
 
   test('should save when duplicating subblocks', async () => {
     await page.goto(url.create)
-    const subblocksRow = page.locator('#field-blocks #blocks-row-2')
-    const rowActions = subblocksRow.locator('.collapsible__actions').first()
-    await expect(rowActions).toBeVisible()
 
-    await rowActions.locator('.array-actions__button').click()
-    const duplicateButton = rowActions.locator('.array-actions__action.array-actions__duplicate')
-    await expect(duplicateButton).toBeVisible()
-    await duplicateButton.click()
+    await duplicateArrayRow(page, { fieldName: 'blocks', rowIndex: 2 })
 
     const blocks = page.locator('#field-blocks > .blocks-field__rows > div')
     expect(await blocks.count()).toEqual(5)

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

@@ -1,6 +1,7 @@
 import type { Page } from '@playwright/test'
 
 import { expect, test } from '@playwright/test'
+import { addArrayRow } from 'helpers/e2e/fields/array/index.js'
 import path from 'path'
 import { wait } from 'payload/shared'
 import { fileURLToPath } from 'url'
@@ -87,7 +88,7 @@ describe('Collapsibles', () => {
     const arrayWithCollapsibles = page.locator('#field-arrayWithCollapsibles')
     await expect(arrayWithCollapsibles).toBeVisible()
 
-    await page.locator('#field-arrayWithCollapsibles >> .array-field__add-row').click()
+    await addArrayRow(page, { fieldName: 'arrayWithCollapsibles' })
 
     await page
       .locator(

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

@@ -1,6 +1,7 @@
 import type { BrowserContext, Page } from '@playwright/test'
 
 import { expect, test } from '@playwright/test'
+import { addArrayRow } from 'helpers/e2e/fields/array/index.js'
 import path from 'path'
 import { fileURLToPath } from 'url'
 
@@ -175,7 +176,7 @@ describe('Conditional Logic', () => {
 
   test('should not render fields when adding array or blocks rows until form state returns', async () => {
     await page.goto(url.create)
-    await page.locator('#field-arrayWithConditionalField .array-field__add-row').click()
+    await addArrayRow(page, { fieldName: 'arrayWithConditionalField' })
     const shimmer = '#field-arrayWithConditionalField .collapsible__content > .shimmer-effect'
 
     await expect(page.locator(shimmer)).toBeVisible()
@@ -204,14 +205,11 @@ describe('Conditional Logic', () => {
   test('should render field based on path argument', async () => {
     await page.goto(url.create)
 
-    const arrayOneButton = page.locator('#field-arrayOne .array-field__add-row')
-    await arrayOneButton.click()
+    await addArrayRow(page, { fieldName: 'arrayOne' })
 
-    const arrayTwoButton = page.locator('#arrayOne-row-0 .array-field__add-row')
-    await arrayTwoButton.click()
+    await addArrayRow(page, { fieldName: 'arrayOne__0__arrayTwo' })
 
-    const arrayThreeButton = page.locator('#arrayOne-0-arrayTwo-row-0 .array-field__add-row')
-    await arrayThreeButton.click()
+    await addArrayRow(page, { fieldName: 'arrayOne__0__arrayTwo__0__arrayThree' })
 
     const numberField = page.locator('#field-arrayOne__0__arrayTwo__0__arrayThree__0__numberField')
 

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

@@ -2,9 +2,10 @@ import type { Page } from '@playwright/test'
 
 import { expect, test } from '@playwright/test'
 import { addListFilter } from 'helpers/e2e/addListFilter.js'
+import { openCreateDocDrawer } from 'helpers/e2e/fields/relationship/openCreateDocDrawer.js'
 import { navigateToDoc } from 'helpers/e2e/navigateToDoc.js'
 import { openDocControls } from 'helpers/e2e/openDocControls.js'
-import { openCreateDocDrawer, openDocDrawer } from 'helpers/e2e/toggleDocDrawer.js'
+import { openDocDrawer } from 'helpers/e2e/toggleDocDrawer.js'
 import path from 'path'
 import { wait } from 'payload/shared'
 import { fileURLToPath } from 'url'

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

@@ -1,6 +1,7 @@
 import type { Page } from '@playwright/test'
 
 import { expect, test } from '@playwright/test'
+import { addArrayRow } from 'helpers/e2e/fields/array/index.js'
 import path from 'path'
 import { fileURLToPath } from 'url'
 
@@ -67,7 +68,7 @@ describe('Tabs', () => {
   test('should correctly save nested unnamed and named tabs', async () => {
     await page.goto(url.create)
 
-    await page.locator('#field-tabsInArray .array-field__add-row').click()
+    await addArrayRow(page, { fieldName: 'tabsInArray' })
     await page.locator('#field-tabsInArray__0__text').fill('tab 1 text')
     await page.locator('.tabs-field__tabs button:nth-child(2)').click()
     await page.locator('#field-tabsInArray__0__tab2__text2').fill('tab 2 text')