getBoundingClientRect（）导致javascript崩溃？

Question

So I am trying to scrape a captcha image off a page using the following code within my phantom.js

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');
  }

As you can see its pretty straight forward. Get the element, get clip to the bounds of the element and then take a screenshot of the render.

Now when I execute

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

within the google chrome console it returns this.

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

However within my javascript code it seems to be producing some sort of error that I cannot catch. When I remove the suffix ".getBoundingClientRect()" the code starts working. (obviously I have to add dummy values in for the clipRect dimensions).

I dont quite understand how it is crashing and how to even see the stacktrace/error message of the crash..

Any help would be amazing Thanks

Answer 1

Any and all javascript that has to do with the target page's DOM must be executed inside page.evaluate() function.

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