CasperJS动态选择列表
需要帮忙
我正在从这个网站上抓取数据，其中包含三个相互关联的选择列表，如果选择了来自第一个选择列表的任何选项，则此函数称为onchange="Javascript:submitForm2();第二个填充选择列表。
然后如果选择第二个选择列表中的选项，则调用相同的js函数onchange="Javascript:submitForm2();" 最后，这个表单的两个提交按钮分别调用不同的js函数来填充结果。 所以我检查了文档，但没有找到任何关于选择列表的信息。
三个动态变化的选择列表相互连接
表单有两个提交按钮
尝试使用这些代码this.click('select#s1 option[value="26"]'); this.debugHTML(); 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')
共享解决方案脚本。 我迭代了选择列表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()")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()")
你可以做这样的事情，你有一个有三个互连选择的表格。
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和Jquery用链式选择