2014-09-23 82 views
0

有一个下拉菜单,其中包含<select>和一些<option>-源代码中的标记。更改选定的选项值不会更改DOM

如果手动更改通过单击选项值 - 一个<div>的内容与一个id #xyz将被改变(由AJAX,JS ...)

现在,我写了一个JS脚本,并把它称为CasperJS来模拟这个。该脚本工作正常,当我得到的snapshot.png选择选项被改变:

$('select#zzz').val('123').change(); 

document.querySelector('select#zzz').selectedIndex = 2; 

脚本将等待几秒钟(5000毫秒)。

但div的内容将不会被“刷新”或“更改”。

有谁知道,为什么?

下面是脚本:

var casper = require('casper').create({ 
    loadImages:false, 
    verbose: true, 
    userAgent: 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko)', 
    clientScripts: ["jquery.min.js"] 
}); 

casper.start('http://www.somewebsite.tld', function() { 
    this.test.assertExists('select[id="zzz"]', 'select is found'); 
}); 

this.evaluate(function() { 
    document.querySelector('select#zzz').selectedIndex = 2; 
    //$('select#zzz').val('123').change(); 
}); 

casper.wait(5000, function() { 
    this.capture("screenshot.png"); 
    fs.write('results.json', this.getPageContent(), 'w'); 
}); 

casper.run(function() { 
    this.echo('Dropdown selected').exit(); 
}); 

回答

0

老气的问题,但你需要使用

casper.thenEvaluate(function() { 
    $('select#zzz').val('123').change(); 
}); 

,而不是

this.evaluate(function() {