CODEWITHSUNDEEP
jqueryphantomjscasperjsphantomcss
balachander j
balachander j

Reputation: 53

PhantomCSS - Javascript not getting executed

I am trying to unit test different components in a HTML page using phantomCSS. My test HTML page contains dropdown elements. On this HTML, I load a javascript file that would convert these elements into (by using jquery).

So, in my testSuite, I am trying to find the selector "div.selected" and capture a screenshot of this element. Issue here is, PhantomCSS is not finding that selector element at all.

On more analysis, we found that script that is included in the page is not getting executed. Please see code below. Please note that we are running the tests using gulp-phantomcss and not through command line.

components.html
<html>
<body>
<select id="test" name="test">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA" data-out-of-stock="true">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
</select>
<script src="toolkit/scripts/toolkit.js"></script>
</body>
</html>

Once, the toolkit.js is loaded, above HTML would be converted like below.

<html>
<body>
<select id="test" name="test" data-initialized="" data-node-uid="1">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA" data-out-of-stock="true">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
</select>
<div class="select">
    <div class="selected">Alabama</div>
    <div class="options">
        <input id="test_0" type="radio" name="test" value="AL"><label for="test_0">Alabama</label>
        <input id="test_1" type="radio" name="test" value="AK"><label for="test_1">Alaska</label>
        <input id="test_2" type="radio" name="test" value="AZ"><label for="test_2">Arizona</label>
        <input id="test_3" type="radio" name="test" 
        value="AR"><label for="test_3">Arkansas</label><input id="test_4" type="radio" name="test" value="CA" disabled=""><label for="test_4" class="out-of-stock">California</label>
        <input id="test_5" type="radio" name="test" value="CO"><label for="test_5">Colorado</label><input id="test_6" type="radio" name="test" value="CT"><label for="test_6">Connecticut</label>
        <input id="test_7" type="radio" name="test" value="DE"><label for="test_7">Delaware</label><input id="test_8" type="radio" name="test" value="DC"><label for="test_8">District Of Columbia</label>
    </div>
</div>
</body>
</html>

Below is my testSuite.js file (For now, I am just trying to see if i get the screenshot of the element that I am looking for).

casper.start('http://localhost:3000/components.html');

casper.then(function(){
    phantomcss.screenshot("div.selected", 'dropdown/0.1 default-dropdown-standard');
});

casper.run();

I am getting the below message when I run the testSuite.

[PhantomCSS] Screenshot capture failed:  No element matching selector found: div.selected

Are we missing anything here? Please help us out.

I changed the testSuite a bit to add listeners on error messages and got the below error.

[debug] [phantom] url changed to "http://localhost:3000/components.html"
Page Error: TypeError: 'undefined' is not an object (evaluating     '$(this.get(0).children).deepEach')

I am getting this error thrown in toolkit.js when the page is loaded. But the same error is not thrown when i get this HTML opened in the browser. Not sure if this is because of behavior in headless browser. Any help would be appreciated.

Upvotes: 0

Views: 244

Answers (1)

balachander j
balachander j

Reputation: 53

We were able to fix this issue. It looks like toolkit.js that was included in the components.html was indeed using bonzo and not jquery to convert HTML select into s.

And for some reason, $ was not recognized when we ran the test suite. We changed $ to "bonzo" and it fixed the issue.

Upvotes: 0

Related Questions