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
How to use the code
- Install Package (jerome-breton/casperjs-installer)
- Enable casper (pref wikiplugin_casperjs)
- Create a tiki page with the following content:
{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:
{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
Fetch page Titles with CasperJS
In a Tiki Page, use the following 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}
Output
Scrape Google and get results Title Tags with CasperJS
In a Tiki Page, use the following 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}
Output