4

I have a casperJS script which logs in multiple users with provided credentials; which returns the amount successful and failed logins as well as the usernames which succeeded and failed. I am attempting to run this script by clicking a button within a PHP page, and after casperJS runs, I want the results to be echoed to the same page where the button was clicked (without reloading the page). I have looked at and reviewed the following Q/As but none of these provide an adequate answer to my issue (since the results are not displayed once the script ends): click on the button to run php code and echo result, Run/Execute CasperJS script by clicking a button on webpage, CasperJS passing data back to PHP.

My current web server set up:

  • PhantomJS version: 1.9.7
  • CasperJS version: 1.1.0-beta3
  • Apache/2.2.27 (Unix) mod_ssl/2.2.27 OpenSSL/1.0.1h DAV/2 PHP/5.5.14
  • On OS X 10.9.3

My casperJS script: gist

I first called the casperJS script right on the PHP page (but this obviously caused the script to run first, and then the page loaded), using this (from How to run casperJS script from php API): 

echo exec("/home/user/casperjs/bin/casperjs /full/path/to/your_script.js");

Once the page loaded, it did echo back a portion of the results from running the script. I am not sure why it only chose to echo the last this.echo(JSON.stringify(tracker));. I would obviously like for it to print all the echos in the script, but that may be another question; I would also like to be bale to colorize the echoes. Also, the screen captures did not take place either.

Now I actually have a button, and when I press it, it remains pressed for as long as the casperJS script is running, and once it is done it becomes unpressed, but I do not have any result echoed. I have no way of knowing if the script ran or not since the screenshots are not occurring, although the length of time the button remained pressed makes me believe it was executed. So this is my PHP page: 

<html>
<head>
<title>casperJS testing</title>
</head>
<body>
    <center>
<p>Welcome to the casperJS Automated Testing Utility</p>
<br>
<input type="button" name="runcasperjs"  onclick="casperjs()"><div id="results">Waiting for echoes</>
<br>
<?php
    ## This Function Below Sets PhantomJs So CasperJS Can Use It
    putenv("PHANTOMJS_EXECUTABLE=/usr/local/bin/phantomjs");
    echo "Running PhantomJS version: ";
    echo exec('/usr/local/bin/phantomjs --version 2>&1');
    echo "<br />";
    echo "Running CasperJS version: ";
    echo exec('/usr/local/bin/casperjs --version 2>&1');
    echo "<br />";
    echo 'Current PHP version: ' . phpversion();
    echo "<br />";
    $version = apache_get_version();
    echo "$version\n";
?>
    </center>
    <script>  
     function casperjs(){
       var xhReq = new XMLHttpRequest();
       var request = "http://pathToLocalHost/phpTest.php" // this will prepare a request to your server
       xhReq.open("GET", request, false);  // send a request
       xhReq.send(null);
       document.getElementsByID("results").innerHTML=xhReq.responseText  /// this will display results

       }
    </script>
</body>
</html>

And this is the PHP page activated onclick phpTest.php: 

<?php
echo exec("/home/user/casperjs/bin/casperjs /full/path/to/your_script.js"); 
?>

Maybe I am doing this completely wrong and I should not have another PHP page, I'm not sure. I've tried to create a solution by studying the previous Q/As but cannot come up with a solution. Thanks!

Community
  • 1
  • 1
gothamgator
  • 111
  • 1
  • 11

1 Answers1

1

So I figured that I could use AJAX to display the casperjs echoed results in the same page. I made an HTML page with two buttons: 1) Run casperjs AJAX to run the AJAX, and 2) Run casperjs to simply load a PHP page executing the casperjs script and printing the results in a new page. Here is the HTML (with help from How to link external javascript file onclick of button for AJAX button click): 

<!DOCTYPE html>
<html>
    <head>
        <title>casperJS testing</title>
    </head>
    <center>
    <body>
    <div id="mainContent">
<p>Welcome to the Automated Testing Utility</p>
<table>
<tr>
  <td><button id="button_AJAX">Run casperjs AJAX</button></td>
  <td><form action="runscript.php">
    <input type="submit" value="Run casperJS">
</form></td> 
</tr>
</table>
    </div>
    <script type="text/javascript">
    var button = document.getElementById('button_AJAX');
    button.onclick = function(){
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "casperjsajax.js"; 
        document.getElementsByTagName("head")[0].appendChild(script);
        return false;
    }
    </script>
    </center>
    </body>
</html>

The casperjsajax.js code (with the aid of JS Essential Training): 

// 1: Create the request 
var myRequest;

// feature check!
if (window.XMLHttpRequest) {  // does it exist? we're in Firefox, Safari etc.
    myRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // if not, we're in IE
    myRequest = new ActiveXObject("Microsoft.XMLHTTP");
}

// 2: Create an event handler for request to call back
myRequest.onreadystatechange = function(){
    if (myRequest.readyState === 4) {
        var p = document.createElement("p");
        var t = document.createTextNode(myRequest.responseText);
        p.appendChild(t);
        document.getElementById("mainContent").appendChild(p);
    }
};

// Open and send it
myRequest.open('GET', 'scriptresults.php', true);
// any parameters?
myRequest.send(null);

The scriptresults.php code:

<?php
echo "Here are your test results!";
echo "<br />";
echo exec("/home/user/casperjs/bin/casperjs /full/path/to/your_script.js");
?>

And the runscript.php link for non-AJAX 

<html>
<head>
<title>casperJS Test Results</title>
</head>
<body>
    <center>
<p>Here are your results!</p>
<br>
<?php
    echo exec("/usr/local/bin/casperjs /full/path/to/your_script.js");
?>
    </center>   
</body>
</html>
Community
  • 1
  • 1
gothamgator
  • 111
  • 1
  • 11