使用casperjs根据文本单击html元素

时间:2014-01-23 15:01:09

标签: jquery casperjs webpage-screenshot

我的页面上有html元素,这是在登录表单

的安全页面上
 <h4 class="something" id="somethingelse1" style="display: none;">Some Name</h4>
 <h4 class="something" id="somethingelse2" style="display: none;">Some other name</h4>

我希望能够模拟此元素的点击,然后将加载新页面。一旦加载了新页面,我想在其中拍摄div元素的快照。我有一部分拍摄快照,但我无法找到基于其文本点击元素的方法。例如,模拟上面H4元素的单击,其中文本是“其他名称”

这就是我到目前为止......

var casper = require('casper').create({

    pageSettings: {
        loadImages:  true,        
        loadPlugins: true          
    } 
});

casper.start('http://localhost/', function() {

    console.log("page loaded");

    this.fill('form#login-form', { 
        username: 'lbguy', 
        password: 'lbguypass'
    }, true);
});

casper.thenOpen('http://localhost/MysecureSite/page1', function() {
        this.echo(this.getTitle());

    var query_xpath = '//*[@innerHtml="Some other name"]';

    require('utils').dump(this.getElementAttribute(query_xpath , 'id'));  

    //casper.start('http://localhost/MysecureSite/page2', function() {
        //  this.captureSelector('pic.png', '#someelement');    
    //});

});

在页面标题之后,控制台只输出“Null”。我不确定这是否也是正确的方法。目标是基于我将以编程方式发送的选定文本来模拟单击H4元素,然后在该单击操作加载名为someelement的div的第2页之后在第2页上创建快照。

更新

页面加载后,h4元素会通过jquery动态添加到页面中。

由于

2 个答案:

答案 0 :(得分:2)

尝试等待您的h4实际添加到DOM中,然后点击它:

casper.waitForSelector("#somethingelse1").thenClick("#somethingelse1");

答案 1 :(得分:0)

您应该使用xpath单击要尝试单击的元素的文本。

casper.click(x('//*[text()="Your Text"]'));
相关问题