How to click a "select option" and then evaluate loaded content with casperjs
Solution 1
This is how I do it
this.evaluate(function() {
$('#select_element_selector').val('value').change();
});
The change()
is very important
I'm assuming that you have jQuery on the page
Solution 2
Got same issue here. My solution is:
casper.then(function(){
this.evaluate(function() {
document.querySelector('select.select-category').selectedIndex = 2; //it is obvious
});
this.capture('screenshot.png');
});
Solution 3
The recommended jQuery solution doesn't actually work for me.
casper.evaluate(function() {
$('#select_element_selector').val('value').change();
});
While, the capture()
command shows the select option as selected visually, it doesn't actually trigger the event. Try using this with the waitForText()
command for example; the program will timeout.
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();
What did work for me, was the code provided below (thanks @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');
Although, I think CasperJS should provide native support to select options from a drop-down when they aren't apart of a form (http://docs.casperjs.org/en/latest/modules/index.html). Selenium offers the select
and addSelection
commands (https://seleniumhq.github.io/selenium/docs/api/javascript/index.html). I've also filed a pending issue ticket on the CasperJS GitHub page to implement this natively (https://github.com/n1k0/casperjs/issues/1390).
Solution 4
this is simple code to enter credit card details in casper js
casper.evaluate(function(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');
a_b
Updated on July 05, 2022Comments
-
a_b almost 2 years
I'm trying to crawl the sizes for this product:
The problem: The sizes are loaded after the color of the product is selected.
In the product page's source code, I can see that the dropdown has a onchange-method: It clicks the form #postColor onchange.
The select dropdown:
<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>
The #postColor form, which is clicked onchange:
<input type="submit" name="postColor" value="" onclick="location.href=('./?model=10344-4180&color='+document.forms[0].color.value+'&size='+document.forms[0].size.value+'&addbread=OUTLET&addbread2=DRIZIA&currentimage='+document.getElementById('currentimage').value+'&selectedmi=a1_INDEX_14&prev=10850-4314&next=10413-4183'); return false;" id="postColor" class="cpobutton " style="display: none;">
This is my code so far and it's not working:
casper.start('http://shop.baumundpferdgarten.com/showmodel/?model=10344-4180&addbread=OUTLET&addbread2=DRIZIA&color=0¤timage=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); } }); });
I suspect that problem is that a totally new page is loaded when a color is clicked (the sizes are not dynamically appended).
How would you solve this problem?
-
Brice Favre over 10 yearsI tried with the mouse element but you solution seems to be the better one.
-
tim-montague over 8 yearsThis doesn't work for me. It changes the option drop-down visually (and that can be seen with casper.capture), but it doesn't actually trigger the selected value.
-
CodeGuru over 7 yearsPerfect Thankss
-
Morton almost 7 yearsJust try the code get the data that is what i want.