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

@@ -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"]

apps/web/playwright/lib/testUtils.ts

@@ -70,6 +70,12 @@ export async function waitFor(fn: () => Promise<unknown> | 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);
 

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: [
     {

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) {