Puppeteer 简明教程

Puppeteer - Type Selector

一旦我们导航到一个网页，我们就必须与页面上可用的网络元素交互，例如单击链接/按钮、在编辑框中输入文本等等，才能完成我们的自动化测试用例。

Once we navigate to a webpage, we have to interact with the webelements available on the page like clicking a link/button, entering text within an edit box, and so on to complete our automation test case.

为此，我们的第一项工作是识别元素。如果一个标签在页面中仅使用一次，我们可以将其用作类型选择器。如果有多个元素具有相同的标签，则页面上仅匹配的第一个元素会被识别。

For this, our first job is to identify the element. If a tag is used only one time in a page, we can use it as a type selector. If there are multiple elements with the same tag, only the first matching element on the page shall be identified.

Syntax

类型选择器的语法如下 −

The syntax for type selector is as follows −

const n = await page.$("h4")

在下面的示例中，让我们识别具有标签名 h4 的突出显示的元素，并获取其文本 - You are browsing the best resource for Online Education。

In the below example, let us identify the highlighted element having tagname h4 and obtain its text - You are browsing the best resource for Online Education.

browsing

首先，按照 Puppeteer 的基本测试章节执行步骤 1 到 2，步骤如下：

To begin, follow Steps 1 to 2 from the Chapter of Basic Test on Puppeteer which is as follows:

Step 1 - 在创建 node_modules 文件夹的目录中创建一个新文件（人偶和人偶核已安装的位置）。

Step 1 − Create a new file within the directory where the node_modules folder is created (location where the Puppeteer and Puppeteer core have been installed).

人偶安装的详情在人偶安装篇章中进行了讨论。

The details on Puppeteer installation is discussed in the Chapter of Puppeteer Installation.

右击创建 node_modules 文件夹的文件夹，然后点击新建文件按钮。

Right-click on the folder where the node_modules folder is created, then click on the New file button.

node modules

Step 2 - 输入文件名，如 testcase1.js。

Step 2 − Enter a filename, say testcase1.js.

testcase1 js

Step 3 - 将以下代码添加到新创建的 testcase1.js 文件中。

Step 3 − Add the below code within the testcase1.js file created.

//Puppeteer library
const pt= require('puppeteer')
async function selectorType(){
   //launch browser in headless mode
   const browser = await pt.launch()
   //browser new page
   const page = await browser.newPage()
   //launch URL
   await page.goto('https://www.tutorialspoint.com/index.htm')
   //identify element with type selector
   const n = await page.$("h4")
   //obtain text
   const text = await (await n.getProperty('textContent')).jsonValue()
   console.log("Text is: " + text)
}
selectorType()

Step 4 - 使用以下命令执行代码 -

Step 4 − Execute the code with the command given below −

node <filename>

因此，在我们的示例中，我们将运行以下命令 -

So in our example, we shall run the following command −

node testcase1.js
best resource

在成功执行该命令后，元素上的文本 - You are browsing the best resource for Online Education 被打印在控制台中。

After the command has been successfully executed, the text on the element - You are browsing the best resource for Online Education gets printed in the console.