PhantomJS and clicking a form button

Question

I have a very simple HTML form that I'm attempting to test with various kinds of data. I wrote a prototype proof-of-concept in MS Access/VBA using the IE object. It worked fine but the finished testing product has to use PhantomJS. I've got the page-interfacing to work and the form is populating just fine. Where I'm stuck is getting the submit button to fire. I've combed through S.O. and tried all suggestions and nothing is working. I'm using PhantomJS 1.9.7 and using straight JavaScript test scripts.

I tried various JavaScript techniques to fire the submit button. To satisfy the "Just use JQuery" crowd, I tried that too. Nothing is working. When I render the form at the end of the test script, I see the form populated with data patiently waiting for the <search> button to be clicked.

Here's a summary of what I tried:

document.getElementById('btnSearch').click();
$("btnSearch").click();
var el = document.getElementById('btnSearch'); // Get search button object
$(el).click();
document.getElementById('Form1').submit();
Tried creating a click event and firing it from the button object (in the code below)
Tried creating a click event and firing it from the body object with the coordinates of a point inside the button in question

Here's the form: (And please, no comments/debates on the lack of CSS, use of tables, etc. I have no say or influence over the people who created the site.)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<HTML>
    <HEAD>
        <title>Da Site</title>
    </HEAD>
    <body>
    <form name="Form1" method="post" action="Default.aspx" id="Form1">
    <TABLE id="Table2" cellSpacing="2" cellPadding="1" border="0">
      <TR>
        <TD>Street Address:</TD>
        <TD><input name="Address" type="text" maxlength="100" id="Address" /></TD>
      </TR>
      <TR>
        <TD>City:</TD>
        <TD><input name="City" type="text" maxlength="100" id="City" style="width:232px;"/></TD>
      </TR>
      <TR>
        <TD>State:</TD>
        <TD><select name="State" id="State">
                    <option value=""></option>
                    <option value="AL">AL - Alabama</option>
                    <option value="AK">AK - Alaska</option>
                    [The rest of the other states]
                    <option value="WI">WI - Wisconsin</option>
                    <option value="WY">WY - Wyoming</option>
                    <option value="PR">PR - Puerto Rico</option>
            </select>
        </TD>
      </TR>
      <TR>
        <TD>Zip Code:</TD>
        <TD><input name="ZipCode" type="text" maxlength="5" id="ZipCode" /></TD>
      </TR>
      <tr>
        <td><input type="submit" name="btnSearch" value="Search" id="btnSearch" />
            <input type="submit" name="btnReset" value="Reset" id="btnReset" />
        </td>
      </tr>
    </TABLE>
    </form>
    </body>
</HTML>

Here's the JavaScript to drive the form:

var maxtimeOutMillis = 3000;
var start;
var finish;

var page = require('webpage').create();

// Route "console.log()" calls from within the Page context to the main Phantom context (i.e. current "this")
page.onConsoleMessage = function(msg) {
                                      console.log(msg);
                                      };

page.open('http://www.MadeUpURL.com/', function(status) {

  page.includeJs("http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js", function() {

  if (status !== 'success') {
    console.log('Unable to access network');
  } else {
         page.render('before.png');  // Renders the blank form
         page.evaluate(
              function () {
                          // page.render('Sample.png');
                          document.getElementById('Address').value = '123 Somewhere Drive';
                          document.getElementById('City').value = 'Somewhere';
                          document.getElementById('State').selectedIndex = 36;
                          document.getElementById('ZipCode').value = '12345';

         // I've done a page.render() here and it shows the form fully and correctly populated

                          // Now let's submit the form...
                          var el = document.getElementById('btnSearch');   // Get the "search" button object

                          // Tried the usual suspects
                          document.getElementById('btnSearch').click();
                          $("btnSearch").click();
                          $(el).click();
                          document.getElementById('Form1').submit();

                          // Tried creating a click event and firing it from the button object
                          var ev = document.createEvent("MouseEvent");
                          ev.initMouseEvent("click",
                                            true /* bubble */,
                                            true /* cancelable */,
                                            window,
                                            null,
                                            0, 0, 0, 0, /* coordinates */
                                            false, false, false, false, /* modifier keys */
                                            0 /*left click*/,
                                            null);
                          el.dispatchEvent(ev);

                          // Tried calculating the location of the button itself (which works) and fire the click event from the <Body> object
                          var obj = document.getElementById('btnSearch');
                          var x = obj.offsetLeft;
                          var y = obj.offsetTop;

                          while (obj.offsetParent) {
                            x = x + obj.offsetParent.offsetLeft;
                            y = y + obj.offsetParent.offsetTop;
                            if (obj == document.getElementsByTagName("body")[0])
                              {
                                break;
                              }
                              else
                              {
                                obj = obj.offsetParent;
                              }
                            }

                          x = x + 5; // Tried with and without this +5 delta
                          y = y + 5; // Tried with and without this +5 delta

                          console.log('X = ' + x);
                          console.log('Y = ' + y);

                          var ev = document.createEvent("MouseEvent");
                          ev.initMouseEvent("click",
                                            true /* bubble */,
                                            true /* cancelable */,
                                            window,
                                            null,
                                            0, 0, x, y, /* coordinates */
                                            false, false, false, false, /* modifier keys */
                                            0 /*left click*/,
                                            null);
                          document.body.dispatchEvent(ev);

                          });
         start = new Date().getTime();
         finish = new Date().getTime();
         console.log('Time before: ' + start);
         // Check to see if results are defined (or times out)
         while ( (finish - start < maxtimeOutMillis) &&  !( page.evaluate( function() {return document.getElementById('TheAnswer');})))
           {
           finish = new Date().getTime();
           }
         console.log('Time after: ' + finish);
         if ( page.evaluate( function() {return document.getElementById('TheAnswer');}))
           {
           console.log(page.evaluate( function() {return document.getElementById('TheAnswer').textContent;}));
           }
         else
           {
           console.log('Element not defined');
           }
         }
  page.render('after.png');
  phantom.exit();

  });

});

