diff --git a/packages/embeds/embed-core/playwright/tests/embed-pages.e2e.ts b/packages/embeds/embed-core/playwright/tests/embed-pages.e2e.ts new file mode 100644 index 0000000000..b543f4a859 --- /dev/null +++ b/packages/embeds/embed-core/playwright/tests/embed-pages.e2e.ts @@ -0,0 +1,59 @@ +import { expect } from "@playwright/test"; + +import { test } from "@calcom/web/playwright/lib/fixtures"; + +test.describe("Embed Pages", () => { + test("Event Type Page: should not have margin top on embed page", async ({ page }) => { + await page.goto("http://localhost:3000/free/30min/embed"); + // Checks the margin from top by checking the distance between the div inside main from the viewport + const marginFromTop = await page.evaluate(() => { + const mainElement = document.querySelector("main"); + const divElement = mainElement?.querySelector("div"); + + if (mainElement && divElement) { + // This returns the distance of the div element from the viewport + const divRect = divElement.getBoundingClientRect(); + return divRect.top; + } + + return null; + }); + + expect(marginFromTop).toBe(0); + }); + + test("Event Type Page: should have margin top on non embed page", async ({ page }) => { + await page.goto("http://localhost:3000/free/30min"); + + // Checks the margin from top by checking the distance between the div inside main from the viewport + const marginFromTop = await page.evaluate(() => { + const mainElement = document.querySelector("main"); + const divElement = mainElement?.querySelector("div"); + + if (mainElement && divElement) { + // This returns the distance of the div element from the viewport + const divRect = divElement.getBoundingClientRect(); + return divRect.top; + } + + return null; + }); + + expect(marginFromTop).not.toBe(0); + }); + + test("should change to embed when window.name is changed to cal-embed=", async ({ page }) => { + await page.goto("http://localhost:3000/free/30min"); + + await page.evaluate(() => { + window.name = "cal-embed="; + }); + + await page.reload(); + + const isEmbed = await page.evaluate(() => { + return window?.isEmbed?.(); + }); + expect(isEmbed).toBe(true); + }); +});