使用 CasperJS/PhantomJS 从 <select> 表单字段中选择多个选项的正确方法答案

【问题标题】：Proper way to select multiple options from <select> form field using CasperJS/PhantomJS使用 CasperJS/PhantomJS 从 <select> 表单字段中选择多个选项的正确方法
【发布时间】：2015-09-21 20:29:34
【问题描述】：

我正在自动测试表单上存在两个多选字段的网页。左侧包含国家名称列表，右侧包含您选择的国家/地区名称。国家可以存在于一个列表中，但不能存在于另一个列表中。当您单击一个国家/地区时，它会移动到另一个列表（您明白了）。提交表单后，POST 中的值如下所示（来自 chrome 检查）：

数据[广告系列][unselected_country_codes]：数据[广告系列][unselected_country_codes][]:AF 数据[广告系列][unselected_country_codes][]:AX 数据[广告系列][unselected_country_codes][]:AL 数据[活动][unselected_country_codes][]:DZ 数据[广告系列][unselected_country_codes][]:AS 数据[广告系列][unselected_country_codes][]:AD 数据[活动][unselected_country_codes][]:AO 数据[广告系列][unselected_country_codes][]:AI 数据[广告系列][unselected_country_codes][]:AG 数据[广告系列][unselected_country_codes][]:AR ...（所有未选择的国家都在此列表中）数据[活动][国家代码]：数据[活动][国家代码][]：美国数据[活动][国家代码][]:AQ 数据[活动][国家代码][]:BD ...（这部分包含我们选择的部分）

以下是您希望包含的国家/地区选择列表的 HTML 外观：

<select name="data[Campaign][country_codes][]" multiple="multiple" id="CampaignCountryCodes" data-quicklist-ref="CampaignCountryCodes_quick" data-alter-ref="CampaignCountryCodes_alter">
<option value="US" selected="selected">United States</option>
<option value="AQ" selected="selected">Antarctica</option>
<option value="BD" selected="selected">Bangladesh</option>
</select>

我不明白的是，我将如何在测试时设置这些表单值？我真的不明白表单的<select> 属性是作为值数组还是什么？我希望能够提交表单并获得一份国家/地区列表，以及一份关闭的国家/地区列表。

这是我在表单上设置其他值的示例，这些值可以正常工作。我真的不知道如何为倍数做到这一点，这就是被问到的问题。

这个例子是一个很好用的文本区域。

casper.waitForSelector(x('//*[@id="some text area"]'),
   function success() {
        test.assertExists(x('//*[@id="some text area"]'));

        this.fill('form#campaign_form', { 
            'data[Campaign][some_field]': 'include',
            'data[Campaign][the_field]': myvar + "\n"
        }, true); 
   },
   function fail() { ... }
);

【问题讨论】：

我不确定我是否明白你在这里问什么。您是在问如何在 CasperJS 中设置多个选项（可回答），还是在问如何决定在测试时单击哪些选项（不可回答）？你能展示你已经尝试过的吗？
这对你有用吗：CasperJS/ Javascript Selecting Multiple Options?
您引用的答案仅选择列表中的值。我需要从一侧删除一个选项并将其添加到另一侧。我将用一个例子来更新问题
我虽然这就是页面为你做的事情。为什么你需要这样做？所以你真的想将<option> 从一个选择框移动到另一个？
是的，我实际上想将值从一个列表移动到另一个列表。例如，我只希望“US”显示在活动侧（右侧）并且所有的值都关闭（左侧）。或者为加拿大和美国开启 CA 和 US。

标签： javascript phantomjs html-select casperjs

【解决方案1】：

你可以move the options从一个选择到另一个：

casper.evaluate(function(){
    var values = ["US", "CA"];
    var src = document.querySelector('[name="data[Campaign][unselected_country_codes][]"]');
    var dest = document.querySelector('[name="data[Campaign][country_codes][]"]');
    values.forEach(function(val){
        dest.appendChild(src.querySelector('[value="'+ val +'"]'));
    });
});

之后，您可能仍然需要选择它们。仅仅因为选项出现在选择框中并不意味着它们会在您提交它们所在的表单时发送到服务器。您需要选择值：

casper.evaluate(function(){
    var values = ["US", "CA"];
    var src = document.querySelector('[name="data[Campaign][unselected_country_codes][]"]');
    var dest = document.querySelector('[name="data[Campaign][country_codes][]"]');
    values.forEach(function(val){
        dest.appendChild(src.querySelector('[value="'+ val +'"]'));
    });

    // select intended values
    [].forEach.call(dest.options, function(opt){
        if (values.indexOf(opt.value) !== -1) {
            opt.selected = true;
        }
    });

    // trigger change event to run some page JavaScript
    var evt = document.createEvent("UIEvents");
    evt.initUIEvent("change", true, true);
    dest.dispatchEvent(evt);
});

我怀疑所有这些都不是必需的，因为您应该能够选择CasperJS/ Javascript Selecting Multiple Options 中看到的必要选项，并且它们应该出现在目标选择框中。

【讨论】：