WebdriverIO - 截图捕获

我们可以使用 `saveScreenshot` 方法在使用 WebdriverIO 开发的自动化测试中捕获截图。通常情况下，如果遇到应用程序错误、断言失败等情况，就会捕获截图。

语法

捕获截图的语法如下：

browser.saveScreenshot("name along with path to store screenshot")

这里，将截图保存的名称和路径作为参数传递给方法。在 WebdriverIO 中，我们无法选择对特定元素进行截图。

首先，按照“使用 WebdriverIO 的正确流程”章节中步骤 1 到 5 的操作，步骤如下：

步骤 1 - 安装 NodeJS。关于如何执行此安装的详细信息，请参阅“使用 NodeJS 入门”章节。

步骤 2 - 安装 NPM。关于如何执行此安装的详细信息，请参阅“NPM 安装”章节。

步骤 3 - 安装 VS Code。关于如何执行此安装的详细信息，请参阅“VS Code 安装”章节。

步骤 4 - 创建配置文件。关于如何执行此安装的详细信息，请参阅“配置文件生成”章节。

步骤 5 - 创建规范文件。关于如何执行此安装的详细信息，请参阅“Mocha 安装”章节。

步骤 6 - 将以下代码添加到已创建的 Mocha 规范文件中。

// test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Screenshot', function(){    
      // launch url
      browser.url('https://tutorialspoint.com/index.htm')  
      //identify element then enter text
      const e = $("#gsc-i-id1")
      e.setValue('WebdriverIO')
      //capture screenshot of page
      browser.saveScreenshot("screenshot.png")
   });
});

使用以下命令运行配置文件 - wdio.conf.js 文件：

npx wdio run wdio.conf.js 

关于如何创建配置文件的详细信息，请参阅“wdio.conf.js 文件”章节和“配置文件生成”章节。您的计算机上将显示以下屏幕：

命令成功执行后，项目文件夹中将生成一个名为 screenshot.png 的文件。该文件包含捕获的页面截图。