Question

需要帮助

我正在从这个网站抓取数据，其中包含三个相互关联的选择列表，如果选择了来自第一个选择列表的任何选项，则此功能称为onchange="Javascript:submitForm2();，第二个选择列表填充。

然后如果选择第二个选择列表中的选项，则调用相同的js函数onchange="Javascript:submitForm2();"最后，这个表单的两个提交按钮分别调用不同的js函数来填充结果。所以我查看了文档，但没有找到任何关于选择列表的信息。

三个动态变化的选择列表相互连接

<select name="s1" onChange="Javascript:submitForm2();" style="width: 150px" width="150"> <select name="s2" onChange="Javascript:submitForm2();" style="width: 300px" width="300"> <select name="s3" style="width:300px" width="300">

表单有两个提交按钮

尝试使用这些代码this.click('select#s1 option[value="26"]'); this.debugHTML();

给我这个错误CasperError: Cannot dispatch click event on nonexistent selector: select#s1 option[value="26"]

我也试过document.querySelector('select[name="s1"]').setAttribute('value', "26"); 这给出了TypeError: 'null' is not an object (evaluating'document.querySelector('select[name="s1"]').setAttribute')

Answer 1

共享解决方案脚本。我迭代了选择列表n*n*n次以及日期和两个按钮。


    require 'rubygems'
    require 'capybara-webkit'
    require 'capybara/dsl'
    require 'nokogiri'

    include Capybara::DSL
    Capybara.current_driver = :webkit

    visit("http://thewebsite.com")

    op0_xpath = "//*[@name='selectlist0']/option[1]"
    op0 = find(:xpath, op0_xpath).text
    select(op0, :from => 'selectlist0')

    page.evaluate_script("$('body').submitForm2()")
    sleep(2)

    op1_xpath = "//*[@name='selectlist1']/option[1]"
    op1 = find(:xpath, op1_xpath).text
    select(op1, :from => 'selectlist1')

    page.evaluate_script("$('body').submitForm2()")
    sleep(2)

    op2_xpath = "//*[@name='selectlist2']/option[1]"
    op2 = find(:xpath, op2_xpath).text
    select(op2, :from => 'selectlist2')

    sleep(2)

    find(:xpath, "//input[@name='curYear']").set "2012"
    find(:xpath, "//input[@name='curMonth']").set "10"
    find(:xpath, "//input[@name='curDay']").set "09"

    click_button('button1')
    page.evaluate_script("$('body').submitForm()")

Answer 2

你可以做这样的事情，你有一个有三个互连选择的表格。

var valueFirstSelect  = 125;    
var valueSecondSelect = 6;      
var valueThirdSelect  = 47;     

//create casper object
var casper = require('casper').create({
    loadImages:false,
    verbose: true,
    logLevel: 'debug'
});

//open url
casper.start('http://thewebsite.com');

casper.then(function(){

    //select option on first select
    this.evaluate(function(selectValue){
        document.querySelector('select[name=s1]').value = selectValue; 
        return true;
    },valueFirstSelect);

    //firing onchange event to populate the second select
    this.evaluate(function() {
        var element = document.querySelector('select[name=s1]');
        var evt = document.createEvent('HTMLEvents');
        evt.initEvent('change', false, true);
        element.dispatchEvent(evt);
    });

    //wait until the second select is populated
    this.waitFor(function check() {
        return this.evaluate(function() {
            return document.querySelectorAll('select[name=s2] option').length > 1;
        });
    }, function then() {

            //select option on second select
            this.evaluate(function(selectValue){
                document.querySelector('select[name=s2]').value = selectValue; 
                return true;
            },valueSecondSelect);

            //firing onchange event to populate the third select        
            this.evaluate(function() {
                    var element = document.querySelector('select[name=s2]');
                    var evt = document.createEvent('HTMLEvents');
                    evt.initEvent('change', false, true);
                    element.dispatchEvent(evt);
            });

            //wait until the third select is populated            
            this.waitFor(function check() {
                return this.evaluate(function() {
                    return document.querySelectorAll('select[name=s3] option').length > 1;
                });
            }, function then() {

                    //select option on third select
                    this.evaluate(function(selectValue){
                        document.querySelector('select[name=s3]').value = selectValue; 
                        return true;
                    },valueThirdSelect);

                    //click submit button
                    casper.thenClick('form.items input[type="submit"]', function() {

                        /* Do something after click  */                

                    });
            });         
    }); 
});

casper.run(function() {

    //finish execution script 
    this.exit();
});

如果您的上下文页面包含jQuery库，则此代码可能不同（更小且更干净）。

这里有一个使用casperjs和jQuery与动态选择列表的例子。

CasperJs and Jquery with chained Selects

CasperJS动态选择列表

2 个答案: