Puppeteer 简明教程

Puppeteer - Handling Confirm Alerts

Puppeteer 能够处理警报。Selenium、WebdriverIO 等自动化工具会在警报出现在页面上之后接受或关闭它。

Puppeteer is capable of handling Alerts. The automation tools like Selenium, WebdriverIO, and so on, accept or dismiss an alert after it has appeared on the page.

但是，在 Puppeteer 中，用户必须在警报出现在页面上之前给出是否接受或关闭警报的指示。为此，必须使用 Puppeteer 触发 on 事件侦听器。

However in Puppeteer, the user has to give direction whether to accept or dismiss an alert before it appears on the page. For this, the on event listener has to be triggered using Puppeteer.

Methods for Handling Confirm Alerts

以下是处理警报的一些方法 −

Some methods to work with Alerts are listed below −

  1. accept(): Promise<void> − This method is used to accept an alert.

  2. message(): string − This method is used to yield the message obtained in an alert.

  3. type(): DialogType − This method is used to obtain the Dialog type. A Dialog type can be a prompt, confirm or prompt.

  4. dismiss(): Promise<void> − This method is used to dismiss an alert.

在下面给出的图片中，单击点击查看 JS 确认后，将显示一个确认警报。让我们获取警报中的文本。

In the below given image, on clicking Click for JS Confirm, a confirm alert is displayed. Let us obtain the text on the alert.

javascript alerts

首先，按照人偶基本测试章节执行步骤 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.

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 confirmAlert(){
   //launch browser in headless mode
   const browser = await pt.launch()
   //browser new page
   const page = await browser.newPage();
   //on event listener trigger
   page.on('dialog', async dialog => {
      //get alert message
      console.log(dialog.message());
      //accept alert
      await dialog.accept();
   })
   //launch URL
   await page.goto('https://the-internet.herokuapp.com/javascript_alerts')
   //identify element with xpath then click
   const b = (await page.$x("//button[text()='Click for JS Confirm']"))[0]
   b.click()
}
confirmAlert()

Step 4 - 执行具有以下命令的代码。

Step 4 − Execute the code with the following command.

node <filename>

所以，在我们的示例中，我们将运行下面给出的命令 -

So in our example, we shall run the command given below −

node testcase1.js
command has been successfully

命令成功执行后，确认警报文本 - 我是 JS 确认将打印在控制台。

After the command has been successfully executed, the confirm alert text - I am a JS Confirm gets printed in the console.