I'm hoping this is one of those you-forgot-a-semicolon kind of things, but I just don't see it. Any help would be very much appreciated!

Edit #1: Adding the script output for reference.

C:\Temp\WebAutomation\PhantomJS\scripts>phantomjs interact.js
X = 151
Y = 442
Time before: 1407875912197   [edit #2 - change before/after labels to match code]
Time after: 1407875915197
Element not defined
C:\Temp\WebAutomation\PhantomJS\scripts>

I know I know, not yours BUT: http://validator.w3.org/check says that in xhtml strict `element X undefined: upper-case tags in XHTML (in XHTML attributes and elements must be all lower-case)` — birdspider, Aug 13 '14 at 15:34
if you make a manual submit, does `document.getElementById('TheAnswer');` exist on the (next) page ? — birdspider, Aug 13 '14 at 15:41
@Artjom: Good catch - the I changed the "got here" to "time before" and "and here" to "time after. I'll make the appropriate edits... — Jim M, Aug 13 '14 at 16:11
@Birdspider: when you say "manual submit", what do you mean? If I load the webpage in a proper browser and put an address in and click the Search button, then the page loads various data including "TheAnswer". That's my hold-up here. I can't get PhantomJS to submit the form via button-clicking or a straight-up form.submit() — Jim M, Aug 13 '14 at 16:14
try this: add `debugger;` at a convinient place in your file. then start `phantomjs --remote-debugger-port=8889 .js`. Open chrome on `localhost:8889` - click the link, go to console and execute `__run()` - you should now be able to step through the script - starting a the line with `debugger`; — birdspider, Aug 13 '14 at 16:28

score 13 · Accepted Answer · edited May 23 '17 at 12:02

Ok. I think I figured it out. I directed PhantomJS and my script to a website where I could monitor the data on the back-end. To my surprise, the button was being clicked. I just couldn't see the results.

Courtesy of this post from Vinjay Boyapati, the problem appears to have more to do with page handlers and sequencing. It seems that the best way to handle page transitions in PhantomJS is to initiate the page cycle (click on a submit button, a link, etc.) and exit that JS evaluate function. After checking PhantomJS to make sure the page had completely loaded and was stable, call another page.evaluate and look for whatever you expected to find when the browser fetched back the results of your submission. Here's the code that I copied/modified from Vinjay's post:

Edit: One thing to draw particular attention to. For each page.Evaluates() where jQuery is needed, I'm adding the page.injectJs("jquery1-11-1min.js"); line. Otherwise I would get "$ is undefined" as a page error.

var page = require('webpage').create();
var loadInProgress = false;
var testindex = 0;

// Route "console.log()" calls from within the Page context to the main Phantom context (i.e. current "this")
page.onConsoleMessage = function(msg) {
    console.log(msg);
};

page.onAlert = function(msg) {
    console.log('alert!!> ' + msg);
};

page.onLoadStarted = function() {
    loadInProgress = true;
    console.log("load started");
};

page.onLoadFinished = function(status) {
    loadInProgress = false;
    if (status !== 'success') {
        console.log('Unable to access network');
        phantom.exit();
    } else {
        console.log("load finished");
    }
};

var steps = [
    function() {
        page.open('http://www.MadeUpURL.com');
    },

    function() {
        page.injectJs("jquery1-11-1min.js");
        page.evaluate(function() {
            document.getElementById('Address').value = '302 E Buchtel Avenue'; //University of Akron if you're wondering
            document.getElementById('City').value = 'Akron';
            document.getElementById('State').selectedIndex = 36;
            document.getElementById('ZipCode').value = '44325';
            console.log('JQ: ' + $().jquery);
            $('#btnSearch').click();
            console.log('Clicked');
        });
    },
    function() {
        console.log('Answers:');
        page.injectJs("jquery1-11-1min.js");
        page.render('AnswerPage.png');
        page.evaluate(function() {
            console.log('The Answer: ' + document.getElementById('TheAnswer').innerHTML);
            $('#buttonOnAnswerPage').click(); // This isn't really necessary unless you need to navigate deeper
            console.log('Sub button clicked');
        });
    },
    function() {
        console.log('More Answers:'); // This function is for navigating deeper than the first-level form submission
        page.render('MoreAnswersPage.png');
        page.evaluate(function() {
            console.log('More Stuff: ' + document.body.innerHTML);
        });
    },
    function() {
        console.log('Exiting');
    }
];

interval = setInterval(function() {
    if (!loadInProgress && typeof steps[testindex] == "function") {
        console.log("step " + (testindex + 1));
        steps[testindex]();
        testindex++;
    }
    if (typeof steps[testindex] != "function") {
        console.log("test complete!");
        phantom.exit();
    }
}, 50);

Thanks. I had some error. After some searching I found out that it's better to put the delay to 500 instead of 50. Was just a very quick and dirty solution for me. — Ernst Robert, Nov 24 '15 at 23:36
I know it being long, but I want to Ask, is this even works with JS click even without need for jQuery style. — Salem, Dec 14 '22 at 09:41
@Salem Yes, I believe so. The jquery reference is necessary for the site I was working with at the time. It has nothing to do with the technique or solution. — Jim M, Dec 15 '22 at 16:58

PhantomJS and clicking a form button

1 Answers1

Linked