tm-playwright-framework/dist/utility/elementAnalyzer.js

Playwright Cucumber TS framework - The easiest way to learn

import { chromium } from 'playwright';
(async () => {
    const browser = await chromium.launch({ headless: false });
    const context = await browser.newContext();
    const page = await context.newPage();
    // Store new context/page references globally to keep them alive
    let newContext = null;
    let newPage = null;
    let index = 0;
    await context.exposeFunction('openAnalyzerWithHTML', async () => {
        try {
            const fullHTML = await getFullHTMLWithFrames(page);
            index = index + 1;
            if (newContext && newPage && !newPage.isClosed()) {
                //console.log("Page is not closed...");
                await newPage.bringToFront();
            }
            else {
                //console.log("Page opened...");
                newContext = await browser.newContext();
                newPage = await newContext.newPage();
                await newPage.goto('http://chi4wpmcjks001/ElementAnalyzer_v2.html');
            }
            // Inject a simple custom prompt UI in the page
            await newPage.evaluate(() => {
                // Create overlay
                const overlay = document.createElement('div');
                overlay.id = 'custom-prompt-overlay';
                Object.assign(overlay.style, {
                    position: 'fixed',
                    top: '0', left: '0', right: '0', bottom: '0',
                    backgroundColor: 'rgba(0,0,0,0.5)',
                    display: 'flex',
                    justifyContent: 'center',
                    alignItems: 'center',
                    zIndex: '9999',
                });
                // Create prompt box
                const box = document.createElement('div');
                Object.assign(box.style, {
                    backgroundColor: 'white',
                    padding: '20px',
                    borderRadius: '8px',
                    textAlign: 'center',
                    minWidth: '300px',
                });
                // Add message
                const message = document.createElement('p');
                message.textContent = 'Please enter the page name:';
                box.appendChild(message);
                // Add input
                const input = document.createElement('input');
                input.type = 'text';
                input.id = 'customPromptInput';
                input.style.width = '100%';
                input.style.marginBottom = '10px';
                box.appendChild(input);
                // Add submit button
                const btn = document.createElement('button');
                btn.textContent = 'Submit';
                btn.onclick = () => {
                    window.customPromptResult = input.value;
                    // Remove overlay on submit
                    document.body.removeChild(overlay);
                };
                box.appendChild(btn);
                overlay.appendChild(box);
                document.body.appendChild(overlay);
                // Focus input
                input.focus();
            });
            // Wait for the prompt overlay to disappear
            await newPage.waitForSelector('#custom-prompt-overlay', { state: 'detached' });
            // Retrieve user input
            const userInput = await newPage.evaluate(() => window.customPromptResult);
            // Perform subsequent actions
            const isVisible = await newPage.isVisible('#htmlCode', { timeout: 10000 });
            if (!isVisible) {
                await newPage.waitForSelector('#lblHtmlInput', { state: 'visible' });
                await newPage.click('#lblHtmlInput');
                // Wait for it to become visible after the click
                await newPage.waitForSelector('#htmlCode', { state: 'visible' });
            }
            await newPage.waitForSelector('#pageName');
            await newPage.click('#pageName');
            await newPage.fill('#pageName', `${userInput}`);
            console.log("Page name set to:", userInput);
            await newPage.waitForSelector('#htmlCode');
            await newPage.click('#htmlCode');
            await newPage.fill('#htmlCode', fullHTML, { timeout: 180000 });
            await newPage.waitForSelector('#analyzeHHTML');
            await newPage.click('#analyzeHHTML');
            await newPage.waitForSelector('#htmlCode', { state: 'hidden', timeout: 180000 }); // 120000 ms = 2 minutes
        }
        catch (error) {
            console.error('Error in openAnalyzerWithHTML:', error);
        }
    });
    await context.addInitScript(() => {
        window.addEventListener('keydown', (event) => {
            if (event.ctrlKey && event.key.toLowerCase() === ',') {
                // @ts-ignore
                window.openAnalyzerWithHTML();
            }
        }, true);
    });
    await page.goto('about:blank'); // Replace with your actual URL
})();
async function getFullHTMLWithFrames(page) {
    return await page.evaluate(async () => {
        // Recursive function to extract HTML including <iframe> and <frame>
        async function extractWithFrames(doc) {
            const clone = doc.documentElement.cloneNode(true);
            const allFrames = Array.from(doc.querySelectorAll('iframe, frame'));
            for (let i = 0; i < allFrames.length; i++) {
                const frameEl = allFrames[i];
                try {
                    const frameDoc = frameEl.contentDocument;
                    if (frameDoc) {
                        const frameHTML = await extractWithFrames(frameDoc);
                        const placeholder = document.createElement('div');
                        placeholder.innerHTML = `
                <!-- Start frame content -->
                <frame data-replaced="true">${frameHTML}</frame>
                <!-- End frame content -->
              `.trim();
                        // Replace the original <iframe> or <frame> with the filled-in version
                        const original = clone.querySelectorAll('iframe, frame')[i];
                        original.replaceWith(placeholder);
                    }
                }
                catch (err) {
                    console.warn(`⚠️ Skipping inaccessible frame: ${frameEl.src}`);
                }
            }
            return '<!DOCTYPE html>\n' + clone.outerHTML;
        }
        return await extractWithFrames(document);
    });
}