fix: locale switcher flakey test (#5761)

test/admin/e2e.spec.ts

@@ -430,7 +430,7 @@ describe('admin', () => {
       const { id } = await createPost()
       await page.goto(postsUrl.edit(id))
       await page.locator('#field-title')?.fill('')
-      expect(await page.locator('.doc-header__title.render-title')?.innerText()).toContain('ID:')
+      await expect(page.locator('.doc-header__title.render-title:has-text("ID:")')).toBeVisible()
       await saveDocAndAssert(page)
     })
 

test/fields/e2e.spec.ts

@@ -11,7 +11,9 @@ import type { Config } from './payload-types.js'
 import {
   ensureAutoLoginAndCompilationIsDone,
   initPageConsoleErrorCatch,
+  navigateToListCellLink,
   saveDocAndAssert,
+  switchTab,
 } from '../helpers.js'
 import { AdminUrlUtil } from '../helpers/adminUrlUtil.js'
 import { initPayloadE2ENoConfig } from '../helpers/initPayloadE2ENoConfig.js'
@@ -34,11 +36,7 @@ let serverURL: string
 // If we want to make this run in parallel: test.describe.configure({ mode: 'parallel' })
 
 describe('fields', () => {
-  beforeAll(async ({ browser }, testInfo) => {
+  beforeAll(async ({ browser }) => {
-    // const prebuild = Boolean(process.env.CI)
-
-    // if (prebuild) testInfo.setTimeout(testInfo.timeout * 3)
-
     process.env.SEED_IN_CONFIG_ONINIT = 'false' // Makes it so the payload config onInit seed is not run. Otherwise, the seed would be run unnecessarily twice for the initial test run - once for beforeEach and once for onInit
     ;({ payload, serverURL } = await initPayloadE2ENoConfig({
       dirname,
@@ -542,20 +540,17 @@ describe('fields', () => {
       const jsonValue = '{ "foo": "bar"}'
 
       await page.goto(url.create)
+      await page.waitForURL(url.create)
 
-      await wait(1000)
+      await switchTab(page, '.tabs-field__tab-button:has-text("Tab with Row")')
-
-      await page.locator('.tabs-field__tab-button:has-text("Tab with Row")').click()
       await page.locator('#field-textInRow').fill(textInRowValue)
       await page.locator('#field-numberInRow').fill(numberInRowValue)
       await page.locator('.json-field .inputarea').fill(jsonValue)
 
       await wait(300)
 
-      await page.locator('.tabs-field__tab-button:has-text("Tab with Array")').click()
+      await switchTab(page, '.tabs-field__tab-button:has-text("Tab with Array")')
-      await page.locator('.tabs-field__tab-button:has-text("Tab with Row")').click()
+      await switchTab(page, '.tabs-field__tab-button:has-text("Tab with Row")')
-
-      await wait(100)
 
       await expect(page.locator('#field-textInRow')).toHaveValue(textInRowValue)
       await expect(page.locator('#field-numberInRow')).toHaveValue(numberInRowValue)
@@ -566,46 +561,43 @@ describe('fields', () => {
       const textInRowValue = 'new value'
       const jsonValue = '{ "new": "value"}'
       await page.goto(url.list)
-      await page.locator('.cell-id a').click()
+      await navigateToListCellLink(page)
-
-      await wait(500)
 
       // Go to Row tab, update the value
-      await page.locator('.tabs-field__tab-button:has-text("Tab with Row")').click()
+      await switchTab(page, '.tabs-field__tab-button:has-text("Tab with Row")')
+
       await page.locator('#field-textInRow').fill(textInRowValue)
       await page.locator('.json-field .inputarea').fill(jsonValue)
 
       await wait(500)
 
       // Go to Array tab, then back to Row. Make sure new value is still there
-      await page.locator('.tabs-field__tab-button:has-text("Tab with Array")').click()
+      await switchTab(page, '.tabs-field__tab-button:has-text("Tab with Array")')
-      await page.locator('.tabs-field__tab-button:has-text("Tab with Row")').click()
+      await switchTab(page, '.tabs-field__tab-button:has-text("Tab with Row")')
 
       await expect(page.locator('#field-textInRow')).toHaveValue(textInRowValue)
       await expect(page.locator('.json-field .lines-content')).toContainText(jsonValue)
 
       // Go to array tab, save the doc
-      await page.locator('.tabs-field__tab-button:has-text("Tab with Array")').click()
+      await switchTab(page, '.tabs-field__tab-button:has-text("Tab with Array")')
-      await page.click('#action-save', { delay: 100 })
+      await saveDocAndAssert(page)
-
-      await wait(500)
 
       // Go back to row tab, make sure the new value is still present
-      await page.locator('.tabs-field__tab-button:has-text("Tab with Row")').click()
+      await switchTab(page, '.tabs-field__tab-button:has-text("Tab with Row")')
       await expect(page.locator('#field-textInRow')).toHaveValue(textInRowValue)
     })
 
     test('should render array data within unnamed tabs', async () => {
       await page.goto(url.list)
-      await page.locator('.cell-id a').click()
+      await navigateToListCellLink(page)
-      await page.locator('.tabs-field__tab-button:has-text("Tab with Array")').click()
+      await switchTab(page, '.tabs-field__tab-button:has-text("Tab with Array")')
       await expect(page.locator('#field-array__0__text')).toHaveValue("Hello, I'm the first row")
     })
 
     test('should render array data within named tabs', async () => {
       await page.goto(url.list)
-      await page.locator('.cell-id a').click()
+      await navigateToListCellLink(page)
-      await page.locator('.tabs-field__tab-button:nth-child(5)').click()
+      await switchTab(page, '.tabs-field__tab-button:nth-child(5)')
       await expect(page.locator('#field-tab__array__0__text')).toHaveValue(
         "Hello, I'm the first row, in a named tab",
       )

test/helpers.ts

@@ -141,11 +141,10 @@ export async function openDocControls(page: Page): Promise<void> {
   await expect(page.locator('.doc-controls__popup >> .popup__content')).toBeVisible()
 }
 
-export async function changeLocale(page: Page, newLocale: string, skipURLCheck: boolean = false) {
+export async function changeLocale(page: Page, newLocale: string) {
   await page.locator('.localizer >> button').first().click()
   await page
-    .locator(`.localizer`)
+    .locator(`.localizer .popup.popup--active .popup-button-list button`, {
-    .locator(`.popup >> button`, {
       hasText: newLocale,
     })
     .first()
@@ -153,11 +152,7 @@ export async function changeLocale(page: Page, newLocale: string, skipURLCheck:
 
   const regexPattern = new RegExp(`locale=${newLocale}`)
 
-  if (skipURLCheck) {
+  await expect(page).toHaveURL(regexPattern)
-    await wait(500)
-  } else {
-    await expect(page).toHaveURL(regexPattern)
-  }
 }
 
 export function exactText(text: string) {
@@ -196,12 +191,25 @@ export const findTableCell = (page: Page, fieldName: string, rowTitle?: string):
   return cell
 }
 
+export async function navigateToListCellLink(page: Page, selector = '.cell-id') {
+  const cellLink = page.locator(`${selector} a`).first()
+  const linkURL = await cellLink.getAttribute('href')
+  await cellLink.click()
+  await page.waitForURL(`**${linkURL}`)
+}
+
 export const findTableRow = (page: Page, title: string): Locator => {
   const row = page.locator(`tbody tr:has-text("${title}")`)
   expect(row).toBeTruthy()
   return row
 }
 
+export async function switchTab(page: Page, selector: string) {
+  await page.locator(selector).click()
+  await wait(300)
+  await expect(page.locator(`${selector}.tabs-field__tab-button--active`)).toBeVisible()
+}
+
 /**
  * Throws an error when browser console error messages (with some exceptions) are thrown, thus resulting
  * in the e2e test failing.

test/live-preview/e2e.spec.ts

@@ -8,6 +8,7 @@ import {
   ensureAutoLoginAndCompilationIsDone,
   exactText,
   initPageConsoleErrorCatch,
+  navigateToListCellLink,
   saveDocAndAssert,
 } from '../helpers.js'
 import { AdminUrlUtil } from '../helpers/adminUrlUtil.js'
@@ -26,25 +27,21 @@ describe('Live Preview', () => {
 
   const goToDoc = async (page: Page) => {
     await page.goto(url.list)
-    const linkToDoc = page.locator('tbody tr:first-child .cell-id a').first()
+    await page.waitForURL(url.list)
-
+    await navigateToListCellLink(page)
-    await expect(() => expect(linkToDoc).toBeTruthy()).toPass({ timeout: POLL_TOPASS_TIMEOUT })
-    const linkDocHref = await linkToDoc.getAttribute('href')
-
-    await linkToDoc.click()
-
-    await page.waitForURL(`**${linkDocHref}`)
   }
 
   const goToCollectionPreview = async (page: Page): Promise<void> => {
     await goToDoc(page)
     await page.goto(`${page.url()}/preview`)
+    await page.waitForURL(`**/preview`)
   }
 
   const goToGlobalPreview = async (page: Page, slug: string): Promise<void> => {
     const global = new AdminUrlUtil(serverURL, slug)
     const previewURL = `${global.global(slug)}/preview`
     await page.goto(previewURL)
+    await page.waitForURL(previewURL)
   }
 
   beforeAll(async ({ browser }) => {
@@ -78,12 +75,9 @@ describe('Live Preview', () => {
 
   test('collection — has route', async () => {
     await goToDoc(page)
-    const url = page.url()
     await goToCollectionPreview(page)
 
-    await expect(() => expect(page.url()).toBe(`${url}/preview`)).toPass({
+    await expect(page.locator('.live-preview')).toBeVisible()
-      timeout: POLL_TOPASS_TIMEOUT,
-    })
   })
 
   test('collection — renders iframe', async () => {
@@ -127,6 +121,7 @@ describe('Live Preview', () => {
   test('global — has tab', async () => {
     const global = new AdminUrlUtil(serverURL, 'header')
     await page.goto(global.global('header'))
+    await page.waitForURL(global.global('header'))
 
     const docURL = page.url()
     const pathname = new URL(docURL).pathname
@@ -169,17 +164,13 @@ describe('Live Preview', () => {
 
   test('properly measures iframe and displays size', async () => {
     await page.goto(url.create)
+    await page.waitForURL(url.create)
     await page.locator('#field-title').fill('Title 3')
     await page.locator('#field-slug').fill('slug-3')
 
     await saveDocAndAssert(page)
-
     await goToCollectionPreview(page)
 
-    await expect(() => expect(page.url()).toContain('/preview')).toPass({
-      timeout: POLL_TOPASS_TIMEOUT,
-    })
-
     const iframe = page.locator('iframe')
 
     // Measure the actual iframe size and compare it with the inputs rendered in the toolbar
@@ -222,17 +213,13 @@ describe('Live Preview', () => {
 
   test('resizes iframe to specified breakpoint', async () => {
     await page.goto(url.create)
-    await expect.poll(() => page.url(), { timeout: POLL_TOPASS_TIMEOUT }).toContain('create')
+    await page.waitForURL(url.create)
     await page.locator('#field-title').fill('Title 4')
     await page.locator('#field-slug').fill('slug-4')
 
     await saveDocAndAssert(page)
     await goToCollectionPreview(page)
 
-    await expect(() => expect(page.url()).toContain('/preview')).toPass({
-      timeout: POLL_TOPASS_TIMEOUT,
-    })
-
     // Check that the breakpoint select is present
     const breakpointSelector = page.locator(
       '.live-preview-toolbar-controls__breakpoint button.popup-button',

test/localization/e2e.spec.ts

@@ -86,7 +86,7 @@ describe('Localization', () => {
 
       await fillValues({ description, title: spanishTitle })
       await saveDocAndAssert(page)
-      await changeLocale(page, defaultLocale, true)
+      await changeLocale(page, defaultLocale)
 
       // Expect english title
       await expect(page.locator('#field-title')).toHaveValue(title)
@@ -105,7 +105,7 @@ describe('Localization', () => {
       await saveDocAndAssert(page)
 
       // Change back to English
-      await changeLocale(page, defaultLocale, true)
+      await changeLocale(page, defaultLocale)
 
       // Localized field should not be populated
       await expect(page.locator('#field-title')).toBeEmpty()
@@ -133,7 +133,7 @@ describe('Localization', () => {
       await saveDocAndAssert(page)
 
       // Change back to English
-      await changeLocale(page, defaultLocale, true)
+      await changeLocale(page, defaultLocale)
 
       // Localized field should not be populated
       await expect(page.locator('#field-title')).toBeEmpty()
@@ -191,9 +191,9 @@ describe('Localization', () => {
 
     test('should duplicate localized checkbox correctly', async () => {
       await page.goto(url.create)
-      await page.waitForURL(`**${url.create}`)
+      await page.waitForURL(url.create)
 
-      //await changeLocale(page, defaultLocale, true)
+      await changeLocale(page, defaultLocale)
       await fillValues({ description, title: englishTitle })
       await page.locator('#field-localizedCheckbox').click()
 
@@ -207,7 +207,7 @@ describe('Localization', () => {
       await expect(page.locator('#field-localizedCheckbox')).not.toBeChecked()
 
       // duplicate doc
-      await changeLocale(page, defaultLocale, true)
+      await changeLocale(page, defaultLocale)
       await openDocControls(page)
       await page.locator('#action-duplicate').click()
 
@@ -225,7 +225,7 @@ describe('Localization', () => {
     test('should duplicate even if missing some localized data', async () => {
       // create a localized required doc
       await page.goto(urlWithRequiredLocalizedFields.create)
-      await changeLocale(page, defaultLocale, true)
+      await changeLocale(page, defaultLocale)
       await page.locator('#field-title').fill(englishTitle)
       await page.locator('#field-layout .blocks-field__drawer-toggler').click()
       await page.locator('button[title="Text"]').click()