javascript - Sending http headers in form submission CasperJS - Stack Overflow

admin管理员组

文章数量:1026989

I have a test step with CasperJS that does the following:

this.fillSelectors("#registration-form", {
    "#first-name": "Bob",
    "#last-name": "Smith",
    "#email-address": RANDOM_EMAIL,
    "#password": PASSWORD,
    "#password-confirm": PASSWORD
}, true);

I want to be able to send a HTTP header along with this. I can't seem to find a way of doing this without "manually" posting the form, which isn't the kind of test I want here.

I have a test step with CasperJS that does the following:

this.fillSelectors("#registration-form", {
    "#first-name": "Bob",
    "#last-name": "Smith",
    "#email-address": RANDOM_EMAIL,
    "#password": PASSWORD,
    "#password-confirm": PASSWORD
}, true);

I want to be able to send a HTTP header along with this. I can't seem to find a way of doing this without "manually" posting the form, which isn't the kind of test I want here.

• javascript
• http-headers
• phantomjs
• form-submit
• casperjs

Share Improve this question Follow edited Jan 13, 2016 at 14:24 Artjom B. 62k2626 gold badges136136 silver badges231231 bronze badges asked Jun 17, 2014 at 16:11 Chris JamesChris James 11.7k1212 gold badges6363 silver badges9090 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

There is an easier way than the one below. You can access the casper.page.customHeaders property of PhantomJS' Webpage instance.

casper.then(function() {
    casper.page.customHeaders = {
        "CuStOm": "Header"
    }; // set headers
    this.fillSelectors("#registration-form", { /*...*/ }, true);
});

casper.then(function() {
    casper.page.customHeaders = {}; // reset headers
});

The problem is that this method will add your custom header to every request until you disable it again. You can experiment with resetting headers based on setTimeout or directly behind fillSelectors.

---

You cannot set headers for a form submission in the browser. __utils__.sendAJAX also doesn't provide custom headers.

You will need to use XMLHttpRequest to send the request. The following function replaces the submit handler of the form to send the Ajax call and also waits:

casper.thenFormToXHR = function(formSelector, data, customHeaders){
    this.thenEvaluate(function(formSelector, customHeaders){
        // see https://stackoverflow./a/19838177/1816580
        function submitForm(oFormElement) {
            window.__requestDone = false;
            var xhr = new XMLHttpRequest();
            for(var header in customHeaders) {
                xhr.setRequestHeader(header, customHeaders[header]);
            }
            xhr.onload = function(){
                window.__requestDone = true;
            };
            xhr.open (oFormElement.method, oFormElement.action, true);
            xhr.send (new FormData(oFormElement));
            return false;
        }
        document.querySelector(formSelector).onsubmit = submitForm;
    }, formSelector, customHeaders);
    this.then(function(){
        this.fillSelectors(formSelector, data, true);
    });
    this.waitFor(function check(){
        return this.evaluate(function(){
            return window.__requestDone;
        });
    });
};

You can then invoke like this:

casper.thenFormToXHR("#registration-form", {
    "#first-name": "Bob",
    "#last-name": "Smith",
    "#email-address": RANDOM_EMAIL,
    "#password": PASSWORD,
    "#password-confirm": PASSWORD
}, {
    "X-Requested-With": "XMLHttpRequest" // here should be your custom headers
});

The code can be reduced, if you don't need to wait for the XHR pletion:

casper.formToXHR = function(formSelector, data, customHeaders){
    this.evaluate(function(formSelector, customHeaders){
        // see https://stackoverflow./a/19838177/1816580
        function submitForm(oFormElement) {
            var xhr = new XMLHttpRequest();
            for(var header in customHeaders) {
                xhr.setRequestHeader(header, customHeaders[header]);
            }
            xhr.open (oFormElement.method, oFormElement.action, true);
            xhr.send (new FormData(oFormElement));
            return false;
        }
        document.querySelector(formSelector).onsubmit = submitForm;
    }, formSelector, customHeaders);
    this.fillSelectors(formSelector, data, true);
};

