CasperJS動態selectlists

Question

需要幫助

我是從這個網站上，有一個包含彼此互連，即如果從從第一選擇列表中選擇此功能的任何選項叫做三個selectlists形式刮數據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

共享解決方案腳本。 我重複了選擇列表​​3210以及日期和兩個按鈕。

 

    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