Puppeteer 简明教程

Name Selector and Class Name Selector

让我们从了解名称选择器开始。

Let us begin by learning about name selector.

Name 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.

为此，我们的第一项工作是识别元素。如果 name 属性的值在一页中只使用一次，我们可以将其用作名称选择器。如果存在多个具有相同名称的元素，则只识别页面上的第一个匹配元素。

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

Syntax

名称选择器的语法如下所示：

The syntax for name selector is as follows −

const f = await page.$('[name="search"]')

让我们识别下方图像中高亮的编辑框并输入文本 -

Let us identify the edit box highlighted in the below image and enter text −

上图中突出显示的元素的 name 属性值为搜索。上述元素的名称选择器表达式应为 [name="search"]。

The element highlighted in the above image has the name attribute value as search. The name selector expression for the above element shall be [name="search"].

首先，按照人偶基本测试章节执行步骤 1 至 2，如下所示 -

To begin, follow Steps 1 to 2 from the Chapter of Basic Test on Puppeteer which are 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.

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

Step 2 − Enter a filename, say 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 selectorName(){
   //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 edit box with name
   const f = await page.$('[name="search"]')
   //enter text
   f.type("Puppeteer")
   //wait for sometime
   await page.waitForTimeout(4000)
   //browser close
   await browser.close()
}
selectorName()

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

Class Name Selector

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

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

Syntax

类名选择器的语法如下所示：

The syntax for class name selector is as follows −

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

在下面的示例中，让我们识别具有类名 heading 的突出显示的元素并获取其文本 - 关于 Tutorialspoint。

In the below example, let us identify the highlighted element having class name heading and obtain its text - About Tutorialspoint.

上述元素的 id 选择器表达式应为 .heading。

The id selector expression for the above element shall be .heading.