Python Playwright执行JS赋值iframe隐藏input报错如何解决

报错是DOM操作上下文不对导致的：

• iframe是和顶层页面完全隔离的独立文档环境，你直接调用page.evaluate()是在顶层页面的document里找id为tc-answer的元素，当然返回null，给null对象的value属性赋值就会抛出你看到的类型错误。
• 你在浏览器控制台能跑通，是因为开发者工具控制台顶部可以切换执行上下文，你调试的时候大概率已经手动切到了目标iframe的上下文，所以能正常查到元素；Playwright默认执行上下文是顶层页面，和你没切iframe时的控制台环境完全一致，查不到元素很正常。

• 先定位目标iframe对应的上下文：可以通过iframe的id、name属性、加载的URL特征，或者其他CSS定位规则匹配到目标iframe。
• 切换到iframe上下文后再执行DOM赋值操作，不要在顶层page上下文直接查询内部元素。

参考代码：

# 括号内替换为你目标iframe的定位器，比如#iframe-id、[name="verify-frame"]这类选择器都可以
target_frame = page.frame_locator("#your-target-iframe-selector")

# 隐藏input无法直接用fill方法赋值的话，就在iframe上下文执行evaluate
target_frame.evaluate("""(answerVal) => {
    const input = document.getElementById('tc-answer')
    input.value = answerVal
    // 如果页面有值变更监听，手动触发事件避免逻辑不生效
    input.dispatchEvent(new Event('input', {bubbles: true}))
    input.dispatchEvent(new Event('change', {bubbles: true}))
}""", answer)

注意：如果iframe是动态渲染加载的，frame_locator会自动等待iframe加载完成，不需要手动加固定sleep等待。

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