JesusFilm · kiran-redhat · Mar 26, 2026 · Mar 26, 2026 · Mar 26, 2026 · Mar 26, 2026
@@ -68,14 +68,11 @@ test.describe('verify card level actions', () => {
     await cardLevelActionPage.clickBtnInAddBlockDrawer('Image') // clicking on image button in add block drawer
     await cardLevelActionPage.clickSelectImageBtn() // clicking on select image buttom in image properties drawer
     await cardLevelActionPage.clickImageSelectionTab('Custom') // clicking on custom tab in image drawer tab list
-    await cardLevelActionPage.getImageSrc() // getting current image source
     await cardLevelActionPage.uploadImageInCustomTab() // uploading image in the custom tab
-    //  await cardLevelActionPage.verifyImgUploadedSuccessMsg() // verifying the 'Upload successful' message
-    await cardLevelActionPage.verifyImageGotChanged() // verifying the image is updated in the custom tab
+    await cardLevelActionPage.verifyCustomImageUploaded() // verifying the Cloudflare-hosted image appears in the thumbnail
     await cardLevelActionPage.clickImageSelectionTab('Gallery') // clicking on Gallery tab in image drawer tab list
-    await cardLevelActionPage.getImageSrc() // getting current image source
     await cardLevelActionPage.clickImgFromFeatureOfGalleryTab() // selecting an image of Gallery tab in the image drawer
-    await cardLevelActionPage.verifyImageGotChanged() // verifying the seleted image is updated in the image drawer
+    await cardLevelActionPage.verifyGalleryImageSelected() // verifying the Unsplash gallery image appears in the thumbnail
     await cardLevelActionPage.clickImgDeleteBtn() // deleting the selected image
     await cardLevelActionPage.verifyImageIsDeleted() // verifying the image is deleted from the image drawer
   })

@@ -18,8 +18,8 @@ const config = {
   }
 }
 
