Question

我正在自动测试一个网页，其中表单上有两个多选字段。左侧的一个包含国家/地区名称列表，右侧的一个包含您选择的国家/地区名称。国家可以存在于一个列表中而不存在于另一个列表当您单击某个国家/地区时，它会移动到另一个列表（您可以获得该想法）。提交表单时，POST中的值如下所示（来自chrome检查）：数据[运动] [unselected_country_codes]：数据[运动] [unselected_country_codes] []：AF 数据[运动] [unselected_country_codes] []：AX 数据[运动] [unselected_country_codes] []：AL 数据[运动] [unselected_country_codes] []：DZ 数据[活动] [unselected_country_codes] [1]：数据[运动] [unselected_country_codes] []：AD 数据[运动] [unselected_country_codes] []：AO 数据[运动] [unselected_country_codes] []：AI 数据[活动] [unselected_country_codes] []：AG 数据[运动] [unselected_country_codes] []：AR ...（未选中的所有国家/地区都在此列表中）数据[运动] [country_codes]：数据[活动] [country_codes] []：美国数据[运动] [country_codes] []：AQ 数据[活动] [country_codes] []：BD ...（此部分包含我们选择的部分）以下是您想要包含的国家/地区的选择列表的HTML内容：＆lt; select name =“data [Campaign] [country_codes] []”multiple =“multiple”id =“CampaignCountryCodes”data-quicklist-ref =“CampaignCountryCodes_quick”data-alter-ref =“CampaignCountryCodes_alter”＆gt; ＆lt; option value =“US”selected =“selected”＆gt; United States＆lt; / option＆gt; ＆lt; option value =“AQ”selected =“selected”＆gt; Antarctica＆lt; / option＆gt; ＆lt; option value =“BD”selected =“selected”＆gt; Bangladesh＆lt; / option＆gt; ＆LT; /选择＆GT; 我不明白的是，我如何在测试时设置这些表格值？我真的不明白＆lt; select＆gt;一个表单的属性是作为一个值的数组或什么？我希望能够提交表格，并列出已开启的国家/地区列表以及已关闭的列表。以下是我在表单上设置其他值以正常工作的示例。我真的不知道如何为一个倍数做这个，这就是被问到的问题。这个例子是一个非常棒的文本区域。 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” ，真实）; }， function fail（）{...} ）;

Answer 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中所见的必要选项，它们应该出现在目标选择框中。

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

1 个答案: