Allow passing page options into phantomjs

Merged in from STRML/grunt-lib-phantomjs@e356ada (Essentially merged and squashed commits of gruntjs#21 and gruntjs#47 together)
bdowling · Dec 7, 2013 · 9d613d1 · 9d613d1
1 parent e85423a
commit 9d613d1
Show file tree

Hide file tree

Showing 7 changed files with 108 additions and 3 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -42,18 +42,57 @@ module.exports = function(grunt) {
  }
  }
  },
- },
+ headers: {
+ options: {
+ url: 'http://localhost:8075',
+ server: './test/fixtures/headers_server.js',
+ page: {
+ customHeaders: {
+ 'X-CUSTOM': 'custom_header_567'
+ }
+ },
+ expected: 'custom_header_567',
+ test: function test(msg) {
+ test.actual = msg;
+ }
+ }
+ },
+ viewportSize: {
+ options: {
+ url: 'test/fixtures/viewportSize.html',
+ page: {
+ viewportSize: { 
+ width: 1366, 
+ height: 800 
+ }
+ },
+ expected: [1366, 800],
+ test: function test(a, b) {
+ if (!test.actual) { test.actual = []; }
+ test.actual.push(a, b);
+ }
+ }
+ }
+ }
  });
 
  // The most basic of tests. Not even remotely comprehensive.
  grunt.registerMultiTask('test', 'A test, of sorts.', function() {
  var options = this.options();
  var phantomjs = require('./lib/phantomjs').init(grunt);
 
+ // Load up and Instantiate the test server
+ if (options.server) { require(options.server); }
+
  // Do something.
  phantomjs.on('test', options.test);
+
  phantomjs.on('done', phantomjs.halt);
 
+ phantomjs.on('debug', function(msg) {
+ grunt.log.writeln('debug:' + msg);
+ });
+
  // Built-in error handlers.
  phantomjs.on('fail.load', function(url) {
  phantomjs.halt();

diff --git a/README.md b/README.md
@@ -8,6 +8,12 @@ The best way to understand how this lib should be used is by looking at the [gru
 
 Also, in the case of the grunt-contrib-qunit plugin, it's important to know that the page being loaded into PhantomJS *doesn't* know it will be loaded into PhantomJS, and as such doesn't have any PhantomJS->Grunt code in it. That communication code, aka. the ["bridge"](https:/gruntjs/grunt-contrib-qunit/blob/d99291713d32f84e50303d6e51eb2dab40b1deb6/phantomjs/bridge.js), is dynamically [injected into the html page](https:/gruntjs/grunt-contrib-qunit/blob/d99291713d32f84e50303d6e51eb2dab40b1deb6/tasks/qunit.js#L152).
 
+### Options
+
+* `timeout`: PhantomJS' timeout, in milliseconds.
+* `inject`: JavaScript to inject into the page.
+* `page`: an object of options for the PhantomJS [`page` object](https:/ariya/phantomjs/wiki/API-Reference-WebPage).
+
 ## An inline example
 
 If a Grunt task looked something like this:

diff --git a/package.json b/package.json
@@ -35,7 +35,8 @@
  "devDependencies": {
  "grunt-contrib-jshint": "~0.6.2",
  "grunt": "~0.4.0",
- "difflet": "~0.2.3"
+ "difflet": "~0.2.3",
+ "express": "~3.1.1"
  },
  "main": "lib/phantomjs",
  "files": [

diff --git a/phantomjs/main.js b/phantomjs/main.js
@@ -44,7 +44,7 @@ setInterval(function() {
 }, 100);
 
 // Create a new page.
-var page = require('webpage').create();
+var page = require('webpage').create(options.page);
 
 // Inject bridge script into client page.
 var injected;

diff --git a/test/fixtures/headers.html b/test/fixtures/headers.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html>
+<head>
+<script>
+
+function sendMessage() {
+ var args = [].slice.call(arguments);
+ alert(JSON.stringify(args));
+}
+
+var headers = <% headers %>;
+
+sendMessage('test', headers['x-custom']);
+sendMessage('done');
+
+</script>
+</head>
+<body>
+</body>
+</html>
diff --git a/test/fixtures/headers_server.js b/test/fixtures/headers_server.js
@@ -0,0 +1,17 @@
+var fs = require('fs');
+var express = require('express'); 
+var port = 8075;
+var site = express();
+
+site.get('*', function(req, res) {
+ fs.readFile('./test/fixtures/headers.html', 'utf8', function (err, data) { 
+ if (err) throw err;
+ var tmpl = data.replace(/<% headers %>/, JSON.stringify(req.headers));
+ res.write(tmpl);
+ res.end();
+ });
+});
+
+site.listen(port);
+
+console.log('Listening on port ' + port);
diff --git a/test/fixtures/viewportSize.html b/test/fixtures/viewportSize.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<html>
+<head>
+<script>
+
+// Send messages to the parent PhantomJS process via alert! Good times!!
+function sendMessage() {
+ var args = [].slice.call(arguments);
+ alert(JSON.stringify(args));
+}
+
+var viewportWidth = document.documentElement.clientWidth;
+var viewportHeight = document.documentElement.clientHeight;
+
+sendMessage('test', viewportWidth, viewportHeight);
+sendMessage('done');
+
+</script>
+</head>
+<body>
+</body>
+</html>