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 bed 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 ments/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" ".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('/', function(status) {
page.includeJs(".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 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 bed 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 ments/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/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./', function(status) {
page.includeJs("http://ajax.googleapis./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: validator.w3/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 Commented Aug 13, 2014 at 15:34 -
if you make a manual submit, does
document.getElementById('TheAnswer');exist on the (next) page ? – birdspider Commented Aug 13, 2014 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 Commented Aug 13, 2014 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 Commented Aug 13, 2014 at 16:14
-
1
try this: add
debugger;at a convinient place in your file. then startphantomjs --remote-debugger-port=8889 <file>.js. Open chrome onlocalhost:8889- click the link, go to console and execute__run()- you should now be able to step through the script - starting a the line withdebugger; – birdspider Commented Aug 13, 2014 at 16:28
1 Answer
Reset to default 13Ok. 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 pletely 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.');
},
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 plete!");
phantom.exit();
}
}, 50);