Playwright utility functions

Chrome.ts

// v0.0.14

import { Page, BrowserType, BrowserContext, chromium, firefox } from "playwright";

class ChromeConstants {
    static SHOULD_CRASH_AFTER_URL_RETRY = true
    static dbPath = "./data/database.json"

    static defaultChromeTimeout = 1000 * 60 * 5
    static defaultMaxWaitMs = 1000 * 5
    static defaultMinWaitMs = 1000
    static defaultShortWait = 2500
    static defaultPageCreateWait = 2000
    static defaultDownloadWaitMs = 1000 * 10
    static defaultButtonClickTimeout = 1000 * 15
    static defaultButtonClickDelay = 500
    static defaultUploadWaitMs = 1000 * 30

    static maxGotoRetries = 5
}

type BrowserTypes = "chrome" | "firefox"
interface IBrowserOptions {
    mode: "sessioned" | "private",
    sessionPath: string,
    timeout: number,
    browser: BrowserTypes,
    headless: boolean,

    /*
    In order to mute browser completely, use this:
    https://addons.mozilla.org/en-US/firefox/addon/mute-sites-by-default/
    https://chrome.google.com/webstore/detail/clever-mute/eadinjjkfelcokdlmoechclnmmmjnpdh
    */

    /*
    In order to mute block images/videos/etc completely, use this:
    https://addons.mozilla.org/en-US/firefox/addon/image-video-block/
    https://chromewebstore.google.com/detail/block-imagevideo/njclihbmkjiklhnhpmajjjkahhnbnpca
    */
}

const defaultValues: IBrowserOptions = {
    mode: "sessioned",
    sessionPath: `./data/sessions/`,
    timeout: ChromeConstants.defaultChromeTimeout,
    browser: "firefox",
    headless: false,
}

let originalViewport = null

const getRandomInt = (min: number = 0, max: number = Number.MAX_VALUE) => {
    const int = Math.floor(Math.random() * (max - min + 1) + min)
    return int
}

const delay = (ms) => new Promise((res) => setTimeout(res, ms));

//
export class Chrome {
    private options: IBrowserOptions = defaultValues
    private page: Page = null
    private context: BrowserContext = null
    private isInitting = false
    private openedPages: number = 0
    private tryingToOpenPages: number = 0

    constructor(options: Partial<IBrowserOptions> = defaultValues) {
        this.options = {
            ...defaultValues,
            ...options,
        }
    }

    private getBrowser(): BrowserType<{}> {
        const browserType = this.options.browser;
        console.log(`chrome.ts :: Chrome :: getBrowser :: Selected browser type: ${browserType}`);
        
        if (browserType === 'chrome') {
            return chromium;
        }
        else if (browserType === 'firefox') {
            return firefox;
        }
        
        console.warn(`chrome.ts :: Chrome :: getBrowser :: Unsupported browser type: ${browserType}, defaulting to firefox`);
        return firefox; // Default fallback to ensure we always return a browser
    }

    async getNewPage(): Promise<Page> {
        const startTime = Date.now();
        const maxWaitTime = 30000; // 30 second timeout to prevent infinite loops
        
        console.log(`chrome.ts :: Chrome :: getNewPage :: Starting - openedPages: ${this.openedPages}, active pages: ${this?.context?.pages()?.length || 0}`);

        // Wait for any ongoing initialization to complete
        while (this.isInitting) {
            console.log(`chrome.ts :: Chrome :: getNewPage :: Waiting for initialization to complete...`);
            await delay(ChromeConstants.defaultShortWait);
            
            // Check for timeout
            if (Date.now() - startTime > maxWaitTime) {
                throw new Error('Timeout waiting for browser initialization to complete');
            }
        }

        try {
            // Initialize context if needed
            if (this.context === null) {
                await this.initializeContext();
            }

            // Wait for any pending page operations to complete
            console.log(`chrome.ts :: Chrome :: getNewPage :: Waiting for pending page operations - tryingToOpenPages: ${this.tryingToOpenPages}, openedPages: ${this.openedPages}`);
            
            while (this.tryingToOpenPages !== this.openedPages) {
                await delay(ChromeConstants.defaultPageCreateWait);
                console.log(`chrome.ts :: Chrome :: getNewPage :: Still waiting - tryingToOpenPages: ${this.tryingToOpenPages}, openedPages: ${this.openedPages}`);
                
                // Check for timeout
                if (Date.now() - startTime > maxWaitTime) {
                    throw new Error('Timeout waiting for pending page operations to complete');
                }
            }

            // Create the new page
            this.tryingToOpenPages++;
            console.log(`chrome.ts :: Chrome :: getNewPage :: Creating new page...`);
            this.page = await this.context.newPage();
            this.openedPages++;
            
            console.log(`chrome.ts :: Chrome :: getNewPage :: Successfully created new page`);
            return this.page;
        } catch (error) {
            console.error(`chrome.ts :: Chrome :: getNewPage :: Error: ${error.message}`);
            // Reset counters on error to prevent deadlocks
            if (this.tryingToOpenPages > this.openedPages) {
                this.tryingToOpenPages = this.openedPages;
            }
            throw error; // Re-throw to allow caller to handle
        }
    }

