Loading...
 
Skip to main content
Use CasperJS on a Tiki page
5
Page actions
PDF Print Get a short URL Open in WebDAV

PluginCasperJS

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

Enable running CasperJS scripts from this Tiki site.
Introduced in Tiki 17.
Go to the source code
Preferences required: wikiplugin_casperjs

Parameters
(body of plugin) - text
no parameters

How to use the code

  • Install Package (jerome-breton/casperjs-installer)
  • Enable casper (pref wikiplugin_casperjs)
  • Create a tiki page with the following content:
Copy to clipboard
{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}
  • 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:

Copy to clipboard
{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}

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

Output

Click to expand
Click to expand

Fetch page Titles with CasperJS

In a Tiki Page, use the following code.

Copy to clipboard
{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}

Output

Click to expand
Click to expand

Scrape Google and get results Title Tags with CasperJS

In a Tiki Page, use the following code:

Copy to clipboard
{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}

Output

Click to expand
Click to expand
History Source
Slideshow