Home/ Questions/Q 8416473
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T01:46:03+00:00

I have a basic EXT JS store that uses a proxy to access a

  • 0

I have a basic EXT JS store that uses a proxy to access a local json file.

e.g.

...
proxy: {
    type: 'ajax',
    api: {
        read: 'data/mydata.json'
    },
    reader: {
        type: 'json',
        root: 'datas',
        successProperty: 'success'
    }
} 
...

I want to use Maven, Jasmine and PhantomJS to build and test my project with Atlassian Bamboo (my CI server).

When I execute PhantomJS locally, like so:

$ phantomjs "c:\phantomjs-1.6.1\examples\run-jasmine.js" run-tests.html

I get the following output:

'waitFor()' finished in 422ms.
 4 specs, 2 failures in 0.075s

This is happening because PhantomJS can’t manage to load local files using file:// protocol for the EXT JS proxy.

I’m following this example, and am wondering whether it’s possible to mock my proxies response so that I can use PhantomJS locally (on my Bamboo server) with the test html file, rather than having to host the project in a web server like Apache (an external dependency I will have to manage with Maven).

If not, are there any other mechanisms (built into Jasmine, PhantomJS, or otherwise), that I can use to achieve this?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It actually is possible to do XHR with PhantomJS when loading from the file system!

    Straight from the PhantomJs wiki:

    --web-security=[yes|no] disables web security and allows cross-domain XHR (default is yes)

    Also see this issue report for PhantomJs which might shed some light on this topic.

    Sencha’s ‘sencha create jsb’ command uses PhantomJs (and Ext.Loader uses XHR) and it supports loading from the file system.

    name: 'app-entry',
alias: 'a',
description: 'The file or URL path to your application\'s HTML entry point',

    Checkout [senchasdktools]/compat/command/src/modules/GenerateJSB.js and [senchasdktools]/compat/command/scripts/phantomjs-jsb.js.

    I don’t see anything related to the mentioned web-security switch though. Maybe they use a custom phantomJs build.

    UPDATE
    This code fragment allows XHR requests to the file system. Tested with the latest version of phantomJs (1.6.1/Windows):

    var page = new WebPage();
page.settings.localToRemoteUrlAccessEnabled = true;

    UPDATE2
    This is a working example.

    Put everything in the same folder, add a test.txt file with some content, then run 

    phantomjs script.js test.html

    phantomjs script (script.js):

    var fs = require('fs');

var appLocation = phantom.args[0];

var page = new WebPage();

page.settings.localToRemoteUrlAccessEnabled = true;
page.settings.ignoreSslErrors = true;

page.onConsoleMessage = function(message, url, lineNumber) {
    console.log((url ? url + " " : "") + (lineNumber ? lineNumber + ": " : "") + message);
};

page.onError = function (msg, trace) {
    console.log(msg);
    trace.forEach(function(item) {
        console.log('  ', item.file, ':', item.line);
    });
    phantom.exit(1);
};

if (!/^file:\/\/|http(s?):\/\//.test(appLocation)) {
    appLocation = 'file:///' + fs.absolute(appLocation).replace(/\\/g, '/');
}

page.open(appLocation, function(status) {
    if (status !== 'success') {
        error("Failed opening: '" + appLocation + "'. Please verify that the URI is valid");
    }

    page.evaluate(function() {
        window.onerror = function(message, url, lineNumber) {
            console.log((url ? url + " " : "") + (lineNumber ? lineNumber + ": " : "") + message);
        };

    });

    timer = setInterval(function() {
        console.log('Timeout!');
        phantom.exit(1);
    }, 2000);
});

    Html file (test.html):

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html class="x-border-box x-strict">
<head>
    <title>Test</title>
    <script type="text/javascript">
    var xhr = new XMLHttpRequest();

    try {
        xhr.open('GET', 'test.txt', false);
        xhr.send(null);
    } catch (e) {
        console.log('cross origin?');
    }

    console.log('status', xhr.status);
    console.log('response', xhr.responseText);

    </script>
</head>
<body class="x-body">
</body>
</html>

    Chrome and –disable-web-security and ExtJs

    I am actually using --disable-web-security as startup parameter to Google Chrome to run my webapp form the filesystem during development and it works there (no other Chrome processes must be running when starting Chrome).
    Chrome will display an alert message stating that you are using an unsupported option (yellow notification bar at the top).

    However, for Ext to work in a setup like this I required an additional patch to Ext.Connection in order to fix two issues:
    (1) xhr.status is always 0 when loading a file system resource. Ext does not consider this status code as successful. There is code dedicated to handling this when Ext is running in PhantomJs – that’s why it should work there.

    (2) Chrome failed loading file system resources when the URL contains a query string. I override the Connection class to strip all url params when in filesystem mode.

    • 0