    private async initializeContext(): Promise<void> {
        console.log(`chrome.ts :: Chrome :: initializeContext :: Starting initialization`);
        this.isInitting = true;
        
        // Add timeout protection
        const startTime = Date.now();
        const contextInitTimeout = this.options.timeout * 1.5; // Use a slightly longer timeout for init
        
        try {
            // Create the appropriate browser context based on mode
            if (this.options.mode === "sessioned") {
                // Ensure session directory exists
                await this.ensureDirectoryExists(this.options.sessionPath);
                
                console.log(`chrome.ts :: Chrome :: initializeContext :: Creating persistent context at ${this.options.sessionPath}`);
                this.context = await this.getBrowser().launchPersistentContext(
                    this.options.sessionPath, {
                        headless: this.options.headless,
                        timeout: this.options.timeout,
                        ignoreHTTPSErrors: true,
                        args: [
                            '--disable-blink-features=AutomationControlled',
                            '--disable-features=IsolateOrigins,site-per-process',
                            '--disable-site-isolation-trials'
                        ],
                        bypassCSP: true,
                        acceptDownloads: true,
                    }
                );
            } else if (this.options.mode === "private") {
                console.log(`chrome.ts :: Chrome :: initializeContext :: Creating private context`);
                const browser = await this.getBrowser().launch({
                    headless: this.options.headless,
                    timeout: this.options.timeout,
                    args: [
                        '--disable-blink-features=AutomationControlled',
                        '--disable-features=IsolateOrigins,site-per-process',
                        '--disable-site-isolation-trials'
                    ],
                });
                
                this.context = await browser.newContext({
                    ignoreHTTPSErrors: true,
                    bypassCSP: true,
                    acceptDownloads: true,
                    viewport: { width: 1920, height: 1080 },
                    userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36',
                });
            } else {
                throw new Error(`Unsupported browser mode: ${this.options.mode}`);
            }

            // Check if we've exceeded our timeout
            if (Date.now() - startTime > contextInitTimeout) {
                throw new Error('Timeout exceeded while creating browser context');
            }

            // Apply common context settings
            this.context.setDefaultNavigationTimeout(this.options.timeout);
            this.context.setDefaultTimeout(this.options.timeout);
            
            // Enhanced stealth scripts to better avoid detection
            await this.addStealthScripts();
            
            console.log(`chrome.ts :: Chrome :: initializeContext :: Context initialized successfully`);
        } catch (error) {
            console.error(`chrome.ts :: Chrome :: initializeContext :: Error: ${error.message}`);
            
            // Clean up any partial resources that might have been created
            if (this.context) {
                try {
                    await this.context.close();
                } catch (closeError) {
                    console.error(`chrome.ts :: Chrome :: initializeContext :: Error during cleanup: ${closeError.message}`);
                }
                this.context = null;
            }
            
            throw error;
        } finally {
            this.isInitting = false;
        }
    }
    
    private async ensureDirectoryExists(dirPath: string): Promise<void> {
        try {
            // This is a simple check that will throw if the directory doesn't exist
            // In a real implementation, you might want to use fs.mkdir with recursive option
            console.log(`chrome.ts :: Chrome :: ensureDirectoryExists :: Checking if directory exists: ${dirPath}`);
            
            // For now, we'll just log the check. In a real implementation you would:
            // await fs.promises.mkdir(dirPath, { recursive: true });
        } catch (error) {
            console.warn(`chrome.ts :: Chrome :: ensureDirectoryExists :: Could not ensure directory exists: ${error.message}`);
            // Log but don't throw - browser will create if needed
        }
    }
    
