log waits in puppeteer tests

puppeteer-tests/src/comments/collaboration-test.spec.tsx

@@ -2,20 +2,22 @@ import type { ElementHandle, Page } from 'puppeteer'
 import { setupBrowser, wait } from '../utils'
 import * as url from 'url'
 import { createUtopiaPuppeteerBrowser } from './test-utils'
-
-const TIMEOUT = 120000
+import { PUPPETEER_TIMEOUT, TIMEOUT, getElementWithSelector } from './comment-utils'
 
 const BRANCH_NAME = process.env.BRANCH_NAME ? `&branch_name=${process.env.BRANCH_NAME}` : ''
 const BASE_URL = process.env.BASE_URL ?? 'http://localhost:8000'
 
 async function signIn(page: Page) {
-  const signInButton = await page.waitForSelector('div[data-testid="sign-in-button"]')
+  const signInButton = await getElementWithSelector(page, 'div[data-testid="sign-in-button"]')
   await signInButton!.click()
-  await page.waitForSelector('#playground-scene') // wait for the scene to render
+  await getElementWithSelector(page, '#playground-scene') // wait for the scene to render
 }
 
 async function clickCanvasContainer(page: Page, { x, y }: { x: number; y: number }) {
-  const canvasControlsContainer = await page.waitForSelector('#new-canvas-controls-container')
+  const canvasControlsContainer = await getElementWithSelector(
+    page,
+    '#new-canvas-controls-container',
+  )
   await canvasControlsContainer!.click({ offset: { x, y } })
 }
 
