javascript - 使用 PhantomJS 在 Google Alert 中创建警报

Question

如果您转到Google Alert例如，当您未使用 Google 帐户登录网站时，您将有机会创建发送到您的 Yahoo 帐户的警报。

我将使用 PhantomJS 创建警报。然后我需要单击“创建警报”按钮。我需要使用 JavaScript 来做到这一点。但PhantomJS似乎无法点击这个按钮!

我什至尝试通过 Google Console 单击此按钮，但失败了。

我使用了三种不同的方式来单击按钮，但没有任何效果。有人可以帮助我单击“创建警报”按钮吗？

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

您的代码存在两个问题:键入和单击。

当您直接设置输入字段的值时，不会调用任何输入事件处理程序。您可以使用 native 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);
}