使用 PhantomJS 在 Google 警报中创建警报

Question

如果您在未使用 Google 帐户登录的情况下访问 Google Alert 网站，您将有机会创建发送到您的 Yahoo 帐户的提醒。

我将使用 PhantomJS 创建警报。然后我需要点击 CREATE ALERT 按钮。我需要使用 JavaScript 来做到这一点。但是PhantomJS好像不能点击这个按钮！

我什至尝试通过 Google 控制台单击此按钮，但我不能。

我用了三种不同的方法来点击按钮，但没有任何效果。谁能帮我点击“创建提醒”按钮？

javascript:if(!window.jQuery||confirm('Overwrite\x20current\x20version?\x20v'+jQuery.fn.jquery))(function(d,s){s=d.createElement('script');s.src='https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.js';(d.head||d.documentElement).appendChild(s)})(document);

var inputOne = document.getElementsByTagName('input')[0];
inputOne.value = "testAlert";

var inputTwo = document.getElementsByTagName('input')[1];
inputTwo.value = "test@yahoo.com";

var button = document.getElementById('create_alert');

//1.
//button.click();

//2.
//$(button).trigger('click');
//$(button).trigger('change');

//3.
var event = document.createEvent("MouseEvents");
event.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
button.dispatchEvent(event);

我在 PhantomJS 中使用以下代码

phantom.injectJs("functions/jquery.js");

var page = require('webpage').create();

var load, contoroller;
var numOfActions = 1;
var clicked = false;

var initialURL = "https://www.google.com/alerts";

page.open(initialURL, function(status) {

    load = true;
});


page.onLoadFinished = function(status) 
{

    clearInterval(contoroller);
    if (clicked)
    {
        console.log("The status of loading the page is " + status + "\n");
        page.render("SCREENSHOTS/page_" + numOfActions + ".png");
        numOfActions += 1;

        phantom.exit();
    }
    else
    {
        contoroller = setInterval(function () {

            if (load)
            {
                console.log("The status of loading the page is " + status + "\n");
                page.render("SCREENSHOTS/page_" + numOfActions + ".png");
                numOfActions += 1;

                load = false;

                enterQuery("test");
            }
            else
            {
                console.log("The status of loading the page is " + status + "\n");
                page.render("SCREENSHOTS/page_" + numOfActions + ".png");
                numOfActions += 1;

                page.evaluate(function(){
                    var input = document.getElementsByTagName('input')[1];
                    input.value = "test@test.com";

                })

                click();
            }
        }, 5000);
    }
}


function enterQuery(query)
{
    page.injectJs("functions/jquery.js");

    page.evaluate(function(query)
    {
        var box = document.getElementsByTagName('input')[0];
        box.value = query;
        //$(box).keypress();
    }, query);
}


function click()
{
    clicked = true;
    clearInterval(contoroller);

    var but = page.evaluate(function(){

        var button = document.getElementById('create_alert');

        //var event = document.createEvent("MouseEvents");
        //event.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        //button.dispatchEvent(event);

        return button;

    })

    page.sendEvent('click', but);

    window.setTimeout(function () { 

        console.log("The status of loading the page is " + status + "\n");
        page.render("SCREENSHOTS/page_" + numOfActions + ".png");
        numOfActions += 1;

        phantom.exit();

    }, 5000);
}

看来我需要先将鼠标悬停在按钮上。当您悬停鼠标时，您会看到元素的 class 属性发生了变化。我试过 $(button).trigger('mouseover') 但在那之后 class 属性没有改变。如何在该元素上触发 mouseover？

Answer 1

您的代码有两个问题：输入和点击。

当您直接设置输入字段的值时，将调用 none 个输入事件处理程序。您可以使用本机 page.sendEvent("keypress", keys) 键入键，就像用户键入它们一样，因此将触发所有事件处理程序。由于函数不知道输入到哪里，所以需要先关注元素：

page.evaluate(function(selector){
    document.querySelector(selector).focus();
}, selector);
page.sendEvent("keypress", query);

您也可以使用 page.sendEvent("click", posx, posy) 解决点击问题。现在的挑战变成了找出元素在页面上的位置。 This answer 提供了 jQuery 方法来解决这个问题：

page.injectJs("jquery.min.js");

var rect = page.evaluate(function(selector) {
    return $(selector)[0].getBoundingClientRect();
}, selector);

page.sendEvent('click', rect.left + rect.width / 2, rect.top + rect.height / 2);

这是按预期运行的完整脚本：

var page = require('webpage').create();

var load, contoroller;
var numOfActions = 1;
var clicked = false;

var initialURL = "https://www.google.com/alerts";

page.open(initialURL, function(status) {
    load = true;
});


page.onLoadFinished = function(status) 
{

    clearInterval(contoroller);
    if (clicked)
    {
        console.log("1| The status of loading the page is " + status + "\n");
        page.render("SCREENSHOT/page_" + numOfActions + ".png");
        numOfActions += 1;

        phantom.exit();
    }
    else
    {
        contoroller = setInterval(function () {

            if (load)
            {
                console.log("2| The status of loading the page is " + status + "\n");
                page.render("SCREENSHOT/page_" + numOfActions + ".png");
                numOfActions += 1;

                load = false;

                enter("input", "test"); // very first input
            }
            else
            {
                console.log("3| The status of loading the page is " + status + "\n");
                page.render("SCREENSHOT/page_" + numOfActions + ".png");
                numOfActions += 1;

                enter("input.email_input", "test@test.com");

                setTimeout(function(){
                    click("#create_alert");
                }, 500);
            }
        }, 5000);
    }
}


function enter(selector, query)
{
    page.evaluate(function(selector){
        document.querySelector(selector).focus();
    }, selector);
    page.sendEvent("keypress", query);
}


function click(selector)
{
    clicked = true;
    clearInterval(contoroller);

    page.injectJs("functions/jquery.js");

    var rect = page.evaluate(function(selector) {
        return $(selector)[0].getBoundingClientRect();
    }, selector);

    page.sendEvent('click', rect.left + rect.width / 2, rect.top + rect.height / 2);

    window.setTimeout(function () { 

        console.log("4| The status of loading the page is " + status + "\n");
        page.render("SCREENSHOT/page_" + numOfActions + ".png");
        numOfActions += 1;

        phantom.exit();

    }, 5000);
}

使用 PhantomJS 在 Google 警报中创建警报

Create alert in Google Alert using PhantomJS

javascript

jquery

click

phantomjs

onclicklistener