-// Set test time out to 4 minutes as it has to run lighthouse audit
-test.setTimeout(4 * 60 * 1000)
+// Lighthouse + cold remote URL can exceed 4 minutes under parallel CI load
+test.setTimeout(6 * 60 * 1000)
 
 test('Homepage', async () => {
   const browser = await chromium.launch({

@@ -68,12 +68,21 @@ export class CardLevelActionPage {
   }
 
   async clickBtnInAddBlockDrawer(buttonName: string) {
-    const button = this.page.locator(
-      'div[data-testid="SettingsDrawer"] button',
-      {
-        hasText: buttonName
-      }
-    )
+    // Use the exact JourneysAdmin test-id for each block type to avoid ambiguous
+    // matches against other SettingsDrawer buttons that contain the same word
+    // (e.g. "Image Source" header in the background-image properties drawer).
+    const testIdMap: Record<string, string> = {
+      Image: 'JourneysAdminButtonNewImageButton',
+      Spacer: 'JourneysAdminButtonNewSpacerButton',
+      Video: 'JourneysAdminButtonNewVideoButton',
+      Typography: 'JourneysAdminButtonNewTypographyButton'
+    }
+    const testId = testIdMap[buttonName]
+    const button = testId
+      ? this.page.locator(`div[data-testid="${testId}"] button`)
+      : this.page.locator('div[data-testid="SettingsDrawer"] button', {
+          hasText: buttonName
+        })
     await button.click({ timeout: sixtySecondsTimeout })
   }
 
@@ -238,39 +247,51 @@ export class CardLevelActionPage {
       .setInputFiles(
         require('path').join(__dirname, '../utils/testResource/Flower.jpg')
       )
+    // Scope to the ImageLibrary Drawer to avoid matching the progress bar
+    // in the properties panel behind it.
+    const imageLibraryDrawer = this.page.locator(
+      'div[data-testid="SettingsDrawer"]',
+      { has: this.page.locator('button[aria-label="close-image-library"]') }
+    )
     await expect(
-      this.page.locator(
-        'div[data-testid="ImageBlockHeader"] div[data-testid="ImageBlockThumbnail"] span[role="progressbar"]'
+      imageLibraryDrawer.locator(
+        'div[data-testid="ImageBlockThumbnail"] span[role="progressbar"]'
       )
     ).toBeHidden({ timeout: sixtySecondsTimeout })
   }
 
-  async getImageSrc() {
-    if (
-      await this.page
-        .locator(
-          'div[data-testid="ImageSource"] + div div[data-testid="ImageBlockThumbnail"] img'
-        )
-        .isVisible()
-    ) {
-      this.uploadedImgSrc = await this.page
-        .locator(
-          'div[data-testid="ImageSource"] + div div[data-testid="ImageBlockThumbnail"] img'
-        )
-        .getAttribute('src')
-    } else {
-      this.uploadedImgSrc = ''
-    }
+  private imageLibraryThumbnail() {
+    // The ImageLibrary Drawer is identified by its close button (aria-label hardcoded
+    // to "close-image-library" for all settings drawers). Use .first() because the
+    // background-image properties panel can also be open at the same time, creating a
+    // second matching drawer — both show the same img src, so first() is fine.
+    return this.page
+      .locator('div[data-testid="SettingsDrawer"]', {
+        has: this.page.locator('button[aria-label="close-image-library"]')
+      })
+      .locator('div[data-testid="ImageBlockThumbnail"] img')
+      .first()
   }
-  private imageLibraryThumbnail() {
-    // The ImageLibrary Drawer is identified by its close button (aria-label hardcoded
-    // to "close-image-library" for all settings drawers). Use .first() because the
-    // background-image properties panel can also be open at the same time, creating a
-    // second matching drawer — both show the same img src, so first() is fine.
-    return this.page
-      .locator('div[data-testid="SettingsDrawer"]', {
-        has: this.page.locator('button[aria-label="close-image-library"]')
-      })
-      .locator('div[data-testid="ImageBlockThumbnail"] img')
-      .first()
-  }
+  private imageLibraryThumbnail() {
+    const imageLibraryDrawer = this.page.locator('div[data-testid="SettingsDrawer"]', {
+      has: this.page.locator('div[data-testid="ImageUpload"]')
+    })
+    return imageLibraryDrawer.locator('div[data-testid="ImageBlockThumbnail"] img')
+  }
-  private imageLibraryThumbnail() {
-    // The ImageLibrary Drawer is identified by its close button (aria-label hardcoded
-    // to "close-image-library" for all settings drawers). Use .first() because the
-    // background-image properties panel can also be open at the same time, creating a
-    // second matching drawer — both show the same img src, so first() is fine.
-    return this.page
-      .locator('div[data-testid="SettingsDrawer"]', {
-        has: this.page.locator('button[aria-label="close-image-library"]')
-      })
-      .locator('div[data-testid="ImageBlockThumbnail"] img')
-      .first()
-  }
+  private imageLibraryThumbnail() {
+    const imageLibraryDrawer = this.page.locator('div[data-testid="SettingsDrawer"]', {
+      has: this.page.locator('div[data-testid="ImageUpload"]')
+    })
+    return imageLibraryDrawer.locator('div[data-testid="ImageBlockThumbnail"] img')
+  }
 
-  async verifyImageGotChanged() {
-    await expect(
-      this.page.locator(
-        'div[data-testid="ImageSource"] + div div[data-testid="ImageBlockThumbnail"] img'
-      )
-    ).not.toHaveAttribute('src', this.uploadedImgSrc, {
-      timeout: sixtySecondsTimeout
-    })
+  async verifyCustomImageUploaded() {
+    // After a custom file upload, Apollo optimistically sets the src to a
+    // Cloudflare imagedelivery.net URL. Wait up to 60s for the img to appear
+    // with that src (upload + Apollo update can be slow on cold Vercel).
+    await expect(this.imageLibraryThumbnail()).toHaveAttribute(
+      'src',
+      /imagedelivery\.net/,
+      { timeout: sixtySecondsTimeout }
+    )
+  }
+
+  async verifyGalleryImageSelected() {
+    // After selecting an Unsplash gallery image the src always contains
+    // images.unsplash.com. Wait up to 60s for the img to reflect that.
+    await expect(this.imageLibraryThumbnail()).toHaveAttribute(
+      'src',
+      /images\.unsplash\.com/,
+      { timeout: sixtySecondsTimeout }
+    )
   }
 
   async verifyImgUploadedSuccessMsg() {

@@ -45,10 +45,7 @@ export class CustomizationMediaPage {
   }
 
   async pasteYouTubeUrl(url: string): Promise<void> {
-    const input = this.page
-      .getByTestId('VideosSection-youtube-input')
-      .locator('input')
-    await input.fill(url)
+    await this.page.getByRole('textbox', { name: 'YouTube URL' }).fill(url)
   }
 
   async waitForAutoSubmit(): Promise<void> {
@@ -59,11 +56,34 @@ export class CustomizationMediaPage {
     await this.page.waitForLoadState('load')
   }
 
-  async waitForAutoSubmitError(): Promise<void> {
-    const errorText = this.page
+  /**
+   * VideosSection validates via a debounced useEffect (~800ms) on URL change,
+   * not on blur. Waits until helper text shows the error (see VideosSection.tsx).
+   */
+  async waitForAutoSubmitError(
+    expectedInputValue = 'not-a-valid-url'
+  ): Promise<void> {
+    const input = this.page.getByRole('textbox', { name: 'YouTube URL' })
+    const videosSection = this.page.getByTestId('VideosSection')
+    const helper = this.page
       .getByTestId('VideosSection-youtube-input')
-      .locator('p.MuiFormHelperText-root.Mui-error')
-    await expect(errorText).toBeVisible({ timeout: 90000 })
+      .locator('.MuiFormHelperText-root')
+
+    await expect
+      .poll(
+        async () =>
+          await videosSection.locator('.MuiCircularProgress-root').count(),
+        { timeout: defaultTimeout, intervals: [400, 800, 1200] }
+      )
+      .toBe(0)
+
+    await expect(input).toHaveValue(expectedInputValue, {
+      timeout: defaultTimeout
+    })
+
+    await expect(helper).toHaveText('Please enter a valid YouTube URL', {
+      timeout: 90000
+    })
   }
 
   async verifyVideosSectionVisible(): Promise<void> {

@@ -11,6 +11,7 @@ import testData from '../utils/testData.json'
 let journeyName = ''
 const thirtySecondsTimeout = 30000
 const sixtySecondsTimeout = 60000
+const ninetySecondsTimeout = 90000
 // eslint-disable-next-line no-undef
 const downloadFolderPath = path.join(__dirname, '../utils/download/')
 
@@ -243,8 +244,7 @@ export class JourneyPage {
     const createButton = this.page.getByRole('button', {
       name: 'Create Custom Journey'
     })
-    // 90s: cold Vercel SSR + TeamProvider Apollo query can take time on first load
-    await expect(createButton).toBeEnabled({ timeout: 90000 })
+    await expect(createButton).toBeEnabled({ timeout: ninetySecondsTimeout })
     await createButton.click()
     const journeyImageLoader = this.page.locator(
       'div[data-testid="JourneysAdminImageThumbnail"] span[class*="MuiCircularProgress"]'
@@ -269,7 +269,7 @@ export class JourneyPage {
         'div[data-testid="CardWrapper"] div[data-testid*="SelectableWrapper"] h3[data-testid="JourneysTypography"]'
       )
       .first()
-      .click({ timeout: sixtySecondsTimeout, delay: 1000 })
+      .click({ timeout: ninetySecondsTimeout, delay: 1000 })
     for (let clickRetry = 0; clickRetry < 5; clickRetry++) {
       if (
         await this.page
@@ -346,7 +346,7 @@ export class JourneyPage {
       this.page.locator(this.journeyNamePath, {
         hasText: journeyName
       })
-    ).toBeVisible({ timeout: thirtySecondsTimeout })
+    ).toBeVisible({ timeout: sixtySecondsTimeout })
   }
 
   async clickOnTheCreatedCustomJourney() {

@@ -22,18 +22,26 @@ export class LoginPage {
   }
 
   async fillExistingPassword(password: string): Promise<void> {
-    await this.page.getByPlaceholder('Enter Password').fill(password)
+    await this.page
+      .getByPlaceholder('Enter Password')
+      .fill(password, { timeout: sixtySecondsTimeout })
   }
 
   async clickSubmitButton(): Promise<void> {
     await this.page.locator('button[type="submit"]').click()
   }
 
   async waitUntilDiscoverPageLoaded() {
-    // 90s: cold Vercel SSR + TeamProvider Apollo query can take >65s on first run
+    // 90s: cold Vercel SSR + TeamProvider Apollo query can take >65s on first run.
+    // Projects navigation link is part of the app shell and loads before team data.
+    await expect(this.getProjectsNavItem()).toBeVisible({ timeout: 90000 })
+
+    // TeamSelect is disabled={query.loading} while the teams Apollo query is in
+    // flight (see TeamSelect.tsx). Enabled means the query resolved and the page
+    // is fully interactive — regardless of which team (or Shared With Me) is active.
     await expect(
-      this.page.getByRole('button', { name: 'Create Custom Journey' })
-    ).toBeEnabled({ timeout: 90000 })
+      this.page.getByTestId('TeamSelect').locator('[aria-haspopup="listbox"]')
+    ).toBeEnabled({ timeout: 30000 })
   }
 
   async login(accountKey: string = 'admin'): Promise<void> {
@@ -46,13 +54,94 @@ export class LoginPage {
     await this.waitUntilDiscoverPageLoaded()
   }
 
-  async logInWithCreatedNewUser(userName: string) {
+  async logInWithCreatedNewUser(userName: string, expectedTeamTitle?: string) {
     await this.fillExistingEmail(userName)
     console.log(`userName : ${userName}`)
     await this.clickSubmitButton()
     const password = await getPassword()
     await this.fillExistingPassword(password)
     await this.clickSubmitButton()
-    await this.waitUntilDiscoverPageLoaded()
+    await this.waitUntilNewUserDiscoverPageLoaded(expectedTeamTitle)
+  }
+
+  private async getTeamSelectCombobox() {
+    return this.page.getByTestId('TeamSelect').locator('[role="combobox"]')
+  }
+
+  private getProjectsNavItem() {
+    return this.page
+      .getByRole('link', { name: /Projects/i })
+      .or(this.page.getByTestId('NavigationListItemProjects'))
+  }
+
+  private getTeamSelectTrigger() {
+    return this.page
+      .getByTestId('TeamSelect')
+      .locator('[aria-haspopup="listbox"]')
+  }
+
+  private async selectFirstAuthoringTeamIfNeeded(): Promise<void> {
+    const teamSelect = await this.getTeamSelectCombobox()
+    if (!(await teamSelect.innerText()).includes('Shared With Me')) return
+
+    const trigger = this.getTeamSelectTrigger()
+    await trigger.click()
+    const authoringTeamOption = this.page
+      .locator('ul[role="listbox"] li[role="option"]', {
+        hasNotText: 'Shared With Me'
+      })
+      .first()
+
+    try {
+      await expect(authoringTeamOption).toBeVisible({ timeout: 10000 })
+      await authoringTeamOption.click()
+      await expect(teamSelect).not.toContainText('Shared With Me', {
+        timeout: 30000
+      })
+    } catch {
+      await this.page.keyboard.press('Escape')
+    }
+  }
+
+  async assertSharedWithMeDiscoverState() {
+    const teamSelect = await this.getTeamSelectCombobox()
+    await expect(teamSelect).toContainText('Shared With Me', { timeout: 90000 })
+    await expect(
+      this.page.getByRole('button', { name: 'Create Custom Journey' })
+    ).toHaveCount(0)
+  }
+
+  async assertCreatedTeamDiscoverState(expectedTeamTitle?: string) {
+    const teamSelect = await this.getTeamSelectCombobox()
+    for (let attempt = 0; attempt < 3; attempt++) {
+      await this.selectFirstAuthoringTeamIfNeeded()
+      if ((await teamSelect.innerText()).includes('Shared With Me')) {
+        if (attempt === 2) break
+        await this.page.reload()
+        await expect(this.getProjectsNavItem()).toBeVisible({ timeout: 90000 })
+        await expect(this.getTeamSelectTrigger()).toBeEnabled({
+          timeout: 90000
+        })
+        continue
+      }
+      break
+    }
+    await expect(teamSelect).not.toContainText('Shared With Me', {
+      timeout: 90000
+    })
+    if (expectedTeamTitle != null && expectedTeamTitle.trim() !== '') {
+      await expect(teamSelect).toContainText(expectedTeamTitle)
+    }
+    await expect(
+      this.page.getByRole('button', { name: 'Create Custom Journey' })
+    ).toBeEnabled({ timeout: 90000 })
+  }
+
+  private async waitUntilNewUserDiscoverPageLoaded(expectedTeamTitle?: string) {
+    await expect(this.getProjectsNavItem()).toBeVisible({ timeout: 90000 })
+
+    await expect(this.getTeamSelectTrigger()).toBeEnabled({ timeout: 90000 })
+
+    await this.assertCreatedTeamDiscoverState(expectedTeamTitle)
   }
 }