如何点击“选择选项”然后用casperjs评估加载的内容 [英] How to click a "select option" and then evaluate loaded content with casperjs

问题描述

我正在尝试抓取此产品的尺寸：

产品链接

<问题：选择产品颜色后会加载尺寸。

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

选择下拉列表：

 < select name =colorid =colorclass = cposelectonchange =document.getElementById（'postColor'）。click（）; style =width：150px; margin-right：20px; float：left;> 
< option selected =selectedonfocus =if（this.storeCurrentControl！= null）storeCurrentControl（event，this）; value =0>选择颜色< /选项> 
< option onfocus =if（this.storeCurrentControl！= null）storeCurrentControl（event，this）; value = -  8027> Light Camel< / option> 
< option onfocus =if（this.storeCurrentControl！= null）storeCurrentControl（event，this）;值=  -  9999 >黑色< /选项> 
< / select> 
  

#postColor表单，点击更改：

 < input type =submitname =postColorvalue =onclick =location.href =（'./？model = 10344-4180& amp;颜色= '+ document.forms [0] .color.value +' &放大器;放大器;大小= '+ document.forms [0] .size.value +' &放大器;放大器; addbread = OUTLET&放大器;放大器; addbread2 = DRIZIA&放大器;放大器; currentimage ='+ document.getElementById（'currentimage'）。value +'& amp; selectedmi = a1_INDEX_14& amp; prev = 10850-4314& amp; next = 10413-4183'）; return false; id =postColorclass =cpobuttonstyle =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]选项：nth-​​child（2）'）; 
 this.click （'select [name =color]选项：nth-​​child（2）'）; 
 this.waitForSelector（'select [name =size]选项：nth-​​child（2）'，function（ ）{
 this.test.pass（'selector is！'）; 
 var sizes = this.evaluate（function（）{
 console.log（======= = evaluate ========）; 
 // 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）; 
} 
}）; 
}）; 
  

我怀疑问题是点击颜色时会加载一个全新的页面（尺寸为不动态追加）。

你如何解决这个问题？

解决方案

这就是我的工作方式

  this.evaluate（function（）{
 $（'＃select_element_selector' ）.val（'value'）。change（）; 
}）; 
  

change（）非常重要

我假设你在页面上有jQuery

I'm trying to crawl the sizes for this product:

Link to 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&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;">

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&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);
        }
    });
});

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?

解决方案

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

这篇关于如何点击“选择选项”然后用casperjs评估加载的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！