如何使用NodeJS中的PhantomJS模拟鼠标悬停或在页面上运行JS功能 [英] How to emulate mouseover or run JS function on page with PhantomJS in NodeJS

问题描述

NodeJS，PhantomJS，使用Cheerio进行内容解析

需要解析包含动态加载div（提示）的网页。该事件可以在许多表格上，这是一个例子

当我'特定td'鼠标悬停'时，我看到这个带有数据的橙色块，它动态加载了函数，就像这样

  onmouseover =page.hist（this，'P-0.00-0-0'，'355svxv498x0x0'，417，event，0,1）
  

我只能在加载页面后查看此信息。需要一个特定的行，只有Marathonbet。

当函数运行时，文本被加载到另一个div（id ='tooltip'）并显示给用户。 / p>

我使用幻像来解析这个页面的内容，一切都可以使用静态值，但是如何将这个动态生成的块接收到我在节点路由器内的渲染网页？
我看到两种方式：

1. 模拟鼠标在此坐标上移动以显示所需文本，但
   有一个问题，我怎么知道它的坐标？



2. 在页面加载后模拟函数启动我知道它们编码
   （'355svxv498x0x0'，417），但我怎么做可以从节点运行此函数，
   来自幻像吗？

   
   
   

   这是一些代码，它在我的路由器中接收静态页面内容

```

  phantom.create（ config.phantomParams）.then（ph => {
 _ph = ph; 
 return _ph.createPage（）; 
}）。then（page => {
 _page = page; 
返回_page.on（'onConsoleMessage'，函数（msg）{
 console.log（msg）; 
}）; 
}）。then（（） => {
返回_page.on（'viewportSize'，{width：1920，height：1080}）; 
}）。then（（）=> {
 return _page。 on（'dpi'，130）
}）。then（（）=> {
 _page.setting（'userAgent'，config.use rAgent）; 
返回_page.open（matchLink）; 
}）。然后（（）=> {
返回_page.property（'content'）; 
}）。then（content => {
 let $ = cheerio.load（content）; 
 
 //使用内容并获取所需元素
 
 console.log（$。html（））; 
}）。那么（（）=> {
 _page.close（）; 
 _ph.exit（）; 
}）; 
  

```
我应该使用Casper / Spooky，还是任何人都可以解释如何使用在这种情况下呢？

UPD。尝试使用puppeteer，代码

```

 让matchLink ='http://www.oddsportal.com/soccer/world/club-friendly/san-carlos-guadalupe-xnsUg7zB/'; 
 
（async（）=> {
 const browser = await puppeteer.launch（{
 args：[
'--proxy-server = 46.101.167.43 ：80'，
]}）; 
 const page = await browser.newPage（）; 
 await browser.userAgent（config.userAgent）; 
 await page.setViewport（{ width：1440，height：960}）; 
 await page.goto（matchLink）; 
 await page.evaluate（（）=> page.hist（this，'P-0.00-0-0 '，''355svxv464x0x7omg7'，381，event，0,1））; 
 
 let bodyHTML = await page.evaluate（（）=> document.body.innerHTML）; 
 
 console.log（bodyHTML）; 
 await page.screenshot（{path：'example.png'}）; 
 
 await browser.close（）; 
}） （）; 
  

```

获取
```

 （节点：8591）UnhandledPromiseRejectionWarning：错误：评估失败：TypeError：无法读取属性'stopPropagation'的在工具提示中未定义
（http://www.oddsportal.com/res/x/global-180713073352.js:1:145511）
 at TableSet.historyTooltip（http://www.oddsportal.com /res/x/global-180713073352.js:1:631115)PageEvent.PagePrototype.hist上的
（http://www.oddsportal.com/res/x/global-180713073352.js:1:487314） 
 at __puppeteer_evaluation_script __：1：13 
 at ExecutionContext.evaluateHandle（/home/gil/Projects/oddsbot/node_modules/puppeteer/lib/ExecutionContext.js:97:13）
 at< anonymous> ; 
 at process._tickCallback（internal / process / next_tick.js：188：7）
  

```

目标JS文件中的错误，可能是请求的内容..

解决方案

由于您愿意接受我建议的建议 puppeteer 这是一个原生节点。 js模块在最新的Chromium中打开页面（特别是因为PhantomJS非常过时），并且在做thinkgs时接近PhantomJS。

如果你也使用node。 js 8.x，async / await语法可用于处理promises，它可以轻松地使用puppeteer进行抓取。

因此，要在puppeteer中运行该函数，您将运行

  await page.evaluate（（）=> page.hist（this，'P-0.00-0-0'，' 355svxv498x0x0'，417，event，0,1））; 
  

更新

