Chai Smoothie - Chai 用 Protractor アサーション
Chai Smoothie は、Protractor を使用した自動化されたWebテストの複雑な部分を解消します。
このライブラリは、ProtractorベースのSerenity/JSテストにおいて、テストの意図をより明確に表現し、アサーションエラーの意味を明確にし、チームがエラーのトラブルシューティングに費やす時間を削減するための、カスタムChaiアサーションを提供します。
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
「title」というIDで識別された要素が表示されている場合、アサーションは正常に動作し、問題はありません。
しかし、要素が表示されない場合、アサーションは失敗し、次のようなメッセージが表示されます。
AssertionError: expected false to be true
Chai は失敗の理由を伝えるために最善を尽くしていますが、このアプローチでは利用できる情報は要素の表示状態のブール値のみです。このコンテキストの欠如が、エラーメッセージがあまり役に立たない原因となっています。
Chai Smoothie は Chai に欠けているコンテキストを提供し、アサーションの可読性も向上させます！
Vanilla Protractor
自動化されたWebテストで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
Serenity/JSはProtractorを基盤としているため、Serenity/JS Questionsと同様の構文を使用できます。
expect(actor.toSee(WebElement.of(Article.Title))).displayed
オープンソースのSerenity/JSライブラリを使用することには、他にも多くの利点があります - 詳細はこちら。
設定
まず、プロジェクトにまだChaiがない場合はインストールします。
npm install chai --save-dev
次に、Chai Smoothieをインストールします。
npm install chai-smoothie --save-dev
TypeScript
import chai = require('chai');
chai.use(require('chai-smoothie'));
const expect = chai.expect;
expect(element(by.css('h1'))).to.be.present;
JavaScript
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ライセンスの下でライセンスされています。
商用ライセンス、トレーニング、サポート、またはチームを最新のソフトウェア開発プラクティスに習熟させることに関心がある場合は、ご連絡ください。