Phantomjs and HTML 5 event with a click and submit form

Question

I am trying to create a phantom script to automate testing of the following form:

https://travel.tescobank.com/

My script correctly fills in the required fields and then clicks the button that should submit the form, unfortunately, no matter what I tried, it will not present the form and will not display the next page.

I confirmed that clicking on the button starts, because without filling in the required fields, I see on the screenshot of the page that the check performed. (see screenshot attached)

I have commented below on all the click / submit options that I tried, and the one that appears to trigger the form validation but not submitting the form and not displaying the next page.

var page = require('webpage').create(); page.open("https://travel.tescobank.com/", function(status) { var currentLocation = page.evaluate(function() { return window.location.href; }); // click the button for single trip var tripType = page.evaluate(function() { var trip = $("#single-trip-radio").trigger("click"); return (trip != null); }); // enter value in dropdown var countrySearch = page.evaluate(function() { var country = $("#countrySearch").val("France"); return (country != null); }); var datePickerOne = page.evaluate(function() { var datePicker1 = $("#stFromdate").val("01-11-2017"); return $("#stFromdate"); }); var datePickerTwo = page.evaluate(function() { var datePicker2 = $("#stTodate").val("08-11-2017"); return $("#stTodate").val(); }); var numberOfTravellers = page.evaluate(function() { var number = $("#couple").trigger("click"); return $("#couple").val(); }); var firstName = page.evaluate(function() { var fname = $("#fName").val("Test"); return $("#fName").val(); }); var secondName = page.evaluate(function() { var sname = $("#sName").val("Test"); return $("#sName").val(); }); var dateOfBirth = page.evaluate(function() { var dob = $("#phDOB").val("11-10-1977"); return $("#phDOB").val(); }); var dateOfBirth2 = page.evaluate(function() { var dob2 = $("#ydob1").val("11-10-1977"); return $("#ydob1").val(); }); var postcode = page.evaluate(function() { var pc = $("#postcode").val("SS1 2AA"); return $("#postcode").val(); }); var email = page.evaluate(function() { var em = $("#emailaddr").val(" [e-mail] "); return $("#emailaddr").val(); }); //various attempts to submit the form //var submitForm = page.evaluate(function() { //does not submit //$("#aboutYouForm").submit(); //does not submit //var elementPosition = $("#aboutYouSubmit").offset(); //page.sendEvent('click', elementPosition.left + 1, elementPosition.top + 1); //does not submit //return $("#aboutYouSubmit").val(); //}); // this click on the button does fire the form validation but doesn't seem to submit the form var submitForm = page.evaluate(function() { var theForm = $("#aboutYouSubmit").trigger("click"); return (theForm != null); } } 

I don’t see that there are errors due to which it should not send the form correctly, it just remains on one screen without any validation errors, as far as I can see from the output. Any help appreciated.

Answer 1

I made some changes to your script that allowed it to successfully submit the page (however, the quote could not be created at the time , probably because of all these test values?).

I am sure that things like error control and viewport size are present in your script, but for the training of other readers I will keep them in response.

Here's a working script with notes:

 var page = require('webpage').create(); var screenshotNum = 1; page.viewportSize = { width: 1366 , height: 768 }; page.settings.userAgent = 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.106 Safari/537.36'; page.onConsoleMessage = function(msg, lineNum, sourceId) { console.log('CONSOLE: ' + msg + ' (from line #' + lineNum + ' in "' + sourceId + '")'); }; // We always need to be aware of any and all errors // happening on the target page. Most of the time here lies the answer page.onError = function(msg, trace) { var msgStack = ['ERROR: ' + msg]; if (trace && trace.length) { msgStack.push('TRACE:'); trace.forEach(function(t) { msgStack.push(' -> ' + t.file + ': ' + t.line + (t.function ? ' (in function "' + t.function +'")' : '')); }); } console.error(msgStack.join('\n')); }; // This fires every time a new page is loaded // If a form has been sent this will show the URL of success/fail page page.onLoadFinished = function(){ var url = page.evaluate(function(){ return document.location.href; }); console.log(url); // And every time a page is loaded we'll make a screenshot // to make sure everything goes according to our expectations page.render("travel-" + screenshotNum++ + ".jpg"); // It we've moved to another page, it means the form was sent // So let exit if(url != 'https://travel.tescobank.com/') { phantom.exit(); } }; page.open("https://travel.tescobank.com/", function(status) { // Let wait a bit before filling fields in, so that // any javascript on the page will have time to kick in setTimeout(fillFields, 2000); }); function fillFields() { // click the button for single trip var tripType = page.evaluate(function() { var trip = $("#single-trip-radio").trigger("click"); return (trip != null); }); // enter value in dropdown var countrySearch = page.evaluate(function() { var country = $("#countrySearch").val("France"); return (country != null); }); var datePickerOne = page.evaluate(function() { var datePicker1 = $("#stFromdate").val("11-11-2017"); return $("#stFromdate"); }); var datePickerTwo = page.evaluate(function() { var datePicker2 = $("#stTodate").val("18-11-2017"); return $("#stTodate").val(); }); var numberOfTravellers = page.evaluate(function() { var number = $("#couple").trigger("click"); return $("#couple").val(); }); var firstName = page.evaluate(function() { var fname = $("#fName").val("Robert"); return $("#fName").val(); }); var secondName = page.evaluate(function() { var sname = $("#sName").val("Johnson"); return $("#sName").val(); }); var dateOfBirth = page.evaluate(function() { var dob = $("#phDOB").val("11-10-1977"); return $("#phDOB").val(); }); var dateOfBirth2 = page.evaluate(function() { var dob2 = $("#ydob1").val("11-10-1977"); return $("#ydob1").val(); }); var postcode = page.evaluate(function() { var pc = $("#postcode").val("SS1 2AA"); return $("#postcode").val(); }); var email = page.evaluate(function() { var em = $("#emailaddr").val(" [e-mail] "); return $("#emailaddr").val(); }); // this click on the button does fire the form validation // It will submit the form if no errors are found var submitForm = page.evaluate(function() { var theForm = $("#aboutYouSubmit").trigger("click"); return (theForm != null); }); // If the page haven't been sent due to errors // this will count how many of them are there // and will make a screenshot of the page setTimeout(function(){ var errorsTotal = page.evaluate(function(){ return $(".error:visible").length; }); console.log("Total errors: " + errorsTotal); page.render("travel-filled.jpg"); }, 1500); } 

Why not submit the page sooner? An error message appears in your screenshot when the first name is empty. There may be a typo in the filling, or jQuery was not loaded while filling in the fields.