History: PluginCasperJS

            ! {{page}}

New to ((Tiki17)). This new ((wiki plugin)) allows to use "CasperJS" in Tiki, which is a navigation scripting & testing utility for PhantomJS and SlimerJS (still experimental). It eases the process of defining a full navigation scenario and provides useful high-level functions, methods & syntactic sugar for doing common tasks. See more information at ((PhantomJS and CasperJS))

!! Parameters 
{pluginmanager plugin="casperjs"}

!! How to use the code

* Install Package (jerome-breton/casperjs-installer)
* Enable casper (pref wikiplugin_casperjs)
* Create a tiki page with the following content:
{CODE()}

{CASPERJS()}
{SOURCE()}
var casper = require('casper').create();
var links;

function getLinks() {
// Scrape the links from top-right nav of the website
    var links = document.querySelectorAll('ul.navigation li a');
    return Array.prototype.map.call(links, function (e) {
        return e.getAttribute('href')
    });
}

// Opens casperjs homepage
casper.start('http://casperjs.org/');

casper.then(function () {
    links = this.evaluate(getLinks);
    tikiBridge.add('links', links);
});

{SOURCE}
{CASPERJS}

{CODE}

* Run it :-) 

!!What works

Currently, it runs casperjs, and display back to the user:
* The (full) script that was run
* The output of the command line
* The results from the casperjs execution, using TikiBridge (is injected into the CasperJS script as a easy way to send results back to tiki).

How does the TikiBridge works:
* Before running the script it prefix and postfix the CasperJS script with some JS code (the TikiBridge)
* You can send variables back to Tiki by calling -+TikiBridge.add('variable_name', variable)+-
* At the end of the script (is appended) a call to -+TikiBridge.done+- that will format the variables to be sent back to tiki.

!!Next Steps


* Discuss specific implementations to see how to use this data and what is needed to make it useful to a tiki instance.
* Make some ((profiles))

!!Examples

!!!Taking Screenshots with CasperJS

In a Tiki Page, use the following code:
{CODE()}
{CASPERJS()}
{SOURCE()}
var casper = require('casper').create();
 
casper.start('https://dev.tiki.org/Development', function() {
    casper.capture('screenshots/tiki_dev.png');
    this.echo('File saved in TIKI_ROOT/screenshots/tiki_dev.png');
});
 
casper.run();
{SOURCE}
{CASPERJS}
{CODE}

Click on Execute CasperJS script and the screenshoot will be stored in "TIKI_ROOT/screenshots", with "tiki_dev.png" filename

__Output__

{img src="display1556" link="display1556" width="400" rel="box[g]" imalign="center" desc="Click to expand" align="center" styleimage="border"}


!!!Fetch page Titles with CasperJS

In a Tiki Page, use the following code.
{CODE()}
{CASPERJS()}
{SOURCE()}
var casper = require('casper').create();
 
casper.start('https://tiki.org/HomePage', function() {
    this.echo('https://tiki.org/HomePage page title:' + this.getTitle());
});
 
casper.thenOpen('https://dev.tiki.org/Development', function() {
    this.echo('https://dev.tiki.org/Development page title:' + this.getTitle());
});
 
casper.run();
{SOURCE}
{CASPERJS}
{CODE}

__Output__

{img src="display1557" link="display1557" width="400" rel="box[g]" imalign="center" desc="Click to expand" align="center" styleimage="border"}

!!! Scrape Google and get results Title Tags with CasperJS

In a Tiki Page, use the following code:
{CODE()}
{CASPERJS()}
{SOURCE()}
var titleTags = [];
var casper = require('casper').create();
 
function getLinks() {
    var titleTags = document.querySelectorAll('h3.r a');
    return Array.prototype.map.call(titleTags, function(e) {
        return e.innerText;
    });
}
 
// Set user-agent to render page like chrome
casper.userAgent('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.77 Safari/537.36');
 
casper.start('http://google.com/', function() {
   // Wait for the page to be loaded
   this.waitForSelector('form[action="/search"]');
});
 
casper.then(function() {
   // search for 'tikiwiki groupware' from google
   this.fill('form[action="/search"]', { q: 'tikiwiki groupware' }, true);
});
 
casper.then(function() {
    // aggregate results for the 'tikiwiki groupware' search
    titleTags = this.evaluate(getLinks);
});
 
casper.run(function() {
    this.echo(titleTags.length + ' Title Tags found:');
    this.echo(' - ' + titleTags.join('\n - ')).exit();
});
{SOURCE}
{CASPERJS}
{CODE}

__Output__

{img src="display1558" link="display1558" width="400" rel="box[g]" imalign="center" desc="Click to expand" align="center" styleimage="border"}