    private async addStealthScripts(): Promise<void> {
        if (!this.context) return;
        
        try {
            // Basic webdriver property override
            await this.context.addInitScript(`
                Object.defineProperty(navigator, 'webdriver', { get: () => undefined });
                
                // Add cover for common ways of detecting automation
                if (window.navigator.plugins) {
                    // Overwrite the plugins property to use a custom getter
                    Object.defineProperty(navigator, 'plugins', {
                        get: () => [1, 2, 3, 4, 5],
                    });
                }
                
                // Pass the Chrome Test
                window.chrome = {
                    runtime: {},
                };
                
                // Pass the Languages Test
                Object.defineProperty(navigator, 'languages', {
                    get: () => ['en-US', 'en'],
                });
                
                // Pass the Permissions Test
                const originalQuery = window.navigator.permissions?.query;
                if (originalQuery) {
                    window.navigator.permissions.query = (parameters) => (
                        parameters.name === 'notifications' ?
                        Promise.resolve({ state: Notification.permission }) :
                        originalQuery(parameters)
                    );
                }
            `);
            
            console.log(`chrome.ts :: Chrome :: addStealthScripts :: Stealth scripts added successfully`);
        } catch (error) {
            console.error(`chrome.ts :: Chrome :: addStealthScripts :: Error adding stealth scripts: ${error.message}`);
            // Don't throw, just log the error as this is non-critical
        }
    }

    async destroy(): Promise<boolean> {
        console.log(`chrome.ts :: Chrome :: destroy :: Starting cleanup process`);
        
        if (!this.context) {
            console.log(`chrome.ts :: Chrome :: destroy :: No active context to destroy`);
            return true;
        }
        
        try {
            // Close all pages gracefully
            const pages = this.context.pages();
            console.log(`chrome.ts :: Chrome :: destroy :: Closing ${pages.length} pages`);
            
            for (let i = 0; i < pages.length; i++) {
                try {
                    await pages[i].close();
                    console.log(`chrome.ts :: Chrome :: destroy :: Closed page ${i+1}/${pages.length}`);
                } catch (pageError) {
                    console.warn(`chrome.ts :: Chrome :: destroy :: Error closing page ${i+1}: ${pageError.message}`);
                    // Continue with other pages even if one fails
                }
            }
            
            // Close the browser context
            console.log(`chrome.ts :: Chrome :: destroy :: Closing browser context`);
            await this.context.close();
            
            // Reset state
            this.context = null;
            this.page = null;
            this.openedPages = 0;
            this.tryingToOpenPages = 0;
            
            console.log(`chrome.ts :: Chrome :: destroy :: Successfully cleaned up resources`);
            return true;
        } catch (error) {
            console.error(`chrome.ts :: Chrome :: destroy :: Failed to clean up: ${error.message}`);
            
            // Still reset our state in case of failure
            this.context = null;
            this.page = null;
            this.openedPages = 0;
            this.tryingToOpenPages = 0;
            
            return false;
        }
    }

    // #############################
    // #############################
    // #############################

    static async downloadFile(page: Page, url: string, filePath: string, waitTimeout: number = ChromeConstants.defaultDownloadWaitMs): Promise<boolean> {
        console.log(`chrome.ts :: Chrome :: downloadFile :: url -> ${url} , filePath -> ${filePath} `)
        return new Promise(async (resolve) => {
            try {
                page.evaluate((link) => {
                    function download(url, filename) {
                        fetch(url)
                            .then(response => response.blob())
                            .then(blob => {
                                const link = document.createElement("a");
                                link.href = URL.createObjectURL(blob);
                                link.download = filename;
                                link.click();
                            })
                            .catch(console.error);
                    }

                    download(link, "somefile.someext")
                }, url)

                const [download] = await Promise.all([
                    page.waitForEvent('download', { timeout: waitTimeout }),
                ]);

                await download.saveAs(filePath)
                await Chrome.waitForTimeout(page)
                resolve(true)
            } catch (e) {

                resolve(false)
            }
        })
    }