Puppeteer有很多方便助手，其中一个是 page .hover 字面上会将指针悬停在一个元素上：

  await page.hover（'td.some_selector' ）; 
  

---

但是你想继续使用Phantomjs和优秀的幻影模块，你可以：

  _page.evaluate（function（ ）{
 page.hist（this，'P-0.00-0-0'，'355svxv498x0x0'，417，event，0,1）
}）
  

上的文件page.evaluate ： http://phantomjs.org/api/webpage/method/evaluate.html

NodeJS, PhantomJS, content parsing with Cheerio

Need to parse webpage, that contains dynamically loaded div(hint). The event can be on many table td's, here is an example

When I 'mouseover' on specific td I see this orange block with data, it's dynamically loaded with function, like this

onmouseover="page.hist(this,'P-0.00-0-0','355svxv498x0x0',417,event,0,1)"

I can view this info only after the page is loaded. Need to a specific row, only Marathonbet.

When the function runs, the text is loaded into another div (id='tooltip') and shown to the user.

I use phantom to parse the content of this page, everything OK with static values, but how I can receive this dynamically generated block to my rendered web page inside node router? I see 2 ways:

1. Emulate mouse move on this coordinates to show needed text, but there is a problem, how I can known it's coords?

2. Emulate function start after page is loaded and i known they codes ('355svxv498x0x0',417), but how I can run this function from node, from phantom?

   Here is some code, that recieve static page content in my router

```

phantom.create(config.phantomParams).then(ph => {
    _ph = ph;
    return _ph.createPage();
}).then(page => {
    _page = page;
    return _page.on('onConsoleMessage', function (msg) {
        console.log(msg);
    });
}).then(() => {
    return _page.on('viewportSize', {width: 1920, height: 1080});
}).then(() => {
    return _page.on('dpi', 130)
}).then(() => {
    _page.setting('userAgent', config.userAgent);
    return _page.open(matchLink);
}).then(() => {
    return _page.property('content');
}).then(content => {
    let $ = cheerio.load(content);

    // working with content and get needed elements

    console.log($.html());
}).then(() => {
    _page.close();
    _ph.exit();
});

``` Should I use Casper/Spooky, or anyone can explain how to use it in this case?

UPD. Trying with puppeteer, the code

```

let matchLink = 'http://www.oddsportal.com/soccer/world/club-friendly/san-carlos-guadalupe-xnsUg7zB/';

(async () => {
    const browser = await puppeteer.launch({
        args: [
            '--proxy-server=46.101.167.43:80',
        ]});
    const page = await browser.newPage();
    await browser.userAgent(config.userAgent);
    await page.setViewport({width: 1440, height: 960});
    await page.goto(matchLink);
    await page.evaluate(() => page.hist(this,'P-0.00-0-0','355svxv464x0x7omg7',381,event,0,1));

    let bodyHTML = await page.evaluate(() => document.body.innerHTML);

    console.log(bodyHTML);
    await page.screenshot({path: 'example.png'});

    await browser.close();
})();

```

Get ```

(node:8591) UnhandledPromiseRejectionWarning: Error: Evaluation failed: TypeError: Cannot read property 'stopPropagation' of undefined
    at toolTip (http://www.oddsportal.com/res/x/global-180713073352.js:1:145511)
    at TableSet.historyTooltip (http://www.oddsportal.com/res/x/global-180713073352.js:1:631115)
    at PageEvent.PagePrototype.hist (http://www.oddsportal.com/res/x/global-180713073352.js:1:487314)
    at __puppeteer_evaluation_script__:1:13
    at ExecutionContext.evaluateHandle (/home/gil/Projects/oddsbot/node_modules/puppeteer/lib/ExecutionContext.js:97:13)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)

```

Error in target JS file, may be something with request..

解决方案

Since you're open to suggestions I propose puppeteer It's a native node.js module that opens pages in the newest Chromium (especially useful since PhantomJS is very outdated) and is close to PhantomJS in terms of doing thinkgs.

If you also use node.js 8.x, async/await syntax is available for working with promises and it makes scraping with puppeteer a breeze.

So to run that function in puppeteer you would run

await page.evaluate(() => page.hist(this,'P-0.00-0-0','355svxv498x0x0',417,event,0,1) );

Update

Puppeteer has lots of convenience helpers, one of them is page.hover that literally will hover a pointer over an element:

await page.hover('td.some_selector');

---

But should you want to continue using Phantomjs and the excellent phantom module, you can:

_page.evaluate(function() {
    page.hist(this,'P-0.00-0-0','355svxv498x0x0',417,event,0,1)
})

Documents on page.evaluate: http://phantomjs.org/api/webpage/method/evaluate.html

这篇关于如何使用NodeJS中的PhantomJS模拟鼠标悬停或在页面上运行JS功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！