chore: added iframe content test for live-preview test (#5476)

app/live-preview/(pages)/[slug]/page.client.tsx

@@ -7,6 +7,7 @@ import type { Page as PageType } from '../../../../test/live-preview/payload-typ
 
 import { PAYLOAD_SERVER_URL } from '../../_api/serverURL.js'
 import { Blocks } from '../../_components/Blocks/index.js'
+import { Gutter } from '../../_components/Gutter/index.js'
 import { Hero } from '../../_components/Hero/index.js'
 
 export const PageClient: React.FC<{
@@ -20,6 +21,9 @@ export const PageClient: React.FC<{
 
   return (
     <React.Fragment>
+      <Gutter>
+        <h1 id="page-title">{data.title}</h1>
+      </Gutter>
       <Hero {...data?.hero} />
       <Blocks
         blocks={[

app/live-preview/_css/app.scss

@@ -92,6 +92,10 @@ p {
   }
 }
 
+#page-title {
+  @extend %h6;
+}
+
 ul,
 ol {
   padding-left: var(--base);

test/live-preview/e2e.spec.ts

@@ -85,11 +85,25 @@ describe('Live Preview', () => {
     await expect(iframe).toBeVisible()
   })
 
-  test('collection - can edit fields', async () => {
+  test('collection - can edit fields and can preview updated value', async () => {
     await goToCollectionPreview(page)
+    const titleValue = 'Title 1'
     const field = page.locator('#field-title')
+    const frame = page.frameLocator('iframe.live-preview-iframe').first()
+
     await expect(field).toBeVisible()
-    await field.fill('Title 1')
+
+    // Forces the test to wait for the nextjs route to render before we try editing a field
+    await expect(() => expect(frame.locator('#page-title')).toBeVisible()).toPass({
+      timeout: 45000,
+    })
+
+    await field.fill(titleValue)
+
+    await expect(() => expect(frame.locator('#page-title')).toHaveText(titleValue)).toPass({
+      timeout: 45000,
+    })
+
     await saveDocAndAssert(page)
   })