我正在尝试构建一个自动化的Puppeteer脚本，以从我的银行网站下载每月的银行交易。
但是，我遇到一个奇怪的错误（有关此行为的图片，请参见附件Imgur）
问题：querySelector在明显可见的DOM元素上返回null：
屏幕截图：https://imgur.com/d540E6p
（1）用户名输入框在网站（https://internet.ocbc.com/internet-banking/）上清晰可见，
（2）但是，当我运行document.querySelector('#access-code')时，控制台返回null。
我想知道为什么会这样，并且在什么情况下，当DOM节点清晰可见时，浏览器会在querySelector(#id) query上返回null。
＃编辑：有效的奇怪解决方法：
我一直在使用浏览器，并使用DevTools检查DOM元素并将其用于复制JS路径。
很奇怪，在使用Chrome Devtools复制JS路径后，document.querySelector('#access-code')返回了正确的元素。
返回正确元素的屏幕截图：https://imgur.com/a/rSwCAxj
在两种情况下，document.querySelector使用完全相同的搜索字符串。
答案 0 :(得分：0)
我相信您无法使用document.querySelector('#access-code')获得适当的价值，因为网站使用框架集。
网站上有一个带有src的框架来加载内容
<frame src="/internet-banking/Login/Login">
在加载主文档时执行DOMContentLoading，而不等待框架内容被加载。
首先，您需要具有用于加载事件的侦听器。
window.addEventListener("load",function() {
...
});
后来您不能简单地使用document.querySelector('#access-code')
因为输入想要获取的是内部框架。您将需要找到一种访问框架内容的方法，然后在其中使用简单的querySelector。
类似这样：
window.addEventListener("load",function() {
console.log(window.frames[0].document.querySelector('#access-code'));
});
顺便说一句，请参阅：view-source：https://internet.ocbc.com/internet-banking/似乎网站主要是在客户端渲染的。