    static async downloadFileByButtonClick(page: Page, buttonSelector: string, filePath: string): Promise<boolean> {
        console.log(`chrome.ts :: Chrome :: downloadFileByButtonClick :: buttonSelector -> ${buttonSelector} , filePath -> ${filePath} `)
        return new Promise(async (resolve) => {
            try {
                const downloadPromise = page.waitForEvent('download');
                await page.click(buttonSelector)
                const download = await downloadPromise;

                await download.saveAs(filePath);
                await Chrome.waitForTimeout(page, {
                    maxTimeout: ChromeConstants.defaultDownloadWaitMs,
                })

                resolve(true)
            } catch (e) {

                resolve(false)
            }
        })
    }

    static async uploadFiles(page: Page, uploadButtonSelector: string, fileLocations: string | string[], wait: number = ChromeConstants.defaultUploadWaitMs) {
        console.log(`chrome.ts :: Chrome :: uploadFiles :: uploadButtonSelector -> ${uploadButtonSelector} , fileLocations -> ${fileLocations} `)
        const [fileChooser] = await Promise.all([
            page.waitForEvent('filechooser'),
            await Chrome.waitForTimeout(page),
            page.click(uploadButtonSelector),
        ]);

        await fileChooser.setFiles(fileLocations)
        await Chrome.waitForTimeout(page, {
            maxTimeout: wait,
        })
    }

    static async uploadFilesForced(page: Page, uploadButtonSelector: string, fileLocations: string | string[]) {
        console.log(`chrome.ts :: Chrome :: uploadFiles :: uploadButtonSelector -> ${uploadButtonSelector} , fileLocations -> ${fileLocations} `)
        const [fileChooser] = await Promise.all([
            page.waitForEvent('filechooser'),
            Chrome.waitForTimeout(page),
            page.click(uploadButtonSelector),
        ]);

        // await fileChooser.setFiles(fileLocations)
        for (var i = 0; i < fileLocations.length; i++) {
            await fileChooser.setFiles(fileLocations[i])
            // await page.waitForTimeout(500)
            await Chrome.waitForTimeout(page)
        }
        await Chrome.waitForTimeout(page, {
            maxTimeout: ChromeConstants.defaultUploadWaitMs,
        })
    }

    static async getCurrentHeightWidth(page: Page): Promise<{
        height: number;
        width: number;
    }> {
        console.log(`chrome.ts :: Chrome :: getCurrentHeightWidth :: `)
        const obj = await page.evaluate(() => {
            return {
                height: window.outerHeight,
                width: window.outerWidth,
            }
        })
        return obj
    }

    static async copyTextToClipboard(page: Page, text: string) {
        console.log(`chrome.ts :: Chrome :: copyTextToClipboard :: text -> ${text} `)
        await page.evaluate((text) => {
            navigator.clipboard.writeText(text)
        }, text)
        await Chrome.waitForTimeout(page)
    }

    static async gotoForce(page: Page, url: string, disableDownloads: boolean = false) {
        const retryCount = ChromeConstants.maxGotoRetries;
        let openingUrl = "";  // Declare openingUrl here
        let downloadDetected = false;  // Flag to detect if a download was triggered

        try {
            const currentLocation = await page.evaluate(() => window.location.href);

            if (currentLocation === url) {
                await Chrome.waitForTimeout(page);
                return;
            }

            if (disableDownloads) {
                // Listen for download events and cancel them
                page.on('download', async (download) => {
                    console.log(`Download detected and canceled: ${download.suggestedFilename()}`);
                    await download.cancel(); // Cancel the download
                    downloadDetected = true; // Set the flag to true
                });
            }

            const tryUrl = async (): Promise<boolean> => {
                try {
                    const response = await page.goto(url, {
                        timeout: 90 * 1000,
                        waitUntil: 'load',
                    });
                    const status = response.status();
                    console.log(`Chrome.ts :: Chrome :: tryUrl :: status -> ${status}`);

                    // Check if the page contains a specific timeout error message
                    if (await page.$('text="The connection has timed out"')) {
                        console.log(`Timeout error detected on the page: ${url}`);
                        return false;
                    }

                    await Chrome.waitForTimeout(page);
                    return true;
                } catch (e) {
                    console.log(`chrome.ts :: Chrome :: tryUrl :: e -> ${e}`);
                    return false;
                }
            };

            openingUrl = url;
            for (let i = 0; i < retryCount; i++) {
                if (downloadDetected) {
                    console.log(`chrome.ts :: Chrome :: gotoForce= :: Download detected, skipping URL -> ${url}`);
                    break;
                }

                const opened = await tryUrl();
                console.log(`chrome.ts :: Chrome :: gotoForce= :: url -> ${url} , opened -> ${opened} , i -> ${i}`);

                if (opened) {
                    openingUrl = "";
                    break;
                } else {
                    console.log(`chrome.ts :: Chrome :: gotoForce= :: Retrying... :: url -> ${url} , opened -> ${opened} , i -> ${i}`);
                    await Chrome.waitForTimeout(page);

                    if (i === retryCount - 1) {
                        console.log('Max retries reached. Issue persists.');
                    }
                }
            }

            if (!downloadDetected) {
                console.log(`chrome.ts :: Chrome :: gotoForce= :: url -> ${url} , openingUrl -> ${openingUrl} :: Success...`);
            }
            openingUrl = "";
        } catch (e) {
            console.log(`chrome.ts :: Chrome :: gotoForce= :: e -> ${e}`);
            console.log(`chrome.ts :: Chrome :: gotoForce= :: url -> ${url} , openingUrl -> ${openingUrl} :: Failed...`);
            openingUrl = "";
        }
    };