I have a test step with CasperJS that does the following:

this.fillSelectors("#registration-form", {
    "#first-name": "Bob",
    "#last-name": "Smith",
    "#email-address": RANDOM_EMAIL,
    "#password": PASSWORD,
    "#password-confirm": PASSWORD
}, true);

I want to be able to send a HTTP header along with this. I can't seem to find a way of doing this without "manually" posting the form, which isn't the kind of test I want here.

I have a test step with CasperJS that does the following:

this.fillSelectors("#registration-form", {
    "#first-name": "Bob",
    "#last-name": "Smith",
    "#email-address": RANDOM_EMAIL,
    "#password": PASSWORD,
    "#password-confirm": PASSWORD
}, true);

I want to be able to send a HTTP header along with this. I can't seem to find a way of doing this without "manually" posting the form, which isn't the kind of test I want here.

• javascript
• http-headers
• phantomjs
• form-submit
• casperjs

Share Improve this question Follow edited Jan 13, 2016 at 14:24 Artjom B. 62k2626 gold badges136136 silver badges231231 bronze badges asked Jun 17, 2014 at 16:11 Chris JamesChris James 11.7k1212 gold badges6363 silver badges9090 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

There is an easier way than the one below. You can access the casper.page.customHeaders property of PhantomJS' Webpage instance.

casper.then(function() {
    casper.page.customHeaders = {
        "CuStOm": "Header"
    }; // set headers
    this.fillSelectors("#registration-form", { /*...*/ }, true);
});

casper.then(function() {
    casper.page.customHeaders = {}; // reset headers
});

The problem is that this method will add your custom header to every request until you disable it again. You can experiment with resetting headers based on setTimeout or directly behind fillSelectors.

---

You cannot set headers for a form submission in the browser. __utils__.sendAJAX also doesn't provide custom headers.

You will need to use XMLHttpRequest to send the request. The following function replaces the submit handler of the form to send the Ajax call and also waits:

casper.thenFormToXHR = function(formSelector, data, customHeaders){
    this.thenEvaluate(function(formSelector, customHeaders){
        // see https://stackoverflow./a/19838177/1816580
        function submitForm(oFormElement) {
            window.__requestDone = false;
            var xhr = new XMLHttpRequest();
            for(var header in customHeaders) {
                xhr.setRequestHeader(header, customHeaders[header]);
            }
            xhr.onload = function(){
                window.__requestDone = true;
            };
            xhr.open (oFormElement.method, oFormElement.action, true);
            xhr.send (new FormData(oFormElement));
            return false;
        }
        document.querySelector(formSelector).onsubmit = submitForm;
    }, formSelector, customHeaders);
    this.then(function(){
        this.fillSelectors(formSelector, data, true);
    });
    this.waitFor(function check(){
        return this.evaluate(function(){
            return window.__requestDone;
        });
    });
};

You can then invoke like this:

casper.thenFormToXHR("#registration-form", {
    "#first-name": "Bob",
    "#last-name": "Smith",
    "#email-address": RANDOM_EMAIL,
    "#password": PASSWORD,
    "#password-confirm": PASSWORD
}, {
    "X-Requested-With": "XMLHttpRequest" // here should be your custom headers
});

The code can be reduced, if you don't need to wait for the XHR pletion:

casper.formToXHR = function(formSelector, data, customHeaders){
    this.evaluate(function(formSelector, customHeaders){
        // see https://stackoverflow./a/19838177/1816580
        function submitForm(oFormElement) {
            var xhr = new XMLHttpRequest();
            for(var header in customHeaders) {
                xhr.setRequestHeader(header, customHeaders[header]);
            }
            xhr.open (oFormElement.method, oFormElement.action, true);
            xhr.send (new FormData(oFormElement));
            return false;
        }
        document.querySelector(formSelector).onsubmit = submitForm;
    }, formSelector, customHeaders);
    this.fillSelectors(formSelector, data, true);
};

本文标签： javascriptSending http headers in form submission CasperJSStack Overflow