PhantomJS/SlimerJS don't find elements through document.querySelector()

For some reason querySelector and get element by class are returning null on elements that exist.

PhantomJS/SlimerJS

page.open('file:///Users/yeahsame/Desktop/index.html', function(status)
{
    console.log("Starting execution");
    document.querySelector("input")[0].value = "not working whatsoever";

    phantom.exit();
});

HTML:

<!doctype html>
<body>
    <input class="form-control email input-lg"></input>
    <button class="btn" onclick="location.href='notexist.html'">submit</button>
</body>

Run in slimerjs returns "document.querySelector(...) is null"

Solution

PhantomJS/SlimerJS have two contexts. The inner page (DOM) context is only accessible through the sandboxed page.evaluate() function. There exists a document object outside of it, but it doesn't have access to the page DOM.

page.open('file:///Users/yeahsame/Desktop/index.html', function(status)
{
    console.log("Starting execution");
    page.evaluate(function(selector, value){
        document.querySelector(selector)[0].value = value;
    }, "input", "not working whatsoever");

    page.render("screenshot.png");
    phantom.exit();
});

Code inside of page.evaluate() doesn't have access to variables defined outside, so the values have to be explicitly passed in.