点击 CasperJS 并没有真正起作用

Question

我试着点击这个按钮：

<input class="right boutonActionTableau nouveau" onclick="addPeriode()" style="margin:0 0 10px 0 !important;" type="button" value="Période">

我的脚本：

var casper = require('casper').create({
    verbose: true,
    logLevel: 'debug',
    pageSettings: {
        loadImages:  false,
        loadPlugins: false
    },
    clientScripts: ["jquery.min.js"]
});

casper.start(url, function() {
    this.userAgent('Mozilla/5.0 (Macintosh; Intel Mac OS X)');
    this.fill('form[action="/Login/DoLogin"]', {
        'Login': 'login',
        'Password': 'password'
    }, true);
    this.click('form[action="/Login/DoLogin"]');
});

casper.thenOpen(url, function() {
    this.echo('ok');
    this.mouseEvent('click','input[class="right boutonActionTableau nouveau"]');
    this.capture('test-screen1.png');
});

casper.then(function() {
    this.capture('test-screen4.png');
});

casper.run();

我没有错误，但是当我截屏时，我的页面没有改变... 在我的网络浏览器中，单击此按钮会在上一个表单之后添加一个表单（如果我单击 3 次，我还有 3 个其他表单）

如果在我的控制台 chrome 我输入：$(function(){addPeriode();}); 没关系...

Answer 1

当您在 casper.evaluate() 中调用它时，您可以运行与 Chrome 控制台中相同的 JavaScript，因为它是沙盒 window进入页面。

您可以致电

casper.evaluate(function(){
    addPeriode();
});

或

casper.evaluate(function(){
    var el = document.querySelector('input.right.boutonActionTableau.nouveau');
    el.click();
    // or
    el.onclick();
});

不过正常点击应该是可以的。您可以尝试点击后稍等

casper.thenOpen(url, function() {
    this.echo('ok');
    this.click('input.right.boutonActionTableau.nouveau');
    this.capture('test-screen1.png');

}).wait(5000).then(function() {
    this.capture('test-screen4.png');
});

Answer 2

你应该使用click()而不是mouseEvent()，除非你有特殊原因。 IIRC，mouseEvent() 要求被点击的按钮位于当前视口中，而 click() 只希望它位于页面的任何位置。

您的代码的第二个问题在这里：

input[class="right boutonActionTableau nouveau"]

要么使用：

input.right.boutonActionTableau.nouveau

如 Artjom 的回答，或者，如果您真的想要 attribute syntax，那么这样：

input[class*="right"][class*="boutonActionTableau"][class*="nouveau"]

顺便说一句，您可能会发现我的故事 in this post 很有用。在那种情况下，link（我认为没有被点击）实际上很好并且被点击了；所涉及的 Ajax 调用返回错误消息，这就是屏幕截图从未更新的原因。但我确实探索了很多点击的方法！

Answer 3

没关系，page.error，我看到问题了：kendoUI。 casperjs 在我之前的操作结束之前加载 thenopen。现在可以这样了：

casper.start('links.net', function() {

    this.fill('form[action="/Login/DoLogin"]', {
        'Login': 'gfdgdfg',
        'Password': 'dfgdfg'
    }, true);
    this.click('form[action="/Login/DoLogin"]');

    this.thenOpen('links2.net', function() {
    this.echo('loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooool');    
    this.click('input.right.boutonActionTableau.nouveau');
    this.capture('test-screen1.png');

})

我的第一个脚本（不起作用）：

    casper.start('links.net', function() {

        this.fill('form[action="/Login/DoLogin"]', {
            'Login': 'fghfgh',
            'Password': 'fghfghfgh'
        }, true);
        this.click('form[action="/Login/DoLogin"]');


        }).wait(5000).then(function() {
            this.capture('testlol.png');
        });


    });

  casper.thenOpen('links2.net', function() {
       this.echo('loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooool');
       this.wait(10000);
       this.click('input.right.boutonActionTableau.nouveau');
       this.wait(10000);
       this.capture('test-screen1.png');

    }).wait(5000).then(function() {
        this.capture('testlol.png');
});

非常感谢您的帮助

点击 CasperJS 并没有真正起作用

Click in CasperJS doesn't really work

javascript

click

casperjs