puppeteer执行js_使用Node.js和Puppeteer与表单和网页进行交互– 3

puppeteer执行js

Hi guys! Today let’s look at another powerful function of the puppeteer API using Node.js part 3.

嗨，大家好！ 今天，让我们看看使用Node.js第3部分的puppeteer API的另一个强大功能。

In the last part of this section, we saw how to fill and submit a form successfully.

在本节的最后部分，我们了解了如何成功填写和提交表单。

Here’s the link to part 1: INTERACTING WITH FORMS AND WEB PAGES USING NODE.JS AND PUPPETEER- 1

这是第1部分的链接： 使用NODE.JS和PUPPETEER-1与表单和网页进行交互

Here’s the link to part 2: INTERACTING WITH FORMS AND WEB PAGES USING NODE.JS AND PUPPETEER- 2

这是第2部分的链接： 使用NODE.JS和PUPPETEER-2与表单和网页进行交互

Today we’ll look at the last part of this section interacting with forms and web pages.

今天，我们将看一下本节与表单和网页交互的最后一部分。

Let’s see how we can perform the mouse hover function.

让我们看看如何执行鼠标悬停功能。

Take Note! You should have Node.js and puppeteer installed in your PC.

做记录！ 您应该在PC中安装Node.js和puppeteer。

With Node.js and puppeteer already up and running, let’s get started.

现在已经启动并运行了Node.js和puppeteer，让我们开始吧。

*NB: If you don’t yet have Node.js/ puppeteer installed in your PC, read the article: NODE & GOOGLE PUPPETEER API SERIES

*注意：如果您的PC尚未安装Node.js / puppeteer，请阅读以下文章：NODE和GOOGLE PUPPETEER API SERIES

In the last parts, we saw how we can inspect input elements and get their ID/CLASS.

在最后一部分中，我们看到了如何检查输入元素并获取其ID / CLASS。

We’ll then make use of the id or class of any element we wish to hover.

然后，我们将使用我们希望悬停的任何元素的ID或类。

Now, let’s get started.

现在，让我们开始吧。

Let’s get the id/class of the element first.

首先让我们获取元素的id / class。

We’ll then use the await.page.hover to hover over the element.

然后，我们将使用await.page.hover将鼠标悬停在元素上。

Open a text editor and type the following code and save it with the file name app.js:

打开一个文本编辑器，输入以下代码，并将其保存为文件名app.js ：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()
  await page.goto('file:///E:/HDD%2080%20GB%20DATA/CODING%20TUTORIALS%20AND%20CODES/go237.com/go237%20web/New%20design/index.html')
  await page.hover('.overflow_hover_text') // hover command and class of element as parameter
  await page.screenshot({ path: 'hover.png' }) // take a screenshot
  await browser.close()
})()

NB: You can use any URL of your choice,

注意：您可以使用任何选择的URL，

I this example, I used a webpage that was already downloaded to facilitate the tutorial but if it concerns a URL on the www, internet connection is required to navigate to the website/web page.

在本示例中，我使用已经下载的网页来简化本教程，但是如果它涉及www上的URL，则需要互联网连接才能导航到该网站/网页。

The file should be saved in your default Node.js directory.

该文件应保存在默认的Node.js目录中。

Run the code by initiating the file at the command prompt like a regular Node.js file.

通过在命令提示符处启动文件(如常规Node.js文件)来运行代码。

The Screenshot ( image file) is then stored in the default Node.js directory with name hover.png

屏幕快照(图像文件)然后存储在名称为hover.png的默认Node.js目录中。

Output image file:

输出图像文件：

翻译自: https://www.includehelp.com/node-js/interacting-with-forms-and-web-pages-using-node-js-and-puppeteer-3.aspx

puppeteer执行js