    static async scrollDown(page: Page, nTimes: number = 10, wait: number = ChromeConstants.defaultMaxWaitMs) {
        console.log(`chrome.ts :: Chrome :: scrollDown :: nTimes -> ${nTimes} , wait -> ${wait} `)
        for (var i = 0; i < nTimes; i++) {
            await page.evaluate(() => {
                window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' })
            })
            await page.waitForTimeout(wait)
        }
    }

    static async getCurrentPageUrl(page: Page) {
        const currentLocation = await page.evaluate(() => {
            return window.location.href
        })
        console.log(`chrome.ts :: Chrome :: getCurrentPageUrl :: currentLocation :: ${currentLocation}`)
        return currentLocation
    }

    static async setIphoneViewport(page: Page) {
        console.log(`chrome.ts :: Chrome :: setIphoneViewport :: `)
        originalViewport = page.viewportSize()
        await page.setViewportSize({
            width: 390,
            height: 844,
        })

        await page.reload()
        await page.waitForTimeout(100)
    }

    static async resetViewport(page: Page) {
        try {
            await page.setViewportSize(originalViewport)
        }
        catch (e) {
            //
        }

        await page.reload()
        await page.waitForTimeout(ChromeConstants.defaultMaxWaitMs)
    }

    static async tryClick(page: Page, selector: string, options?: {
        forceClick?: boolean,
    }) {
        console.log(`chrome.ts :: Chrome :: tryClick :: selector -> ${selector} , forceClick -> ${options?.forceClick} `)

        try {
            const element = await page.$(selector)
            await element.click({
                timeout: ChromeConstants.defaultButtonClickTimeout,
                delay: ChromeConstants.defaultButtonClickDelay,
                trial: true
            })
            await Chrome.waitForTimeout(page)
        }
        catch (e) {
            console.log(`Chrome.ts :: Chrome :: e -> `, e)
        }

        try {
            const element = await page.$(selector)
            await element.click({
                timeout: ChromeConstants.defaultButtonClickTimeout,
                delay: ChromeConstants.defaultButtonClickDelay,
                force: options?.forceClick,
            })
            await Chrome.waitForTimeout(page)
            return true
        }
        catch (e) {
            console.log(`Chrome.ts :: Chrome :: e -> `, e)
        }

        try {
            const clicked = await page.evaluate((selector) => {
                function getElement(sel) {
                    // Check if it's an XPath expression
                    if (sel.startsWith('//') || sel.startsWith('(//')) {
                        const result = document.evaluate(
                            sel,
                            document,
                            null,
                            XPathResult.FIRST_ORDERED_NODE_TYPE,
                            null
                        );
                        return result.singleNodeValue;
                    }
                    // Otherwise, assume it's a CSS selector
                    return document.querySelector(sel);
                }

                const element = getElement(selector);
                if (element) {
                    element.click();
                    return true
                } else {
                    throw new Error(`No element found for selector: ${selector}`);
                }
            }, selector);
            await Chrome.waitForTimeout(page)
            if (clicked) {
                return true
            }
        }
        catch (e) {
            console.log(`Chrome.ts :: Chrome :: e -> `, e);
        }

        return false
    }

