|
| 1 | +import { expect, test } from "@playwright/test"; |
| 2 | + |
| 3 | +test.describe("Vapi Widget on Tesla Page", () => { |
| 4 | + test("should load Vapi widget script and render widget element", async ({ page }) => { |
| 5 | + // Go to the tesla page |
| 6 | + await page.goto("http://localhost:4000/tesla"); |
| 7 | + |
| 8 | + // Wait for page to fully load |
| 9 | + await page.waitForLoadState("networkidle"); |
| 10 | + await page.waitForTimeout(1000); // Give extra time for JS to run |
| 11 | + |
| 12 | + // Log console messages for debugging |
| 13 | + page.on("console", (msg) => { |
| 14 | + if (msg.text().includes("vapi") || msg.text().includes("widget")) { |
| 15 | + console.log("🎙️ Console:", msg.text()); |
| 16 | + } |
| 17 | + }); |
| 18 | + |
| 19 | + // Check if the Vapi script is loaded |
| 20 | + const hasVapiScript = await page.evaluate(() => { |
| 21 | + const scripts = Array.from(document.scripts); |
| 22 | + return scripts.some((script) => script.src.includes("@vapi-ai/client-sdk-react")); |
| 23 | + }); |
| 24 | + |
| 25 | + console.log(`Vapi script loaded: ${hasVapiScript}`); |
| 26 | + expect(hasVapiScript).toBe(true); |
| 27 | + |
| 28 | + // Check if the vapi-widget custom element exists in the DOM |
| 29 | + const vapiWidget = page.locator("vapi-widget"); |
| 30 | + const widgetCount = await vapiWidget.count(); |
| 31 | + console.log(`Vapi widget elements found: ${widgetCount}`); |
| 32 | + expect(widgetCount).toBeGreaterThan(0); |
| 33 | + |
| 34 | + // Verify widget has the expected attributes |
| 35 | + const publicKey = await vapiWidget.getAttribute("public-key"); |
| 36 | + const assistantId = await vapiWidget.getAttribute("assistant-id"); |
| 37 | + const mode = await vapiWidget.getAttribute("mode"); |
| 38 | + const theme = await vapiWidget.getAttribute("theme"); |
| 39 | + const mainLabel = await vapiWidget.getAttribute("main-label"); |
| 40 | + |
| 41 | + console.log("Widget attributes:"); |
| 42 | + console.log(` - public-key: ${publicKey ? "✓ present" : "✗ missing"}`); |
| 43 | + console.log(` - assistant-id: ${assistantId ? "✓ present" : "✗ missing"}`); |
| 44 | + console.log(` - mode: ${mode}`); |
| 45 | + console.log(` - theme: ${theme}`); |
| 46 | + console.log(` - main-label: ${mainLabel}`); |
| 47 | + |
| 48 | + expect(publicKey).toBe("49b277de-d508-4062-bec2-503e40915be4"); |
| 49 | + expect(assistantId).toBe("f5fe3b31-0ff6-4395-bc08-bc8ebbbf48a6"); |
| 50 | + expect(mode).toBe("chat"); |
| 51 | + expect(theme).toBe("dark"); |
| 52 | + expect(mainLabel).toBe("Talk to Tony"); |
| 53 | + }); |
| 54 | + |
| 55 | + test("verify widget has correct styling attributes", async ({ page }) => { |
| 56 | + await page.goto("http://localhost:4000/tesla"); |
| 57 | + await page.waitForLoadState("networkidle"); |
| 58 | + await page.waitForTimeout(1000); |
| 59 | + |
| 60 | + const vapiWidget = page.locator("vapi-widget"); |
| 61 | + |
| 62 | + // Check color attributes |
| 63 | + const baseColor = await vapiWidget.getAttribute("base-color"); |
| 64 | + const accentColor = await vapiWidget.getAttribute("accent-color"); |
| 65 | + |
| 66 | + console.log("Widget styling:"); |
| 67 | + console.log(` - base-color: ${baseColor}`); |
| 68 | + console.log(` - accent-color: ${accentColor}`); |
| 69 | + |
| 70 | + expect(baseColor).toBe("#2c2c2c"); |
| 71 | + expect(accentColor).toBe("#c0392b"); |
| 72 | + }); |
| 73 | + |
| 74 | + test("verify widget appears in Talk to Tony section", async ({ page }) => { |
| 75 | + await page.goto("http://localhost:4000/tesla"); |
| 76 | + await page.waitForLoadState("networkidle"); |
| 77 | + |
| 78 | + // Check that the section header exists |
| 79 | + const tonyHeader = page.locator("h3:has-text('Talk to Tony')"); |
| 80 | + const headerExists = (await tonyHeader.count()) > 0; |
| 81 | + console.log(`"Talk to Tony" header found: ${headerExists}`); |
| 82 | + expect(headerExists).toBe(true); |
| 83 | + |
| 84 | + // Check that widget is near the header |
| 85 | + const widgetNearHeader = page.locator("h3:has-text('Talk to Tony') ~ vapi-widget"); |
| 86 | + const widgetFound = (await widgetNearHeader.count()) > 0; |
| 87 | + console.log(`Widget found after "Talk to Tony" header: ${widgetFound}`); |
| 88 | + expect(widgetFound).toBe(true); |
| 89 | + }); |
| 90 | +}); |
0 commit comments