Playwright中如何在iframe内执行JS函数插入reCAPTCHA验证值？

错误原因 #

你遇到的Property 'evaluate' does not exist in type 'FrameLocator'错误，是因为frameLocator.first()返回的是FrameLocator定位器，而非实际的Frame实例——只有Frame对象才拥有evaluate方法，FrameLocator只是用来定位iframe的工具，本身不具备执行页面脚本的能力。

解决方案 #

下面提供两种可行的修正方式，推荐第二种更符合Playwright最佳实践的写法：

方式1：获取实际Frame实例后调用evaluate #

把通过frameLocator.first()得到的定位器转为真实Frame对象，再执行evaluate：

let captchaKey: string;

await solver
    .recaptcha({
        pageurl: page.url(),
        googlekey: src,
        invisible: 1,
    })
    .then(async (res) => {
        captchaKey = res.data;

        // 先通过FrameLocator获取真实的Frame实例
        const frameLocator = page.frameLocator('table iframe[title="reCAPTCHA"]');
        const captchaFrame = await frameLocator.first().frame(); // 关键：调用frame()获取Frame对象

        if (captchaFrame) { // 增加空值判断，避免报错
            await captchaFrame.evaluate((key) => {
                const captchaInput = document.querySelector(
                    'textarea[name="g-recaptcha-response"]'
                ) as HTMLTextAreaElement;
                captchaInput.value = key;
            }, captchaKey);
        }

        await frameLocator.locator('#recaptcha-anchor > div.recaptcha-checkbox-border').click();
    })
    .catch((err) => {
        console.log(err);
    });

方式2：直接用FrameLocator定位元素并填充（推荐） #

Playwright的定位器支持跨iframe操作，不需要手动切换到iframe或调用evaluate，直接通过FrameLocator定位目标textarea并设置值，代码更简洁可靠：

let captchaKey: string;

await solver
    .recaptcha({
        pageurl: page.url(),
        googlekey: src,
        invisible: 1,
    })
    .then(async (res) => {
        captchaKey = res.data;

        const frameLocator = page.frameLocator('table iframe[title="reCAPTCHA"]');
        
        // 直接通过FrameLocator定位textarea并设置值
        await frameLocator.locator('textarea[name="g-recaptcha-response"]').fill(captchaKey);

        await frameLocator.locator('#recaptcha-anchor > div.recaptcha-checkbox-border').click();
    })
    .catch((err) => {
        console.log(err);
    });

额外提示 #

你原来代码中用frames[1]获取iframe的方式不可靠——页面中iframe的顺序可能会因页面结构变化而改变，建议始终用选择器通过frameLocator定位，保证稳定性。

内容的提问来源于stack exchange，提问作者Guilherme Vinicius