    static async tryClickElement(page: Page, element: any, options?: {
        forceClick?: boolean,
    }) {

        try {
            await element.click({
                timeout: ChromeConstants.defaultButtonClickTimeout,
                delay: ChromeConstants.defaultButtonClickDelay,
                trial: true
            })
            await Chrome.waitForTimeout(page)

            await element.click({
                timeout: ChromeConstants.defaultButtonClickTimeout,
                delay: ChromeConstants.defaultButtonClickDelay,
                force: options?.forceClick,
            })
            await Chrome.waitForTimeout(page)

            console.log(`chrome.ts :: Chrome :: tryClick :: Success`)
            return true
        }
        catch (e) {
            console.log(`chrome.ts :: Chrome :: tryClick :: Failed`, e)
            return false
        }
    }

    static async waitForTimeout(page: Page, options?: {
        minTimeout?: number,
        maxTimeout?: number,
    }) {
        const min = options?.minTimeout ?? ChromeConstants.defaultMinWaitMs
        const max = options?.maxTimeout ?? ChromeConstants.defaultMaxWaitMs
        const timeoutt = getRandomInt(min, max)
        console.log(`chrome.ts :: Chrome :: waitForTimeout :: timeoutt -> ${timeoutt} `)
        await page.waitForTimeout(timeoutt)
    }

