Question

如果您在未使用Google帐户登录时访问Google Alert网站，则可能会向您的雅虎帐户发送提醒信息。

我将使用PhantomJS创建提醒。然后我需要点击CREATE ALERT按钮。我需要使用JavaScript来做到这一点。但似乎PhantomJS无法点击此按钮！

我甚至试图通过Google控制台点击此按钮，但我不能。

我使用了三种不同的方式来点击没有任何作用的按钮。有人可以帮我点击CREATE ALERT按钮吗？

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

您的代码存在两个问题：输入并单击。

直接设置输入字段的值时，不会调用任何输入事件处理程序。您可以使用键入键的本机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 Alert中创建提醒

1 个答案: