samedi 17 octobre 2015

Intern JS - stale element reference: element is not attached to the page document

As i'm new to Intern JS and was stucked in 1 functional test.

Just wrote test to fill and submit the form, but i'm getting so weird error if i'm trying to find something using CssSelector - stating that its not attached to page document

Even i'm using select2 plugin on my page.

HTML markup before js rendering the template

<div class="form-group col-xs-4 plnone">
    <div class="cf-select-dd">
        <label class="hide" for="vehicle_make_model">Your Car</label>
        <select data-placeholder="Select your car" class="select3-input emptyState" id="vehicle_make_model">
            <option></option>
        </select>
    </div>
</div>

Now as i'm using select2 plugin its fetches data from server using ajax request and populate it in select-option format and then its looks like below example

<div class="form-group col-xs-4 plnone">
    <div class="cf-select-dd">
        <label class="hide" for="vehicle_make_model">Your Car</label>

        <div class="select2-container select3-input emptyState" id="s2id_vehicle_make_model" title="Your Car" style="display: block;">
            <a href="javascript:void(0)" class="select2-choice select2-default" tabindex="-1">   

            <span class="select2-chosen" id="select2-chosen-16">Select your car</span><abbr class="select2-search-choice-close"></abbr>

            <span class="select2-arrow" role="presentation"><b role="presentation"></b></span></a><label for="s2id_autogen16" class="select2-offscreen">Your Car</label>

            <input class="select2-focusser select2-offscreen" type="text" aria-haspopup="true" role="button" aria-labelledby="select2-chosen-16" id="s2id_autogen16">
        </div>

            <select data-placeholder="Select your car" class="select3-input emptyState" id="vehicle_make_model" title="Your Car" style="display: none;" tabindex="-1">
                <option></option>
                <option id="76" name="Chevrolet Aveo"value="{&quot;id&quot;:76,&qot;name&quot;:&quot;ChevroletAveo&quot;}">Chevrolet Aveo</option>
                <option id="78" name="Chevrolet Beat"value="{&quot;id&quot;:78,&quot;name&quot;:&quot;ChevroletBeat&quot;}">Chevrolet Beat</option>
            </select>
    </div>
</div>

Functional test

define(function(require){
    var registerSuite = require('intern!object');
    var assert = require('intern/chai!assert');

    registerSuite({
        name : 'HomePage',

        'home page form':function(){
            return this.remote
            .get('http://localhost:8000/')
            .setFindTimeout(5000)
            .findByCssSelector('#s2id_vehicle_make_model')
            .click() // Up to here it's running properly
            .findByCssSelector('#s2id_autogen16_search')
            ;
        },
    });

});

Aucun commentaire:

Enregistrer un commentaire