From 8f13965a27f263006f1e6afcb13c028b7edf87be Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bertalan=20K=C3=B6rmendy?= Date: Fri, 26 Jan 2024 10:18:35 +0100 Subject: [PATCH] log waits in puppeteer tests (#4789) * log waits in puppeteer tests * use `console.info` * set puppeteer timeout to 30s * remove duplicated var * remove unnecessary `| null` --- .../src/comments/collaboration-test.spec.tsx | 25 +++++++--- puppeteer-tests/src/comments/comment-utils.ts | 32 ++++++++---- .../src/comments/commenting.spec.tsx | 50 ++++++++++++++----- 3 files changed, 79 insertions(+), 28 deletions(-) diff --git a/puppeteer-tests/src/comments/collaboration-test.spec.tsx b/puppeteer-tests/src/comments/collaboration-test.spec.tsx index 84c4a1c3bc88..86a60c8819e8 100644 --- a/puppeteer-tests/src/comments/collaboration-test.spec.tsx +++ b/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")', ) diff --git a/puppeteer-tests/src/comments/comment-utils.ts b/puppeteer-tests/src/comments/comment-utils.ts index f42dfbcfabb9..b36710b8d71e 100644 --- a/puppeteer-tests/src/comments/comment-utils.ts +++ b/puppeteer-tests/src/comments/comment-utils.ts @@ -1,17 +1,27 @@ -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> { + 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 } @@ -19,29 +29,33 @@ export async function initBrowserTest(utopiaBrowser: UtopiaPuppeteerBrowser) { 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') diff --git a/puppeteer-tests/src/comments/commenting.spec.tsx b/puppeteer-tests/src/comments/commenting.spec.tsx index 584da5dc1d9a..a31a2a177022 100644 --- a/puppeteer-tests/src/comments/commenting.spec.tsx +++ b/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 { - 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,