@@ -27,12 +29,17 @@ describe('Collaboration test', () => {
     async () => {
       const { page: page1 } = await utopiaBrowser1.setup({
         url: `${BASE_URL}/p/?fakeUser=alice&Multiplayer=true${BRANCH_NAME}`,
-        timeout: TIMEOUT,
+        timeout: PUPPETEER_TIMEOUT,
       })
 
+      console.info('waiting for page to navigate to the new project')
       await page1.waitForNavigation()
       await signIn(page1)
       // wait for project to be saved
+      console.info(
+        'waiting for element with function',
+        'document.querySelector("body").innerText.includes("Project successfully uploaded!")',
+      )
       await page1.waitForFunction(
         'document.querySelector("body").innerText.includes("Project successfully uploaded!")',
         { polling: 'mutation' },
@@ -42,7 +49,7 @@ describe('Collaboration test', () => {
 
       const { page: page2 } = await utopiaBrowser2.setup({
         url: `${BASE_URL}${newProjectUrl}?fakeUser=bob&Multiplayer=true${BRANCH_NAME}`,
-        timeout: TIMEOUT,
+        timeout: PUPPETEER_TIMEOUT,
       })
 
       await signIn(page2)
@@ -66,6 +73,10 @@ describe('Collaboration test', () => {
 
       await clickCanvasContainer(page1, { x: 500, y: 500 })
 
+      console.info(
+        'waiting for element with function',
+        'document.querySelector("body").innerText.includes("Sample text")',
+      )
       const sampleText = await page2.waitForFunction(
         'document.querySelector("body").innerText.includes("Sample text")',
       )

puppeteer-tests/src/comments/comment-utils.ts

@@ -1,47 +1,61 @@
-import type { Page } from 'puppeteer'
+import type { ElementHandle, Page } from 'puppeteer'
 import type { UtopiaPuppeteerBrowser } from './test-utils'
 
 export const TIMEOUT = 120000
+export const PUPPETEER_TIMEOUT = 30000
 
 const BRANCH_NAME = process.env.BRANCH_NAME ? `&branch_name=${process.env.BRANCH_NAME}` : ''
 const BASE_URL = process.env.BASE_URL ?? 'http://localhost:8000'
 
+export async function getElementWithSelector(
+  page: Page,
+  selector: string,
+): Promise<ElementHandle<Element>> {
+  console.info('waiting for element with selector', selector)
+  const element = await page.waitForSelector(selector)
+  return element!
+}
+
 export async function initBrowserTest(utopiaBrowser: UtopiaPuppeteerBrowser) {
   const { page } = await utopiaBrowser.setup({
     url: `${BASE_URL}/p/?fakeUser=alice&Multiplayer=true${BRANCH_NAME}`,
-    timeout: TIMEOUT,
+    timeout: PUPPETEER_TIMEOUT,
   })
-  await page.waitForSelector('#playground-scene') // wait for the scene to render
+  await getElementWithSelector(page, '#playground-scene') // wait for the scene to render
 
   return page
 }
 
 export async function initSignedInBrowserTest(utopiaBrowser: UtopiaPuppeteerBrowser) {
   const { page } = await utopiaBrowser.setup({
     url: `${BASE_URL}/p/?fakeUser=alice&Multiplayer=true${BRANCH_NAME}`,
-    timeout: TIMEOUT,
+    timeout: PUPPETEER_TIMEOUT,
   })
 
-  const signInButton = await page.waitForSelector('div[data-testid="sign-in-button"]')
+  const signInButton = await getElementWithSelector(page, 'div[data-testid="sign-in-button"]')
   await signInButton!.click()
 
-  await page.waitForSelector('#playground-scene') // wait for the scene to render
+  await getElementWithSelector(page, '#playground-scene') // wait for the scene to render
 
   return page
 }
 
 export async function enterCommentMode(page: Page) {
-  const commentModeButton = await page.waitForSelector(
+  const commentModeButton = await getElementWithSelector(
+    page,
     'div[data-testid="canvas-toolbar-comment-mode-connected"]',
   )
   await commentModeButton!.click()
 }
 
 export async function placeCommentOnCanvas(page: Page, text: string, x: number, y: number) {
-  const canvasControlsContainer = await page.waitForSelector('#new-canvas-controls-container')
+  const canvasControlsContainer = await getElementWithSelector(
+    page,
+    '#new-canvas-controls-container',
+  )
   await canvasControlsContainer!.click({ offset: { x, y } })
 
-  const commentBox = await page.waitForSelector('[contenteditable="true"]')
+  const commentBox = await getElementWithSelector(page, '[contenteditable="true"]')
   await commentBox!.focus()
   await commentBox!.type(text)
   await page.keyboard.press('Enter')

puppeteer-tests/src/comments/commenting.spec.tsx

@@ -1,8 +1,9 @@
-import { setupBrowser, wait } from '../utils'
-import type { BoundingBox, Browser, Page, Point } from 'puppeteer'
+import { wait } from '../utils'
+import type { BoundingBox, Page, Point } from 'puppeteer'
 import {
   TIMEOUT,
   enterCommentMode,
+  getElementWithSelector,
   initBrowserTest,
   initSignedInBrowserTest,
   placeCommentOnCanvas,
@@ -14,7 +15,7 @@ const PlaygroundSceneSelector = '#playground-scene'
 const SceneToolbarSelector = 'div[data-testid="scene-label"]'
 
 async function getBoundingBox(page: Page, selector: string): Promise<BoundingBox> {
-  const element = await page.waitForSelector(selector)
+  const element = await getElementWithSelector(page, selector)
   const boundingBox = await element!.boundingBox()
   return boundingBox!
 }
@@ -66,22 +67,30 @@ describe('Comments test', () => {
       const page = await initSignedInBrowserTest(utopiaBrowser)
 
       // Enter comment mode using the toolbar
-      const commentModeButton = await page.waitForSelector(
+      const commentModeButton = await getElementWithSelector(
+        page,
         'div[data-testid="canvas-toolbar-comment-mode-connected"]',
       )
       await commentModeButton!.click()
 
       // Click on the canvas to open the comment popup
-      const canvasControlsContainer = await page.waitForSelector('#new-canvas-controls-container')
+      const canvasControlsContainer = await getElementWithSelector(
+        page,
+        '#new-canvas-controls-container',
+      )
       await canvasControlsContainer!.click({ offset: { x: 500, y: 500 } })
 
       // Write to comment text and submit it
-      const commentBox = await page.waitForSelector('[contenteditable="true"]')
+      const commentBox = await getElementWithSelector(page, '[contenteditable="true"]')
       await commentBox!.focus()
       await commentBox!.type('hello comments')
       await page.keyboard.press('Enter')
 
       // Check if the comment text is on the screen
+      console.info(
+        'waiting for element with function',
+        'document.querySelector("body").innerText.includes("hello comments")',
+      )
       const thread = await page.waitForFunction(
         'document.querySelector("body").innerText.includes("hello comments")',
       )
@@ -91,7 +100,7 @@ describe('Comments test', () => {
       await canvasControlsContainer!.click({ offset: { x: 700, y: 700 } })
 
       // Check if the comment indicator is still visible
-      const commentIndicator = await page.waitForSelector(CommentIndicatorSelector)
+      const commentIndicator = await getElementWithSelector(page, CommentIndicatorSelector)
 
       expect(commentIndicator).not.toBeNull()
 
@@ -108,17 +117,25 @@ describe('Comments test', () => {
       expect(popupAfterReopen).toHaveLength(1)
 
       // Submit a reply
-      const commentBox2 = await page.waitForSelector('[contenteditable="true"]')
+      const commentBox2 = await getElementWithSelector(page, '[contenteditable="true"]')
       await commentBox2!.focus()
       await commentBox2!.type('this is a reply')
       await page.keyboard.press('Enter')
 
       // Check if the original comment and the reply comment are both on the screen
+      console.info(
+        'waiting for element with function',
+        'document.querySelector("body").innerText.includes("hello comments")',
+      )
       const originalComment = await page.waitForFunction(
         'document.querySelector("body").innerText.includes("hello comments")',
       )
       expect(originalComment).not.toBeNull()
 
+      console.info(
+        'waiting for element with function',
+        'document.querySelector("body").innerText.includes("this is a reply")',
+      )
       const replyComment = await page.waitForFunction(
         'document.querySelector("body").innerText.includes("this is a reply")',
       )
@@ -141,7 +158,10 @@ describe('Comments test', () => {
       await enterCommentMode(page)
 
       // Clicking to add a comment
-      const canvasControlsContainer = await page.waitForSelector('#new-canvas-controls-container')
+      const canvasControlsContainer = await getElementWithSelector(
+        page,
+        '#new-canvas-controls-container',
+      )
       await canvasControlsContainer!.click({ offset: { x: 500, y: 500 } })
 
       // Pressing escape without submitting
@@ -163,7 +183,10 @@ describe('Comments test', () => {
 
       // Resolve the comment
 
-      const resolveButton = await page.waitForSelector('div[data-testid="resolve-thread-button"]')
+      const resolveButton = await getElementWithSelector(
+        page,
+        'div[data-testid="resolve-thread-button"]',
+      )
       await resolveButton!.click()
 
       // Check that the comment indicator is gone
@@ -180,7 +203,10 @@ describe('Comments test', () => {
       await enterCommentMode(page)
       await placeCommentOnCanvas(page, 'hello comments', 500, 500)
 
-      const closeCommentButton = await page.waitForSelector('div[data-testid="close-comment"]')
+      const closeCommentButton = await getElementWithSelector(
+        page,
+        'div[data-testid="close-comment"]',
+      )
       await closeCommentButton!.click()
 
       // Check that the comment popup is closed but the indicator is still there
@@ -197,7 +223,7 @@ describe('Comments test', () => {
       async () => {
         const page = await initSignedInBrowserTest(utopiaBrowser)
 
-        const commentTabs = await page.waitForSelector('div[data-testid="comments-tab"]')
+        const commentTabs = await getElementWithSelector(page, 'div[data-testid="comments-tab"]')
         expect(commentTabs).not.toBeNull()
       },
       TIMEOUT,