site-builder/tests/video-background.spec.js

const { test, expect } = require('@playwright/test');
const { waitForEditor, addBlockById, clearCanvas } = require('./helpers');

test.describe('Video Background Section', () => {
    test.beforeEach(async ({ page }) => {
        await waitForEditor(page);
        await clearCanvas(page);
    });

    test('should add video background section and set YouTube URL', async ({ page }) => {
        // Step 1: Add Video Background Section via API
        const result = await addBlockById(page, 'section-video-bg');
        expect(result.success).toBe(true);
        await page.waitForTimeout(500);

        // Step 2: Verify section exists in HTML
        let html = await page.evaluate(() => window.editor.getHtml());
        expect(html).toContain('data-video-section="true"');

        // Step 3: Select the section via API
        await page.evaluate(() => {
            const editor = window.editor;
            const wrapper = editor.getWrapper();
            const section = wrapper.find('[data-video-section]')[0];
            if (section) editor.select(section);
        });
        await page.waitForTimeout(500);

        // Step 4: Open Settings panel
        await page.locator('button[data-panel="traits"]').click();
        await page.waitForTimeout(500);

        // Step 5: Find Video URL input in traits container
        const videoUrlInput = page.locator('#traits-container input[placeholder*="YouTube"]');
        await expect(videoUrlInput).toBeVisible({ timeout: 5000 });

        // Step 6: Enter YouTube URL
        const testVideoUrl = 'https://www.youtube.com/watch?v=OC7sNfNuTNU';
        await videoUrlInput.fill(testVideoUrl);
        await videoUrlInput.press('Enter');
        await page.waitForTimeout(1000);

        // Click "Apply Video" button if present
        const applyBtn = page.locator('#traits-container button:has-text("Apply Video")');
        if (await applyBtn.isVisible({ timeout: 1000 }).catch(() => false)) {
            await applyBtn.click();
            await page.waitForTimeout(1000);
        }

        // Step 7: Verify via editor HTML
        html = await page.evaluate(() => window.editor.getHtml());
        expect(html).toContain('OC7sNfNuTNU');
        expect(html).toContain('youtube');

        // Step 8: Background videos SHOULD have autoplay=1
        expect(html).toContain('autoplay=1');
    });

    test('should handle video URL changes', async ({ page }) => {
        // Add video background section
        const result = await addBlockById(page, 'section-video-bg');
        expect(result.success).toBe(true);
        await page.waitForTimeout(500);

        // Select section via API
        await page.evaluate(() => {
            const editor = window.editor;
            const wrapper = editor.getWrapper();
            const section = wrapper.find('[data-video-section]')[0];
            if (section) editor.select(section);
        });
        await page.waitForTimeout(500);

        // Open Settings
        await page.locator('button[data-panel="traits"]').click();
        await page.waitForTimeout(500);

        // Find video URL input
        const videoUrlInput = page.locator('#traits-container input[placeholder*="YouTube"]');
        await expect(videoUrlInput).toBeVisible({ timeout: 5000 });

        // Enter first video
        await videoUrlInput.fill('https://www.youtube.com/watch?v=OC7sNfNuTNU');
        await videoUrlInput.press('Enter');
        await page.waitForTimeout(500);

        const applyBtn = page.locator('#traits-container button:has-text("Apply Video")');
        if (await applyBtn.isVisible({ timeout: 1000 }).catch(() => false)) {
            await applyBtn.click();
            await page.waitForTimeout(1000);
        }

        let html = await page.evaluate(() => window.editor.getHtml());
        expect(html).toContain('OC7sNfNuTNU');

        // Change to different video
        await videoUrlInput.fill('https://www.youtube.com/watch?v=dQw4w9WgXcQ');
        await videoUrlInput.press('Enter');
        await page.waitForTimeout(500);

        if (await applyBtn.isVisible({ timeout: 1000 }).catch(() => false)) {
            await applyBtn.click();
            await page.waitForTimeout(1000);
        }

        // Verify HTML changed
        html = await page.evaluate(() => window.editor.getHtml());
        expect(html).toContain('dQw4w9WgXcQ');
        expect(html).not.toContain('OC7sNfNuTNU');
    });

    test('should work with direct video files', async ({ page }) => {
        // Add video background section
        const result = await addBlockById(page, 'section-video-bg');
        expect(result.success).toBe(true);
        await page.waitForTimeout(500);

        // Select section via API
        await page.evaluate(() => {
            const editor = window.editor;
            const wrapper = editor.getWrapper();
            const section = wrapper.find('[data-video-section]')[0];
            if (section) editor.select(section);
        });
        await page.waitForTimeout(500);

        // Open Settings
        await page.locator('button[data-panel="traits"]').click();
        await page.waitForTimeout(500);

        // Find video URL input
        const videoUrlInput = page.locator('#traits-container input[placeholder*="YouTube"]');
        await expect(videoUrlInput).toBeVisible({ timeout: 5000 });

        // Enter direct .mp4 URL
        const mp4Url = 'https://www.w3schools.com/html/mov_bbb.mp4';
        await videoUrlInput.fill(mp4Url);
        await videoUrlInput.press('Enter');
        await page.waitForTimeout(500);

        const applyBtn = page.locator('#traits-container button:has-text("Apply Video")');
        if (await applyBtn.isVisible({ timeout: 1000 }).catch(() => false)) {
            await applyBtn.click();
            await page.waitForTimeout(1000);
        }

        // For direct video, the HTML should have the video element with the src
        const html = await page.evaluate(() => window.editor.getHtml());
        expect(html).toContain(mp4Url);
        // The iframe should have display:none (hidden)
        expect(html).toContain('bg-video-player');
    });
});