无法单击 Phantom 中的元素答案

【问题标题】：Can't click on element in Phantom无法单击 Phantom 中的元素
【发布时间】：2016-04-20 14:39:40
【问题描述】：

我正在使用 Nodejs 和 npm 模块 Phantom 来废弃网页。单击跨度时，我需要的信息与 ajax 请求一起放置。

目标： 在网站“www.academiadasapostas.com/stats/team/961#tab=t_stats”中，我想点击“德甲”按钮来报废信息。

问题： 我无法直接转到按钮 url (www.academiadasapostas.com/stats/team/961#tab=t_stats&team_id=961&competition_id=9&page=1)，我不知道如何在 Phantom 中点击按钮。

我的代码：

var url = 'https://www.academiadasapostas.com/stats/team/961#tab=t_stats';
phantomInstance.createPage()
    .then((page) => {
        phantomPage = page;
        return page.open(url);
    })
    .then((status) => {
        phantomPage.evaluate(function() {
            //trying click
            return document.querySelectorAll('[data-id]')[1].click();
        })
        .then(function(){
            return phantomPage.property('content');
        })
        .then((content) => {
            // handle content of page
        });
    });

HTML 快照：

<td> 
    <span class="competition all " data-id="0" onclick="teamAjax_Filterchange(this)" style="float: left; display: none;">Tudo
    </span>
    <span class="competition " data-id="9" onclick="teamAjax_Filterchange(this)">                                  
        <ul class="flag" title=""><li class="ar a80" title=""></li><li class="co c1"></li><li class="co chover"></li></ul>Bundesliga
    </span>
    <span class="competition " data-id="10" onclick="teamAjax_Filterchange(this)">                                     
        <ul class="flag" title=""><li class="ar a7" title=""></li><li class="co clc"></li><li class="co chover"></li></ul>UEFA Champions League
    </span>
</td>

编辑 1： 我尝试了这个，但似乎也不起作用：

phantomPage.evaluate(function() { 
    var ev = document.createEvent("MouseEvent");
    ev.initMouseEvent(
        "click",
        true /* bubble */, true /* cancelable */,
        window, null,
        0, 0, 0, 0, /* coordinates */
        false, false, false, false, /* modifier keys */
        0 /*left*/, null
    );
    return document.querySelectorAll('[data-id]')[1].dispatchEvent(ev);
})

【问题讨论】：

你试过this question的建议了吗？您必须将它们移植到为桥编写的方式。
是的，我尝试了 dispatchEvent 建议，但它似乎也不起作用。（添加代码：编辑 1）

标签： javascript node.js web-scraping click phantomjs

【解决方案1】：

我能够使用 python 和 phantomjs 使用以下代码抓取该页面：

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from bs4 import BeautifulSoup

url = 'https://www.academiadasapostas.com/stats/team/961#tab=t_stats&team_id=961'
driver = webdriver.PhantomJS()
driver.set_window_size(1024, 768)

xpath_IN = ".//*[@id='s']/div/div/div/div/div[2]/div/div[3]/div/table/tbody/tr[1]/td[2]/span[2]"
driver.get(url)

WebDriverWait(driver, 40).until(EC.presence_of_element_located((By.XPATH, xpath_IN)))
driver.find_element_by_xpath(xpath_IN).click()

xpath_IN = ".//*[@id='s']/div/div/div/div/div[2]/div/div[3]/table[2]/tbody/tr[19]/td[1]"
WebDriverWait(driver, 40).until(EC.presence_of_element_located((By.XPATH, xpath_IN)))

soup = BeautifulSoup(driver.page_source, 'lxml')
f = open('temp.txt', 'w')
f.write(soup.prettify())
f.close()

driver.close()

我使用德甲按钮的 xpath 来定位并点击它。然后我再次使用 xpath 路径作为单击成功后出现的最后一行（Cartões vermelhos）。这样做是为了等待所有项目在点击后加载。

我使用 BeautifulSoup 阅读该页面并“美化”打印它以确认一切都已加载。

如果您对xpath不熟悉，请在Firefox中安装firebug和firepath插件，您可以通过右键单击要获取的元素来获取xpath。

希望这会有所帮助。

【讨论】：