如何单击“选择选项”，然后评估加载的内容与casperjs

我试图抓取的尺寸为这款产品：如何单击“选择选项”，然后评估加载的内容与casperjs

的问题：大小的颜色后装入该产品被选中。

在产品页面的源代码中，我可以看到下拉列表有一个onchange-method：它点击表格#postColor onchange。

选择下拉：

<select name="color" id="color" class="cposelect" onchange="document.getElementById('postColor').click();" style="width:150px;margin-right: 20px; float: left;"> 
    <option selected="selected" onfocus="if (this.storeCurrentControl != null) storeCurrentControl(event, this);" value="0">Select colour</option> 
    <option onfocus="if (this.storeCurrentControl != null) storeCurrentControl(event, this);" value="-8027">Light Camel</option> 
    <option onfocus="if (this.storeCurrentControl != null) storeCurrentControl(event, this);" value="-9999">black</option> 
</select>

的#postColor形式，它被点击的onchange：

<input type="submit" name="postColor" value="" onclick="location.href=('./?model=10344-4180&amp;color='+document.forms[0].color.value+'&amp;size='+document.forms[0].size.value+'&amp;addbread=OUTLET&amp;addbread2=DRIZIA&amp;currentimage='+document.getElementById('currentimage').value+'&amp;selectedmi=a1_INDEX_14&amp;prev=10850-4314&amp;next=10413-4183'); return false;" id="postColor" class="cpobutton " style="display: none;">

这是到目前为止我的代码，它不工作：

casper.start('http://shop.baumundpferdgarten.com/showmodel/?model=10344-4180&addbread=OUTLET&addbread2=DRIZIA&color=0&currentimage=1&selectedmi=a1_INDEX_14', function() { 
    this.test.assertExists('select[name="color"] option:nth-child(2)'); 
    this.click('select[name="color"] option:nth-child(2)'); 
    this.waitForSelector('select[name="size"] option:nth-child(2)', function() { 
     this.test.pass('selector is !'); 
     var sizes = this.evaluate(function() { 
      console.log("======== evaluating ========"); 
      // var sizes = document.querySelectorAll('#size option'); 
      return document.querySelectorAll('#size option'); 
     }); 
     for (var i = sizes.length - 1; i >= 0; i--) { 
      console.log(sizes[i].innerText); 
     } 
    }); 
});

我怀疑这个问题是一个全新的页面被加载时点击一个颜色（大小不动态追加）。

你会如何解决这个问题？

来源

2013-05-02 2083

这是我要做的事

this.evaluate(function() { 
    $('#select_element_selector').val('value').change(); 
});

的change()是非常重要的

我假设你拥有jQuery的页面

来源

2013-05-15 16:52:01 wmarbut

这并不为我工作。它改变了选项下拉视觉（以及可与casper.capture可以看出），但它实际上并没有引发选定的值。 – tfmontague 2016-01-01 01:51:35

Perfec t谢谢 – CodeGuru 2016-11-16 13:09:28

棘手，但看着URL，我认为卡斯帕可以很好地处理这个问题。

让我知道如果你需要为这个代码帮助，但它会需要更长的时间，从而给你一个位的伪代码，

创建的颜色和颜色标识{一个空对象颜色：colorId}
就像你已经在做的那样，找到[name ='color']的选择菜单并循环这些选项。将不具有值0的任何东西推送到您的对象
编写一个新函数，该函数将转到url http://shop.baumundpferdgarten.com/showmodel/?model=10344-4180&color=-9999&size=0&addbread=OUTLET&addbread2=DRIZIA&currentimage=1&selectedmi=a1_INDEX_14&prev=10850-4314&next=10413-4183并替换颜色ID，其中color=-9999。

例如：

'http://shop.baumundpferdgarten.com/showmodel/?model=10344-4180&color=' + object.colorId + '&size=0&addbread=OUTLET&addbread2=DRIZIA&currentimage=1&selectedmi=a1_INDEX_14&prev=10850-4314&next=10413-4183'

无论是尺寸添加到现有的颜色对象，或者使一个新的，或CONSOLE.LOG他们。世界是你的！

来源

2013-05-03 14:51:24 imjared

在这里得到了同样的问题上。我的解决办法是：

