如何在按钮不可见之前单击按钮？ [英] How to click a button until the button isn't visible?

问题描述

我正在尝试编写一个单击更多按钮的步骤，直到该按钮变为 display：none; 。

I'm trying to write a step that clicks a more button until that button changes to display: none;.

澄清：我正在使用的网页是 Google+商家页面。还有一个按钮，一次加载大约10个评论，直到它们全部加载。一旦他们，Google将按钮设置为 display：none;

CLARIFICATION: The page I'm working with is a Google+ business page. There is a more button that loads about 10 reviews at a time until they are all loaded. Once they are, Google sets the button to display: none;

我玩了很多完成它的不同方法。现在我正在使用类似的东西：

I've played around with a ton of different ways to accomplish it. Right now I'm working with something like:

这个不起作用，我确信有一种优雅的方法来实现这一目标。

This one is not working, and I'm sure there is an elegant way to accomplish this.

casper.then(function() {
  while (this.visible('.d-s.L5.r0')){
    console.log("Click");
    this.click('.d-s.L5.r0');
  }
});

这个新代码正常运行，但是我必须设置重复的次数，这非常hacky：

This new code is working, but I have to set how many times it repeats which is pretty hacky:

casper.repeat(15, function() {
   console.log("Click");
   this.click('.d-s.L5.r0');
   this.wait(400);
});

推荐答案

您需要对按钮进行适当的状态处理。通过单击 more 按钮，它将不可见，但在下一个项目加载之前，将显示另一个加载 span 。然后再次交换。您需要反映代码中的更改。

You need proper status handling of the button. By clicking the more button it will be invisible, but another loading span will be visible until the next items are loaded. Then it is exchanged again. You need to reflect the change in your code.

if (this.visible(moreButton)) { // synchronous
    // asynchronous steps...
    this.thenClick(moreButton);
    this.waitUntilVisible(loadingButton);
    this.waitUntilVisible(moreButton);
    this.then(function(){
        this.capture("business.png"); // overwrite the current screenshot
        // recursion here
    });
}

此外，优良作法是将事物写为递归，因为你不要在您尝试这些步骤之前，请先了解步骤数。所以完整的代码将是：

Additionally, it is good practice to write the thing recursive, because you don't know the number of steps until you try the steps. So the complete code would be:

var casper = require('casper').create({
    waitTimeout: 10000,
    viewportSize: {
        width: 900,
        height: 720
    }
});

var moreButton = '[id*="about-page"] span.d-s.L5.r0',
    loadingButton = moreButton + ' + span.dP.PA';

function clickMore(max, i){
    i = i || 0;
    if ((max == null || i < max) && this.visible(moreButton)) { // synchronous
        // asynchronous steps...
        this.thenClick(moreButton);  // sometimes the click is not properly dispatched
        this.waitUntilVisible(loadingButton);
        this.waitUntilVisible(moreButton, null, function onTimeout(){
            // only placeholder so that the script doesn't "die" here if the end is reached
        });
        this.then(function(){
            this.capture("business_"+i+".png");
            clickMore.call(this, max, i+1); // recursion
        });
    }
}

casper.start("https://plus.google.com/101200069268247335090/about?hl=en").then(function(){
    clickMore.call(casper);
}).then(function(){
    this.capture("business_end.png");
}).run(function(){
    this.echo("DONE");
    this.exit();
});

您还可以使用参数调用 clickMore 设置这样的最大点击次数：

You can also call clickMore with an argument setting the maximum number of clicks like this:

clickMore.call(casper, 10);

问题仍然存在。有时不会调度点击 more 按钮。您应该探索点击该按钮的其他方法。

A problem remains. The click on the more button is sometimes not dispatched. You should explore other approaches clicking that button.

这篇关于如何在按钮不可见之前单击按钮？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！