jquery - casperjs select 不适用于 angularjs

Question

尝试了 How to fill a select element which is not embedded in a form with CasperJS? 中给出的所有解决方案并尝试了更多链接。情况是这样的，我无法更改下面的代码来添加任何附加属性，并且 jquery 或 javascript 解决方案选择任何选项都不起作用。

<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>

尝试了这些代码解决方案

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

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

3. 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();
   

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

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

请大家提出一些可行的解决方案。

Answer 1

试试这个，它对我有用

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');