casper.then(function(){ 
    this.evaluate(function() { 
     document.querySelector('select.select-category').selectedIndex = 2; //it is obvious 
    }); 
    this.capture('screenshot.png'); 
});

来源

2013-08-16 13:38:28

我尝试了鼠标元素，但你的解决方案似乎是更好的。 – 2014-01-22 14:33:08

只需尝试获取我想要的数据即可。 – 2017-07-31 06:02:56

我不知道你是否找到了解决您的问题，但这里是我会怎么解决这个问题：

casper.click('#color'); 
casper.then(function() { 
casper.waitFor(function check() { 
    return this.evaluate(function() { 
    return document.querySelector('select.select-category').selectedIndex === 2; 
    }); 
}, function then() { 
    /* do the rest that you would want to do!*/ 
    }); 

}

来源

2015-11-17 15:32:08 Fabio

推荐的jQuery的解决方案并不实际工作为了我。

casper.evaluate(function() { 
    $('#select_element_selector').val('value').change(); 
});

虽然capture()命令显示的选择选项是可视化选择的，但实际上并未触发该事件。例如，用waitForText()命令尝试使用此命令;该程序将超时。

casper 
    .start('http://factfinder.census.gov/faces/tableservices/jsf/pages/productview.xhtml?pid=DEC_00_SF1_DP1&prodType=table') 
    .waitForText('Add/Remove Geographies', function() { 
    casper.click('#addRemoveGeo_btn'); 
    }) 
    .waitForText('Select a geographic type:', function() { 
    casper.evaluate(function() { 
     $('#summaryLevel').val('050').change(); 
    }); 
    }) 
    .waitForText('Select a state:', function() { 
    casper.capture('test.png'); 
    }) 
    .run();

对我有用的是下面提供的代码（谢谢@ArtjomB）。 How to fill a select element which is not embedded in a form with CasperJS?

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.selectOptionByValue('#summaryLevel', '050');

虽然，我认为应该CasperJS提供原生支持，选择从下拉选项的时候都没有开的形式（http://docs.casperjs.org/en/latest/modules/index.html）的。硒提供select和addSelection命令（https://seleniumhq.github.io/selenium/docs/api/javascript/index.html）。我还在CasperJS GitHub页面上提交了一个挂起的问题票据以实现本地化（https://github.com/n1k0/casperjs/issues/1390）。

来源

2016-01-01 02:21:22 tfmontague

稍微哈克的方式做到这一点不使用jQuery利用所内置的卡斯帕方法是：

// Assumes the select box is on the first item at index 0 
chooseSelectOption = (friendlyName : string, selectLocator : string, optionIndex : number) => { 
    casper.test.assertExists(selectLocator, "then select index " + optionIndex + " in the " + friendlyName + " select box"); 
    casper.click(selectLocator); 
    this.goDown(selectLocator, optionIndex); 
}; 

// recursive funtion to go down various levels 
private goDown = (locator: string, depth : number, currentLevel : number = 0) => { 
    if (currentLevel >= depth) { return; } 
    casper.sendKeys(locator, casper.page.event.key.Down, { keepFocus: true }); 
    this.goDown(locator, depth, currentLevel + 1); 
};

这是打字稿，但如果你需要，你可以编辑香草JS。您需要使用递归函数，因为正常for循环会遇到capser排队系统的困难。

来源

2016-06-16 12:30:28 Ruskin

这是简单的代码在卡斯帕JS

casper.evaluate（功能（CC，security_code输入信用卡的详细信息）{

 document.querySelector('input#receipt_creditcard_number').value = CC; 
     document.querySelector('select#receipt_creditcard_month').selectedIndex = 10; 
     document.querySelector('select#receipt_creditcard_year').selectedIndex = 10; 
     document.querySelector('input#receipt_creditcard_verification_value').value = security_code; 
     document.querySelector('input#receipt_save_creditcard_in_profile').click(); 
    }, '4242424242424242','123');

来源

2016-08-01 18:29:50 Ravishankar

香草JavaScript的解决方案（触发的onchange法）：

casper.evaluate(function() { 
    var select_element = document.getElementById('#select_element_selector'); 
    select_element.value = 'value'; 
    select_element.onchange(); 
});

来源

2017-07-22 07:35:44 tejesh95

如何单击“选择选项”，然后评估加载的内容与casperjs

回答

相关问题