javascript css-selectors casperjs reddit

Use CasperJS/Javascript to submit a form?

Here is a snippet from my code:

this.sendKeys('.usertext.cloneable > div > div.md > textarea', "Message");
//...    
this.evaluate(function(){
    var entry = document.getElementsByClassName("usertext cloneable")[0].id;
    document.getElementById(entry).removeAttribute("action")
    document.querySelector('#'+entry).submit()
})

This code is supposed to submit a form found on a site (Reddit.com) after filling it in with sendKeys. It accomplishes filling out the text box (I can see with a screenshot through casper.capture) but doesn't submit the text. I originally believed this was because of a faulty CSS selector, but I'm no longer certain. It also seemed Casper was not sending the form because of the action='#' attribute, so it was removed before submitting the form. I'm at a loss as to what to try next.

And the form:

<form action="#" class="usertext cloneable" onsubmit="return post_form(this, 'comment')" id="form-t3_3gp8yji5i">
    <input type="hidden" name="thing_id" value="t3_3gp8yj">
        <div class="usertext-edit md-container" style="">
            <div class="md">
                <textarea rows="1" cols="1" name="text" class=""></textarea>
            </div>
            <div class="bottom-area">
                <span class="help-toggle toggle" style="">
                    <a class="option active " href="#" tabindex="100" onclick="return toggle(this, helpon, helpoff)">formatting help</a>
                    <a class="option " href="#">hide help</a>
                </span>
                <a href="/wiki/reddiquette" class="reddiquette" target="_blank" tabindex="100">reddiquette</a>
                <span class="error TOO_LONG field-text" style="display:none"></span>
                <span class="error RATELIMIT field-ratelimit" style="display:none"></span>
                <span class="error NO_TEXT field-text" style="display:none"></span>
                <span class="error TOO_OLD field-parent" style="display:none"></span>
                <span class="error DELETED_COMMENT field-parent" style="display:none"></span>
                <span class="error DELETED_LINK field-parent" style="display:none"></span>
                <span class="error USER_BLOCKED field-parent" style="display:none"></span>
                <div class="usertext-buttons">
                    <button type="submit" onclick="" class="save">save</button>
                    <button type="button" onclick="cancel_usertext(this)" class="cancel" style="display:none">cancel</button>
                    <span class="status"></span>
                </div>
            </div>
            <div class="markhelp" style="display:none">
                <p></p>
                <p>reddit uses a slightly-customized version of <a href="http://daringfireball.net/projects/markdown/syntax">Markdown</a> for formatting. See below for some basics, or check <a href="/wiki/commenting">the commenting wiki page</a> for more detailed help and solutions to common issues.
                </p>

Here are the reported errors:

Console: Unsafe JavaScript attempt to access frame with URL https://www.reddit.com/ from frame with URL https://static.adzerk.net/reddit/ads.html?sr=-reddit.com,loggedin&bust2#https://www.reddit.com. Domains, protocols and ports must match.

Console: Unsafe JavaScript attempt to access frame with URL https://www.reddit.com/r/Pokemon_adventures/comments/3gp8yj/test_post_please_ignore/?thing_id=t3_3gp8yj&text=%22jnjrkefejkn%22 from frame with URL https://static.adzerk.net/reddit/ads.html?sr=pokemon_adventures,loggedin&bust2#https://www.reddit.com. Domains, protocols and ports must match.

Console: Unsafe JavaScript attempt to access frame with URL https://www.reddit.com/r/Pokemon_adventures/comments/3gp8yj/test_post_please_ignore/?thing_id=t3_3gp8yj&text=Message from frame with URL https://static.adzerk.net/reddit/ads.html?sr=pokemon_adventures,loggedin&bust2#https://www.reddit.com. Domains, protocols and ports must match.

Solution

Since the errors that you got don't have anything to do with the form submission, you can try the following things:

Use the CasperJS facility to submit a form. Use
```
this.fill(".usertext.cloneable", {}, true);
```
instead of this.evaluate(...);.

Use the CasperJS facility to click on a button:

this.click(".usertext.cloneable button[type='submit']");

If that didn't help, then you can try the same thing with running CasperJS with the --web-security=false --ssl-protocol=any --ignore-ssl-errors=true commandline options.