getBoundingClientRect()会导致javascript崩溃

Question

所以我试图在我的phantom.js

中使用以下代码从页面上抓取captcha图像

if(page.content.search('captcha') != -1){
    console.log('taking a picture')
    var clipRect = document.querySelector("img[id='auth-captcha-image']").getBoundingClientRect();
    console.log('got bounds')
    page.clipRect = {
        top:    clipRect.top,
        left:   clipRect.left,
        width:  clipRect.width,
        height: clipRect.height
    };
    page.render('capture.png');
  }

正如你所看到的，它非常直接。获取元素，获取剪辑到元素的边界，然后截取渲染的屏幕截图。

现在当我执行

document.querySelector("img[id='auth-captcha-image']").getBoundingClientRect()

在Google chrome控制台中它返回这个

ClientRect {top: 430, right: 621, bottom: 500, left: 421, width: 200…}

然而，在我的javascript代码中，它似乎正在产生某种我无法捕获的错误。当我删除后缀"。getboundingclientrect()"时，代码开始工作。(显然，我必须为clipRect尺寸添加虚拟值)。

我不太明白它是如何崩溃的，甚至如何看到崩溃的堆栈跟踪/错误信息…

任何帮助将是惊人的由于

Answer 1

任何与目标页面的DOM有关的javascript都必须在page.evaluate()函数中执行。

var clipRect = page.evaluate(function(){
    return document.querySelector("img[id='auth-captcha-image']").getBoundingClientRect();
});