casperjs select not working for angularjs

Question

Tried all solutions given in How to fill a select element which is not embedded in a form with CasperJS? and tried many more links. Situation is this that I can not change code below to add any additional attribute and jquery or javascript solutions to select any option are not working.

<select class="form-control mg-dn ng-pristine ng-invalid ng-invalid-required ng-touched" ng-model="instance.order.fk_physician_id" ng-required="true" required="required">
    <option value="" selected="">Select Physician</option>
    <!-- ngRepeat: doc in instance.doctors -->
    <option ng-repeat="doc in instance.doctors" value="669" class="ng-binding ng-scope">fJensik Jensik</option>
    <!-- end ngRepeat: doc in instance.doctors -->
    <option ng-repeat="doc in instance.doctors" value="660" class="ng-binding ng-scope">fHillman Hillman</option>

<!-- end ngRepeat: doc in instance.doctors --></select>

Tried these code solutions

casper.fillSelectors('div#order-details', {
    'select[ng-model="instance.order.fk_physician_id"]': '669'
}, false);

casper.evaluate(function(){
    document.querySelector('select[ng-model="instance.order.fk_physician_id"]').focus();
});
this.page.sendEvent('keypress', this.page.event.key.Down);`

casper.selectOptionByValue = function(selector, valueToMatch){
    this.evaluate(function(selector, valueToMatch){
        var select = document.querySelector(selector),
            found = false;
        Array.prototype.forEach.call(select.children, function(opt, i){
            if (!found && opt.value.indexOf(valueToMatch) !== -1) {
                select.selectedIndex = i;
                found = true;
            }
        });
        // dispatch change event in case there is some kind of validation
        var evt = document.createEvent("UIEvents"); // or "HTMLEvents"
        evt.initUIEvent("change", true, true);
        select.dispatchEvent(evt);
    }, selector, valueToMatch);
};
casper.start(url, function() {
    this.selectOptionByValue('select[ng-model="instance.order.fk_physician_id"]', "669");
}).run();

$('select[ng-model="instance.order.fk_physician_id"] option:nth-child(3)').prop('selected', true).trigger('change');

$('select[ng-model="instance.order.fk_physician_id"]').val("669").change();

Anyone, Please suggest some workable solution.

Which PhantomJS version do you use? Please register to the `resource.error`, `page.error`, `remote.message` and `casper.page.onResourceTimeout` events ([Example](https://gist.github.com/artjomb/4cf43d16ce50d8674fdf#file-2_caspererrors-js)). Maybe there are errors. — Artjom B., Feb 16 '16 at 08:39
Are you sure that the select box is populated when you're trying to select an option? — Artjom B., Feb 16 '16 at 09:02
Console: WARNING: Tried to load angular more than once. ResourceError: { "errorCode": 5, "errorString": "Operation canceled", "id": 130, "status": null, "statusText": null, "url": "http://api.caremerge.loc/facilities/105/residents/52301/medications/doctors" } Console: HTTP Request Failed — Farhat Naz Biya, Feb 16 '16 at 09:02
I'm checking with waitUntilVisible for option:nth-child(3) then performing operations on option `casper.waitUntilVisible(map.physicianOrderAddScreen.physicianFieldOption, function() { helper.clickOn("Physcians List Options", map.physicianOrderAddScreen.physicianFieldOption, 25000); });` — Farhat Naz Biya, Feb 16 '16 at 09:04
trying this as well `casper.sendKeys(map.physicianOrderAddScreen.physicianField, '669');` — Farhat Naz Biya, Feb 16 '16 at 09:09
and casper.evaluate(function (physicianFieldOption){ $(physicianFieldOption).prop('selected', true).trigger('change'); // and $("select[ng-model='instance.order.fk_physician_id']").val("669").change(); }, map.physicianOrderAddScreen.physicianFieldOption) — Farhat Naz Biya, Feb 16 '16 at 09:10
__utils__.echo($('select[ng-model="instance.order.fk_physician_id"]').val()); echoes null — Farhat Naz Biya, Feb 16 '16 at 09:11
Yes, I'm sure the select box is populated when I'm trying to select an option. — Farhat Naz Biya, Feb 16 '16 at 09:14
`casper.waitUntilVisible("select[ng-model='instance.order.fk_physician_id'] option:nth-child(3)", function() { casper.test.pass("Physcians List Options loads in given time."); helper.clickOn("Physcians List Options", "select[ng-model='instance.order.fk_physician_id'] option:nth-child(3)", 25000); }, function(){ casper.test.fail("Physcians List Options did not load in gicen time."); }, 20000);` Above code is showing "PASS Physcians List Options loads in given time" in terminal when I run test. — Farhat Naz Biya, Feb 16 '16 at 09:22

score 0 · Answer 1 · answered Jul 15 '16 at 13:46

Try this, its work for me

casper.capture('before-select.png');
var nameInScope='instance.order.fk_physician_id';
var value=669;//but i'm not sure your data structure (value is a number?)
casper.evaluate(function (nameInScope, value) {
    if (typeof value == 'number') {
        value = 'number:' + value;
    }
    //TODO all types

    var selectedIndex = $('select[ng-model="' + nameInScope + '"] option[value="' + value + '"]').index();
    var theSelect = $('select[ng-model="' + nameInScope + '"]').get(0);
    theSelect.selectedIndex = selectedIndex;
    $(theSelect).blur();//http://stackoverflow.com/questions/30136361/how-to-select-an-option-with-casperjs
}, {
    nameInScope: nameInScope, value: value
});
casper.capture('after-select.png');

casperjs select not working for angularjs

1 Answers1