puppeteer執(zhí)行js

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

嗨，大家好！ 今天，讓我們看看使用Node.js的puppeteer API的另一個(gè)強(qiáng)大功能。

In the first part of this section, let's look at commands for keystroke control and typing as we'll normally do with an opened browser.

在本節(jié)的第一部分中，讓我們看一下用于擊鍵控制和鍵入的命令，就像我們通常在打開的瀏覽器中所做的那樣。

Isn't it cool!!??

是不是很酷！

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

做記錄！ 您應(yīng)該在PC中安裝Node.js和puppeteer。

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

現(xiàn)在已經(jīng)啟動(dòng)并運(yùn)行了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，請(qǐng)閱讀文章NODE＆GOOGLE PUPPETEER API SERIES

Imagine we can write a code that opens a website, fills the form and submits it automatically.

想象一下，我們可以編寫一個(gè)代碼來打開一個(gè)網(wǎng)站，填寫表格并自動(dòng)提交。

Wow... Just using some few lines of code, everything is done for us like a robot...

哇...只需使用幾行代碼，一切就像機(jī)器人一樣為我們完成了...

Hahahaa...

哈哈哈...

Indeed, the puppeteer has made work easy for you and me.

的確，木偶使您和我的工作變得輕松。

Let's see how opening a web page and typing is done.

讓我們看看如何打開網(wǎng)頁(yè)并輸入內(nèi)容。

Now, let's get started.

現(xiàn)在，讓我們開始吧。

As usual, the page.goto command helps us access a webpage.

和往常一樣，page.goto命令可幫助我們?cè)L問網(wǎng)頁(yè)。

Now we'll make use of ; await page.keyboard.type ('ENGINEER GODWILL') and await page.focus('#example-1-email') used to type into the form and focus on the input element respectively.

現(xiàn)在我們將利用； await page.keyboard.type('ENGINEER GODWILL')和await page.focus('＃example-1-email')分別用于鍵入表單并專注于輸入元素。

As we would normally do with an open browser, we first focus (or click) on the form field and then start typing..

就像通常使用打開的瀏覽器一樣，我們首先將焦點(diǎn)放在(或單擊)表單字段，然后開始鍵入。

Await.page.focus takes an obligatory parameter, which is the input element..

Await.page.focus具有一個(gè)強(qiáng)制性參數(shù)，它是輸入元素。

To get the input element, right click on the field and click on inspect, a new window will pop up, then copy the id/ class of the element.

要獲取輸入元素，請(qǐng)右鍵單擊該字段并單擊檢查，將彈出一個(gè)新窗口，然后復(fù)制該元素的ID /類。

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

打開一個(gè)文本編輯器，輸入以下代碼，并將其保存為文件名app.js ：

The code below fills the form...

下面的代碼填寫表格...

const puppeteer = require('puppeteer');(async () => {const browser = await puppeteer.launch()const page = await browser.newPage()await page.goto('file:///H:/js-form-validator-master/index.html')// focus on the element with id specified in bracketawait page.focus('#example-1-name') // types the sentence in bracket await page.keyboard.type('ENGINEER GODWILL') await page.focus('#example-1-email') await page.keyboard.type('[email?protected]')await page.focus('#example-1-password')await page.keyboard.type('admin123')// captures a screenshotawait page.screenshot({ path: 'keyboard.png' }) console.log ('done');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.

在本示例中，我使用已經(jīng)下載的網(wǎng)頁(yè)來簡(jiǎn)化本教程，但是如果它涉及www上的URL，則需要互聯(lián)網(wǎng)連接才能導(dǎo)航到該網(wǎng)站/網(wǎng)頁(yè)。

** The hash symbol (#) is included because we used the id of the input element. If we were to use the class, we would use a dot.

**之所以包含井號(hào)(＃)，是因?yàn)槲覀兪褂昧溯斎朐氐腎D。 如果要使用該類，則將使用點(diǎn)。

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

該文件應(yīng)保存在默認(rèn)的Node.js目錄中。

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

通過在命令提示符處啟動(dòng)文件(如常規(guī)Node.js文件)來運(yùn)行代碼。

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

屏幕快照(圖像文件)然后存儲(chǔ)在名稱為keyboard.png的默認(rèn)Node.js目錄中。

Output image file:

輸出圖像文件：

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

puppeteer執(zhí)行js

總結(jié)

以上是生活随笔為你收集整理的puppeteer执行js_使用Node.js和Puppeteer与表单和网页进行交互– 1的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。