From 86e48ae70be066080ddb6d09afdb3bcdc4e70eb9 Mon Sep 17 00:00:00 2001 From: Jarrod Flesch <30633324+JarrodMFlesch@users.noreply.github.com> Date: Thu, 26 Jun 2025 22:40:19 -0400 Subject: [PATCH] test: bulk edit flaky selectors (#12950) https://github.com/payloadcms/payload/pull/12861 introduced some flaky test selectors. Specifically bulk editing values and then looking for the previous values in the table rows. This PR fixes the flakes and fixes eslint errors in `findTableRow` and `findTableCell` helper funcitons. --- test/bulk-edit/e2e.spec.ts | 70 ++++++++++++++++++----------------- test/helpers.ts | 14 ++++--- test/localization/e2e.spec.ts | 2 +- 3 files changed, 47 insertions(+), 39 deletions(-) diff --git a/test/bulk-edit/e2e.spec.ts b/test/bulk-edit/e2e.spec.ts index 3866c13440..73d67e4b88 100644 --- a/test/bulk-edit/e2e.spec.ts +++ b/test/bulk-edit/e2e.spec.ts @@ -128,8 +128,12 @@ test.describe('Bulk Edit', () => { 'Updated 2 Posts successfully.', ) - await expect(findTableCell(page, '_status', titleOfPostToPublish1)).toContainText('Published') - await expect(findTableCell(page, '_status', titleOfPostToPublish2)).toContainText('Published') + await expect(await findTableCell(page, '_status', titleOfPostToPublish1)).toContainText( + 'Published', + ) + await expect(await findTableCell(page, '_status', titleOfPostToPublish2)).toContainText( + 'Published', + ) }) test('should unpublish many', async () => { @@ -154,8 +158,12 @@ test.describe('Bulk Edit', () => { await page.locator('.list-selection__button[aria-label="Unpublish"]').click() await page.locator('#unpublish-posts #confirm-action').click() - await expect(findTableCell(page, '_status', titleOfPostToUnpublish1)).toContainText('Draft') - await expect(findTableCell(page, '_status', titleOfPostToUnpublish2)).toContainText('Draft') + await expect(await findTableCell(page, '_status', titleOfPostToUnpublish1)).toContainText( + 'Draft', + ) + await expect(await findTableCell(page, '_status', titleOfPostToUnpublish2)).toContainText( + 'Draft', + ) }) test('should update many', async () => { @@ -234,8 +242,12 @@ test.describe('Bulk Edit', () => { 'Updated 2 Posts successfully.', ) - await expect(findTableCell(page, '_status', titleOfPostToPublish1)).toContainText('Published') - await expect(findTableCell(page, '_status', titleOfPostToPublish2)).toContainText('Published') + await expect(await findTableCell(page, '_status', titleOfPostToPublish1)).toContainText( + 'Published', + ) + await expect(await findTableCell(page, '_status', titleOfPostToPublish2)).toContainText( + 'Published', + ) }) test('should draft many from drawer', async () => { @@ -272,8 +284,8 @@ test.describe('Bulk Edit', () => { 'Updated 2 Posts successfully.', ) - await expect(findTableCell(page, '_status', titleOfPostToDraft1)).toContainText('Draft') - await expect(findTableCell(page, '_status', titleOfPostToDraft2)).toContainText('Draft') + await expect(await findTableCell(page, '_status', titleOfPostToDraft1)).toContainText('Draft') + await expect(await findTableCell(page, '_status', titleOfPostToDraft2)).toContainText('Draft') }) test('should delete all on page', async () => { @@ -507,15 +519,12 @@ test.describe('Bulk Edit', () => { `Updated ${postCount} Posts successfully.`, ) - // eslint-disable-next-line jest-dom/prefer-checked - await expect(page.locator('input#select-all')).not.toHaveAttribute('checked', '') + await expect(page.locator('.table input#select-all[checked]')).toBeHidden() - for (let i = 0; i < postCount; i++) { - // eslint-disable-next-line jest-dom/prefer-checked - await expect(findTableCell(page, '_select', `Post ${i + 1}`)).not.toHaveAttribute( - 'checked', - '', - ) + for (let i = 1; i < postCount + 1; i++) { + await expect( + page.locator(`table tbody tr .row-${i} input[type="checkbox"][checked]`), + ).toBeHidden() } }) @@ -537,20 +546,18 @@ test.describe('Bulk Edit', () => { `Updated ${postCount} Posts successfully.`, ) - // eslint-disable-next-line jest-dom/prefer-checked - await expect(page.locator('input#select-all')).not.toHaveAttribute('checked', '') + await expect(page.locator('.table input#select-all[checked]')).toBeHidden() - for (let i = 0; i < postCount; i++) { - // eslint-disable-next-line jest-dom/prefer-checked - await expect(findTableCell(page, '_select', `Post ${i + 1}`)).not.toHaveAttribute( - 'checked', - '', - ) + for (let i = 1; i < postCount + 1; i++) { + await expect( + page.locator(`table tbody tr .row-${i} input[type="checkbox"][checked]`), + ).toBeHidden() } }) test('should toggle list selections off on successful edit', async () => { await deleteAllPosts() + const bulkEditValue = 'test' const postCount = 3 Array.from({ length: postCount }).forEach(async (_, i) => { @@ -575,7 +582,7 @@ test.describe('Bulk Edit', () => { const titleOption = fieldSelect.locator('.rs__option:has-text("Title")').first() await titleOption.click() - await editDrawer.locator('input#field-title').fill('test') + await editDrawer.locator('input#field-title').fill(bulkEditValue) await editDrawer.locator('button[type="submit"]:has-text("Publish changes")').click() @@ -583,15 +590,12 @@ test.describe('Bulk Edit', () => { `Updated ${postCount} Posts successfully.`, ) - // eslint-disable-next-line jest-dom/prefer-checked - await expect(page.locator('input#select-all')).not.toHaveAttribute('checked', '') + await expect(page.locator('.table input#select-all[checked]')).toBeHidden() - for (let i = 0; i < postCount; i++) { - // eslint-disable-next-line jest-dom/prefer-checked - await expect(findTableCell(page, '_select', `Post ${i + 1}`)).not.toHaveAttribute( - 'checked', - '', - ) + for (let i = 1; i < postCount + 1; i++) { + await expect( + page.locator(`table tbody tr .row-${i} input[type="checkbox"][checked]`), + ).toBeHidden() } }) }) diff --git a/test/helpers.ts b/test/helpers.ts index 48f672893a..d1e490c7a4 100644 --- a/test/helpers.ts +++ b/test/helpers.ts @@ -361,16 +361,20 @@ export const selectTableRow = async (page: Page, title: string): Promise = await expect(page.locator(selector)).toBeChecked() } -export const findTableCell = (page: Page, fieldName: string, rowTitle?: string): Locator => { - const parentEl = rowTitle ? findTableRow(page, rowTitle) : page.locator('tbody tr') +export const findTableCell = async ( + page: Page, + fieldName: string, + rowTitle?: string, +): Promise => { + const parentEl = rowTitle ? await findTableRow(page, rowTitle) : page.locator('tbody tr') const cell = parentEl.locator(`td.cell-${fieldName}`) - expect(cell).toBeTruthy() + await expect(cell).toBeVisible() return cell } -export const findTableRow = (page: Page, title: string): Locator => { +export const findTableRow = async (page: Page, title: string): Promise => { const row = page.locator(`tbody tr:has-text("${title}")`) - expect(row).toBeTruthy() + await expect(row).toBeVisible() return row } diff --git a/test/localization/e2e.spec.ts b/test/localization/e2e.spec.ts index 2994269be5..fc34f0002a 100644 --- a/test/localization/e2e.spec.ts +++ b/test/localization/e2e.spec.ts @@ -122,7 +122,7 @@ describe('Localization', () => { await page.locator('#action-save').click() await page.locator('text=Versions').click() - const firstVersion = findTableRow(page, 'Currently Published') + const firstVersion = await findTableRow(page, 'Currently Published') await firstVersion.locator('a').click() await expect(page.locator('.view-version__toggle-locales')).toBeVisible()