WebdriverIO - Chai 断言在 Web 元素上

Chai 是一个用于 Node 的断言库。它主要用于 BDD 和 TDD 框架。它可以轻松地与任何 JavaScript 测试框架集成。Chai 的官方文档可在以下链接中找到：

www.npmjs.com/package/chai

要安装 Chai 并将其添加到 package.json 文件中，请运行以下命令：

npm install --save-dev chai

有关 package.json 文件的详细信息将在标题为“package.json”的章节中详细讨论。

您的计算机上将显示以下屏幕：

安装后，我们必须添加以下语句以在我们的代码中添加期望风格的 Chai。

require('chai').expect

语法

Chai 断言的语法如下：

const c = require('chai').expect
c(p.getValue()).to.equal('subject')

让我们实现一个 Chai 断言，并验证以下下拉列表中选择的选项是否符合预期结果。

有关如何处理下拉列表的详细信息将在“处理下拉列表”章节中详细讨论。

首先，请按照“使用 WebdriverIO 的成功路径流程”章节中的步骤 1 到 5 操作，步骤如下：

步骤 1 - 安装 NodeJS。有关如何执行此安装的详细信息在“使用 NodeJS 入门”章节中详细介绍。

步骤 2 - 安装 NPM。有关如何执行此安装的详细信息在“NPM 的安装”章节中详细介绍。

步骤 3 - 安装 VS Code。有关如何执行此安装的详细信息在“VS Code 安装”章节中详细介绍。

步骤 4 - 创建配置文件。有关如何执行此安装的详细信息在“配置文件生成”章节中详细介绍。

步骤 5 - 创建一个规范文件。有关如何执行此安装的详细信息在“Mocha 安装”章节中给出。

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

require('chai').expect
//import chai library
const c = require('chai').expect
describe('Tutorialspoint application', function(){
   //test case
   it('Drodowns with Chai Assertion', function(){    
      // launch url
      browser.url('https://tutorialspoint.com/tutor_connect/index.php')  
      //identify dropdown 
      const p = $("select[name='selType']") 
      //select by index
      p.selectByIndex(1)
      //get option selected
      console.log(p.getValue() + ' - option selected by index')
      //verify option selected with chai assertion
      c(p.getValue()).to.equal('name')
      //select by visible text
      p.selectByVisibleText('By Subject')
      //get option selected
      console.log(p.getValue() + ' - option selected by visible text')
      //verify option selected with chai assertion
      c(p.getValue()).to.equal('subject')
      //select by value attribute
      p.selectByAttribute('value', 'name')
      //get option selected
      console.log(p.getValue() + ' - option selected by attribute value')
      //verify option selected with chai assertion
      c(p.getValue()).to.equal('name')
   });
});

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

npx wdio run wdio.conf.js

有关如何创建配置文件的详细信息在“wdio.conf.js 文件”和“配置文件生成”章节中详细讨论。

您的计算机上将显示以下屏幕：

成功执行命令后，首先会在控制台中打印使用选项索引 - name 选择的选项的值。然后，会在控制台中打印使用可见文本 - subject 选择的选项的值。最后，会在控制台中打印使用属性值 - name 选择的选项的值。

此外，我们还获得了 PASSED 结果，表明应用于下拉列表的所有 Chai 断言都已通过。

让我们实现另一个 Chai 断言，并验证获取的警报文本是否符合预期结果。

有关如何处理警报的详细信息将在“警报”章节中详细讨论。

首先，请按照“使用 WebdriverIO 的成功路径流程”章节中的步骤 1 到 5 操作，步骤如下：

步骤 1 - 安装 NodeJS。有关如何执行此安装的详细信息在“使用 NodeJS 入门”章节中详细介绍。

步骤 2 - 安装 NPM。有关如何执行此安装的详细信息在“NPM 的安装”章节中详细介绍。

步骤 3 - 安装 VS Code。有关如何执行此安装的详细信息在“VS Code 安装”章节中详细介绍。

步骤 4 - 创建配置文件。有关如何执行此安装的详细信息在“配置文件生成”章节中详细介绍。

步骤 5 - 创建一个规范文件。有关如何执行此安装的详细信息在“Mocha 安装”章节中给出。

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

//import chai library
const c = require('chai').expect
// test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Alerts with Chai Assertion', function(){    
      // launch url
      browser.url('https://the-internet.herokuapp.com/javascript_alerts')  
      //identify element with xpath then click
      $("//*[text()='Click for JS Prompt']").click()
      //check if Alert is open
      console.log(browser.isAlertOpen())   
      //get Alert Text
      console.log(browser.getAlertText() + ' - Alert Text') 
      //verify Alert text with Chai assertion
      c(browser.getAlertText()).to.equal("I am a JS prompt")
      //accept Alert
      browser.acceptAlert()
   });
});

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

npx wdio run wdio.conf.js

有关如何创建配置文件的详细信息在“wdio.conf.js 文件”和“配置文件生成”章节中详细讨论。

您的计算机上将显示以下屏幕：

成功执行命令后，首先会在控制台中打印 true，因为它是由 browser.isAlertOpen() 方法返回的。然后，会在控制台中打印警报文本 - 我是一个 JS 提示。

此外，我们还获得了 PASSED 结果，表明应用于警报文本的 Chai 断言已通过。

打印页面