From 514cff7b3cc3a49cbb121da77dbed797f4d1e50e Mon Sep 17 00:00:00 2001 From: Hariom Balhara Date: Tue, 31 May 2022 15:02:41 +0530 Subject: [PATCH] Fix: Embed Tests - Handle superfast switching to next month bug (#2929) * Wait for more time for next month dates to fully render * Add comments * Wait for rendering of current month as well * Fix retries * Fix speed issue with non embed tests asw ell --- .github/workflows/e2e-embed.yml | 6 ++---- apps/web/playwright/lib/testUtils.ts | 14 ++++++++++++++ .../playwright/config/playwright.config.ts | 11 ++++++----- .../embeds/embed-core/playwright/lib/testUtils.ts | 12 +++++++++++- 4 files changed, 33 insertions(+), 10 deletions(-) diff --git a/.github/workflows/e2e-embed.yml b/.github/workflows/e2e-embed.yml index 327a58b448..82b323acdd 100644 --- a/.github/workflows/e2e-embed.yml +++ b/.github/workflows/e2e-embed.yml @@ -1,7 +1,5 @@ -name: E2E test - embed +name: E2E test on: - push: - branches: [ tests/ci-embed ] pull_request_target: # So we can test on forks branches: - main @@ -18,7 +16,7 @@ on: jobs: test: timeout-minutes: 20 - name: Testing Embeds + name: Embed and booking flow(for non-embed as well) strategy: matrix: node: ["14.x"] diff --git a/apps/web/playwright/lib/testUtils.ts b/apps/web/playwright/lib/testUtils.ts index 23f57bea64..687b93cbcc 100644 --- a/apps/web/playwright/lib/testUtils.ts +++ b/apps/web/playwright/lib/testUtils.ts @@ -70,6 +70,12 @@ export async function waitFor(fn: () => Promise | unknown, opts: { time } export async function selectFirstAvailableTimeSlotNextMonth(page: Page) { + // Let current month dates fully render. + // There is a bug where if we don't let current month fully render and quickly click go to next month, current month get's rendered + // This doesn't seem to be replicable with the speed of a person, only during automation. + // It would also allow correct snapshot to be taken for current month. + // eslint-disable-next-line playwright/no-wait-for-timeout + await page.waitForTimeout(1000); await page.click('[data-testid="incrementMonth"]'); // @TODO: Find a better way to make test wait for full month change render to end // so it can click up on the right day, also when resolve remove other todos @@ -82,6 +88,12 @@ export async function selectFirstAvailableTimeSlotNextMonth(page: Page) { } export async function selectSecondAvailableTimeSlotNextMonth(page: Page) { + // Let current month dates fully render. + // There is a bug where if we don't let current month fully render and quickly click go to next month, current month get's rendered + // This doesn't seem to be replicable with the speed of a person, only during automation. + // It would also allow correct snapshot to be taken for current month. + // eslint-disable-next-line playwright/no-wait-for-timeout + await page.waitForTimeout(1000); await page.click('[data-testid="incrementMonth"]'); // @TODO: Find a better way to make test wait for full month change render to end // so it can click up on the right day, also when resolve remove other todos @@ -95,7 +107,9 @@ export async function selectSecondAvailableTimeSlotNextMonth(page: Page) { export async function bookFirstEvent(page: Page) { // Click first event type + await page.click('[data-testid="event-type-link"]'); + await selectFirstAvailableTimeSlotNextMonth(page); await bookTimeSlot(page); diff --git a/packages/embeds/embed-core/playwright/config/playwright.config.ts b/packages/embeds/embed-core/playwright/config/playwright.config.ts index 469dc70124..f72fb77a4b 100644 --- a/packages/embeds/embed-core/playwright/config/playwright.config.ts +++ b/packages/embeds/embed-core/playwright/config/playwright.config.ts @@ -6,13 +6,14 @@ require("dotenv").config({ path: "../../../../../.env" }); const outputDir = path.join("../results"); const testDir = path.join("../tests"); const quickMode = process.env.QUICK === "true"; +const CI = process.env.CI; const config: PlaywrightTestConfig = { - forbidOnly: !!process.env.CI, - retries: quickMode ? 0 : 1, + forbidOnly: !!CI, + retries: quickMode && !CI ? 0 : 1, workers: 1, timeout: 60_000, reporter: [ - [process.env.CI ? "github" : "list"], + [CI ? "github" : "list"], [ "html", { outputFolder: path.join(__dirname, "..", "reports", "playwright-html-report"), open: "never" }, @@ -33,13 +34,13 @@ const config: PlaywrightTestConfig = { command: "yarn run-p 'embed-dev' 'embed-web-start'", port: 3100, timeout: 60_000, - reuseExistingServer: !process.env.CI, + reuseExistingServer: !CI, }, use: { baseURL: "http://localhost:3100", locale: "en-US", trace: "retain-on-failure", - headless: !!process.env.CI || !!process.env.PLAYWRIGHT_HEADLESS, + headless: !!CI || !!process.env.PLAYWRIGHT_HEADLESS, }, projects: [ { diff --git a/packages/embeds/embed-core/playwright/lib/testUtils.ts b/packages/embeds/embed-core/playwright/lib/testUtils.ts index 659c69cff9..0b289848ee 100644 --- a/packages/embeds/embed-core/playwright/lib/testUtils.ts +++ b/packages/embeds/embed-core/playwright/lib/testUtils.ts @@ -60,8 +60,11 @@ export const getEmbedIframe = async ({ page, pathname }: { page: Page; pathname: async function selectFirstAvailableTimeSlotNextMonth(frame: Frame, page: Page) { await frame.click('[data-testid="incrementMonth"]'); + // @TODO: Find a better way to make test wait for full month change render to end - // so it can click up on the right day, also when resolve remove other todos + // so it can click up on the right day, also when done, resolve other todos as well + // The problem is that the Month Text changes instantly but we don't know when the corresponding dates are visible + // Waiting for full month increment await frame.waitForTimeout(1000); expect(await page.screenshot()).toMatchSnapshot("availability-page-2.png"); @@ -78,7 +81,14 @@ export async function bookFirstEvent(username: string, frame: Frame, page: Page) return !!url.pathname.match(new RegExp(`/${username}/.*$`)); }, }); + + // Let current month dates fully render. + // There is a bug where if we don't let current month fully render and quickly click go to next month, current month get's rendered + // This doesn't seem to be replicable with the speed of a person, only during automation. + // It would also allow correct snapshot to be taken for current month. + await frame.waitForTimeout(1000); expect(await page.screenshot()).toMatchSnapshot("availability-page-1.png"); + await selectFirstAvailableTimeSlotNextMonth(frame, page); await frame.waitForNavigation({ url(url) {