4

助けが必要

このWebサイトからデータを取得しています。このフォームには、相互に接続された3つの選択リストが含まれています。つまり、最初の選択リストのいずれかのオプションが選択された場合、この関数が呼び出されonchange="Javascript:submitForm2();、2番目の選択リストにデータが入力されます。

その後、2番目の選択リストからオプションが選択された場合、同じjs関数が呼び出されonchange="Javascript:submitForm2();"ます。最後に、このフォームの2つの送信ボタンがそれぞれ異なるjs関数を呼び出し、結果を入力します。そのため、ドキュメントを確認しましたが、選択リストに関する情報は見つかりませんでした。

相互接続された3つの動的に変化する選択リスト

<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">

フォームには2つの送信ボタンがあります

これらのコードで試してみました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')

4

2 に答える 2

2

ソリューション スクリプトの共有。選択リストのn*n*n時間を、日付と 2 つのボタンとともに反復しました。


    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()")
于 2012-10-16T07:08:20.767 に答える
1

相互に接続された 3 つの選択を含むフォームがあると、このようなことができます。

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 を使用する例があります。

チェインされた Select を使用する CasperJs と Jquery

于 2013-04-26T19:41:30.710 に答える