Playwright Iframe Embed Testing

This project verifies that the Rootstock NFT "Wink" app scales, renders, and functions correctly when embedded in a third-party site's iframe (specifically simulating a social feed container like an X/Twitter Card).

🚀 Key Features Tested

• Visual Integrity: Confirms the app fits the iframe without vertical scrollbars (Autoscaling logic).
• Branding & UI: Ensures the Rootstock logo and "Mint" CTAs are visible inside the frame.
• Geometry: Validates that the container maintains a precise 500x700px footprint.
• Referrer-Aware logic: Includes a specialized bypass for the application's internal X.com/Twitter referrer check.

🛠 Prerequisites

• Bun installed locally.

📦 Getting Started

1. Install dependencies:

   bun install

2. Install Playwright browsers:

   npx playwright install --with-deps

3. Run the testing suite:

   npx playwright test

🧪 Project Structure

• index.html: The human-readable test host. It embeds the Wink app in a fixed-size container to simulate a real-world social feed.
• tests/embed.spec.ts: The automated test suite.
• playwright.config.ts: Configuration for cross-browser testing (Chrome, Safari, Firefox).

💡 Technical Notes: The Referrer Bypass

The Wink application includes a ReferrerTracker that redirects users to winks.fun if the page isn't opened within x.com or twitter.com.

To allow our local tests to function, we use Playwright's addInitScript to mock document.referrer:

await page.addInitScript(() => {
  Object.defineProperty(document, 'referrer', {
    get: () => 'https://x.com/',
    configurable: true
  });
});

This ensures the app bootstraps its full NFT minting UI instead of triggering the redirect.