Chai Smoothie - 適用於 Chai 的 Protractor 斷言

Chai Smoothie 讓您以 Protractor 驅動的自動化網頁測試更加順暢。

這個函式庫提供了一組自訂的 Chai 斷言，以幫助您基於 Protractor 的 Serenity/JS 測試更好地表達其意圖、使斷言錯誤更有意義，並減少您的團隊在疑難排解失敗上所花費的時間。

Chai Smoothie 隨附 TypeScript 型別定義，並可與 Chai-as-Promised、Serenity/JS 和純 Protractor 測試搭配使用！

若要將 Chai Smoothie 新增至您的 Node.js 專案

npm install chai-smoothie --save-dev

動機與（遺失的）上下文

假設我們想要多了解一個 HTML 元素的狀態，該元素定義如下：

<h1 id="title">Chai Smoothie is delicious!</h1>

在 Protractor 測試中用來檢查元素是否顯示的典型方法看起來大致如下：

expect(element(by.id('title')).isDisplayed()).to.eventually.be.true

當 id 為「title」的元素顯示時，斷言會正常運作且不會打擾我們。

但是，如果該元素決定不出現，則斷言將失敗並告知我們：

AssertionError: expected false to be true

儘管 Chai 盡力告訴我們失敗的原因，但使用此方法它唯一可用的資訊是元素可見性的布林值狀態。這種上下文的缺乏是導致錯誤訊息不特別有用的原因。

Chai Smoothie 為 Chai 提供了遺失的上下文，並使斷言更具可讀性！

如果您的自動化網頁測試使用 Protractor，您可以使用 Chai Smoothie 將先前範例中的斷言轉換為更具可讀性的內容

expect(element(by.id('title'))).to.eventually.be.displayed

如果上述斷言失敗，錯誤訊息將更具資訊性

AssertionError: Expected the element located By(css selector, *[id="title"]) to be displayed, but it's not.

由於 Serenity/JS 是建立在 Protractor 的基礎上，因此您可以使用類似的語法搭配 Serenity/JS 問題

expect(actor.toSee(WebElement.of(Article.Title))).displayed

使用開源的 Serenity/JS 函式庫也有很多其他好處 - 了解更多。

首先，如果您的專案中還沒有 Chai，請安裝它

npm install chai --save-dev

接下來，安裝 Chai Smoothie

npm install chai-smoothie --save-dev

import chai = require('chai');
chai.use(require('chai-smoothie'));
const expect = chai.expect;

expect(element(by.css('h1'))).to.be.present;

var chai = require('chai');
chai.use(require('chai-smoothie'));
var expect = chai.expect;

expect(element(by.css('h1'))).to.be.present;

Chai Smoothie 提供以下斷言，每個斷言都可以

使用 not 運算子否定：expect(el).not.to.be.displayed、expect(el).not.to.be.present.eventually 等。
與 chai-as-promised 結合使用，以突顯 Chai Smoothie 斷言會傳回 Promise：return expect(el).to.eventually.be.present。

斷言	範例	意義	Protractor API
displayed	`expect(el).to.be.displayed`	元素存在於 DOM 中且可見	`isDisplayed()`
enabled	`expect(el).to.be.enabled`	表單控制元素，例如 `input`，未停用	`isEnabled()`
present	`expect(el).to.be.present`	元素存在於 DOM 中，但可以隱藏	`isPresent()`
selected	`expect(el).to.be.selected`	表單控制項（例如 `input` `checkbox`）已核取	`isSelected()`
text()	`expect(el).to.have.text('some text')` 或 `expect(el).to.contain.text('some text')`	元素具有/包含給定的文字	`getText()`

若要詢問關於 Serenity/JS 或其任何元件（例如 Chai Smoothie）的使用方式和疑難排解，請在 StackOverflow 上發布一個標記為 serenity-js 的問題。

您覺得 Chai Smoothie 有用嗎？給它一個星號！★

發現錯誤？需要某項功能？提出一個問題或提交提取請求。

有任何回饋嗎？請在 Twitter 上告訴我：@JanMolak

Chai Smoothie 函式庫是依據 Apache-2.0 授權許可授權的。

如果您對商業授權、培訓、支援或讓您的團隊掌握現代軟體開發實務感興趣 - 請與我們聯繫。