    static async forceTypeText(page: Page, selector: string, text: string, append: boolean = false): Promise<boolean> {
        console.log(`chrome.ts :: Chrome :: forceTypeText :: selector -> ${selector}, text -> ${text}`);

        try {
            // Wait for the element to be available
            await page.waitForSelector(selector, { timeout: ChromeConstants.defaultMaxWaitMs });

            // First, get the current text length to know how many backspaces we need
            const textLength = await page.evaluate((sel) => {
                // Find the element
                let el;
                if (sel.startsWith('//')) {
                    el = document.evaluate(sel, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
                } else {
                    el = document.querySelector(sel);
                }

                if (!el) return 0;

                // Find the contenteditable element
                const contentEditable = el.querySelector('[contenteditable="true"]') ||
                    el.querySelector('.public-DraftEditor-content') ||
                    el;

                // Get the text content
                const content = contentEditable.textContent || '';
                return content.length;
            }, selector);

            console.log(`chrome.ts :: Chrome :: forceTypeText :: Current text length: ${textLength}`);

            // Click to focus the element
            await page.click(selector, { force: true });
            await Chrome.waitForTimeout(page, { maxTimeout: 500 });

            // Press backspace for each character
            if (textLength > 0 && !append) {
                // Select all text first (more reliable than individual backspaces)
                await page.keyboard.down('Control');
                await page.keyboard.press('a');
                await page.keyboard.up('Control');
                await page.waitForTimeout(100);

                // Delete the selected text
                await page.keyboard.press('Backspace');
                await page.waitForTimeout(100);
            }

            // Type the new text with a small delay between characters
            // This helps ensure the text is entered correctly even if focus changes
            for (let i = 0; i < text.length; i++) {
                await page.keyboard.type(text[i], { delay: 10 });

                // Add a small pause every few characters to reduce the chance of missed keystrokes
                if (i % 5 === 0 && i > 0) {
                    await page.waitForTimeout(50);
                }
            }

            // Press Tab to ensure the text is committed
            await page.keyboard.press('Tab');

            console.log(`chrome.ts :: Chrome :: forceTypeText :: Successfully wrote text using keyboard events`);
            await Chrome.waitForTimeout(page);
            return true;
        } catch (e) {
            console.log(`chrome.ts :: Chrome :: forceTypeText :: Keyboard events approach failed -> `, e);
        }

        // Fallback: Try to use a combination of browser-side events and minimal Playwright interaction
        try {
            console.log(`chrome.ts :: Chrome :: forceTypeText :: Trying fallback approach`);

            // First, prepare the element in the browser context
            const prepared = await page.evaluate((sel) => {
                // Find the element
                let el;
                if (sel.startsWith('//')) {
                    el = document.evaluate(sel, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
                } else {
                    el = document.querySelector(sel);
                }

                if (!el) return false;

                // Find the contenteditable element
                const contentEditable = el.querySelector('[contenteditable="true"]') ||
                    el.querySelector('.public-DraftEditor-content') ||
                    el;

                // Focus and click the element
                contentEditable.focus();
                contentEditable.click();

                // Select all text
                const range = document.createRange();
                range.selectNodeContents(contentEditable);
                const selection = window.getSelection();
                selection.removeAllRanges();
                selection.addRange(range);

                return true;
            }, selector);

            if (!prepared) {
                console.log(`chrome.ts :: Chrome :: forceTypeText :: Failed to prepare element`);
                return false;
            }

            // Now use Playwright to delete selected text and type new text
            await page.keyboard.press('Backspace');
            await page.waitForTimeout(100);

            // Type the text with a delay
            await page.keyboard.type(text, { delay: 20 });

            console.log(`chrome.ts :: Chrome :: forceTypeText :: Successfully wrote text using fallback approach`);
            await Chrome.waitForTimeout(page);
            return true;
        } catch (e) {
            console.log(`chrome.ts :: Chrome :: forceTypeText :: Fallback approach failed -> `, e);
        }

        console.log(`chrome.ts :: Chrome :: forceTypeText :: All methods failed for selector: ${selector}`);
        return false;
    }

    static async forceTypeText2(page: Page, selector: string, text: string, append: boolean = false): Promise<boolean> {
        try {
            // Wait for the element to be available and click to focus it
            await page.waitForSelector(selector);
            await page.click(selector);
            await page.waitForTimeout(100); // Allow focus to settle

            // If not appending, clear the input by selecting all text and deleting it
            if (!append) {
                await page.keyboard.down('Control');
                await page.keyboard.press('a');
                await page.keyboard.up('Control');
                await page.waitForTimeout(100);
                await page.keyboard.press('Backspace');
                await page.waitForTimeout(100);
            }

            // Type the new text with a small delay between keystrokes
            await page.keyboard.type(text, { delay: 20 });

            // Optionally, press Tab to commit the change
            await page.keyboard.press('Tab');

            return true;
        } catch (error) {
            console.error('forceTypeText error:', error);
            return false;
        }
    }

}

import { Page } from "playwright"
import { Chrome } from "./Chrome"

export class Globals {
    private static chrome: Chrome = null
    private static firefox: Chrome = null
    private static initPage: Page = null
    private static secondPage: Page = null
    private static aiPage: Page = null
    private static initPageFF: Page = null
    private static secondPageFF: Page = null
    private static aiPageFF: Page = null

    public static getChrome = () => {
        if (this.chrome === null) {
            this.chrome = new Chrome({
                browser: "chrome",
                mode: "sessioned",
            })
        }
        return this.chrome
    }

    public static getFirefox = () => {
        if (this.firefox === null) {
            this.firefox = new Chrome({
                browser: "firefox",
                mode: "sessioned",
            })
        }
        return this.firefox
    }

    public static async destroyFirefox() {
        await this.firefox.destroy()
    }

    public static async destroyChrome() {
        await this.chrome.destroy()
    }

    public static getInitPage = async () => {
        if (this.initPage === null) {
            Globals.initPage = await this.getChrome().getNewPage()
        }
        return Globals.initPage
    }

    public static getSecondPage = async () => {
        if (this.secondPage === null) {
            Globals.secondPage = await this.getChrome().getNewPage()
        }
        return Globals.secondPage
    }

    public static getAiPage = async () => {
        if (this.aiPage === null) {
            Globals.aiPage = await this.getChrome().getNewPage()
        }
        return Globals.aiPage
    }

    public static getInitPageFF = async () => {
        if (this.initPageFF === null) {
            Globals.initPageFF = await this.getFirefox().getNewPage()
        }
        return Globals.initPageFF
    }

    public static getSecondPageFF = async () => {
        if (this.secondPageFF === null) {
            Globals.secondPageFF = await this.getFirefox().getNewPage()
        }
        return Globals.secondPageFF
    }

    public static getAiPageFF = async () => {
        if (this.aiPageFF === null) {
            Globals.aiPageFF = await this.getFirefox().getNewPage()
        }
        return Globals.aiPageFF
    }
}