ロジックもComponentもちゃんとテストが書けたぞ！！完璧だ！！
...しかし、それらを組み合わせたらサービスがちゃんと動くか、そこまでは担保してくれません。
そこで、e2eテストの出番です。
e2eテストとは
e2e(End to End)テストとは、システム全体を通して正しく動くかを検証するためのテストです。
テストコードを書いて実行するテストを指しているわけではなく、人間が仕様書通りに動くか確認するテストも含まれます。
...といっても、人力でテストをするには、工数がかかったり、網羅性に欠けていたりと課題がありますね。
(人力のテストでしか気づけないことももちろんありますが。)
そこで、e2eテストを自動化するツールが
e2eテストツールの種類
ローコードのe2eがとても魅力的...ですが、自分のプロダクトではcypressを使っているので、
cypressにスポットを当てて作っていこうと思います！！
cypressとは？
cypressは、「ブラウザで実行されるすべてのものに対する高速で簡単かつ信頼性の高いテスト」ができるツールです。
そのため、e2eテスト用というわけではなく、単体テストもできます！！
その他cypressにできること
- cookieやlocalStrageなども操作できる
- スクリーンショットやビデオを記録できる
cypressのディレクトリ構造
🗂 cypress
//テストで使用する静的データを管理するディレクトリ
└ 🗂 fixtures
//テストを管理するディレクトリ
└ 🗂 integration
// プラグインを管理するディレクトリ(テスト実行前に自動的に全部インポートされる)
└ 🗂 plugins
// カスタムコマンドやグローバルオーバーライドに時に使う(テスト実行前に自動的に全部インポートされる)
└ 🗂 support
// cypressの設定を書くjson
cypress.json
cypress始め方
インストール
yarn add -D cypress
起動・実行
yarn run cypress open
書き方
基本的には、cypressが準備した「コマンド」をチェーンメソッドを用いて実行し、検証します。
大枠
jestとほぼ一緒ですが、検証ではtestではなくitを使います。
describe("大項目", () => {
beforeEach(() => {
// ...
});
it('テスト内容', () => {
// ・・・
});
it('テスト内容', () => {
// ・・・
});
});
要素の取得
cypressでは、クラスやidなど色々な方法で要素の指定ができますが、
cypressで使われているか予測しづらいため、予期しない変更・削除をしてしまう可能性があります。
そのため、基本cypress用のカスタム属性(data-test)を付与して使います。
また、カスタムコマンドに定義して、使いまわせるようにすると良いです
Cypress.Commands.add('getBySel', (selector, ...args) => {
return cy.get(`[data-test=${selector}]`, ...args);
});
Cypress.Commands.add('getBySelLike', (selector, ...args) => {
return cy.get(`[data-test*=${selector}]`, ...args);
});
// data-test="cv-button" 属性を持つ要素を取得
cy.getBySel('cv-button')
▼ 参考
要素の操作
取得した要素に対して、チェーンさせて使います。
ほとんどはjavascriptのイベント名と同様ですが、異なるものも多くあるためドキュメントをみて記載すると良いでしょう。
▼ よく使うイベント
- type - DOMに対して入力
- click - 要素をクリック
- blur -フォーカスされたDOM要素をぼかす
- focus -DOM要素にフォーカス
- clear -入力またはテキストエリアの値をクリア
- check -チェックボックスまたはラジオをチェック
- uncheck -チェックボックスのチェックをはずす
- select - select内のoptionを選択
また、同じ処理を繰り返すような場合は、as()を使ってエイリアスを切ることもできます。
beforeEach(() => {
cy.getBySel('cv-button').click().as('cvButton')
})
it('has access to text', function () {
this.cvButton
})
その他よく使う(?)コマンド
- url - 現在のページのURLを取得
- visit - URLにアクセス
- wait - 次のコマンドに進む前に、待機
- clearCookies - cookieを削除
- clearLocalStorage - localStorageを削除
- viewport - viewportを変更(サイズ指定、デバイス指定など)
- screenshot - スクショ撮影
- go - ブラウザの操作(ブラウザバックなど)
検証
cypressでは、shouldコマンドに、chaiというアサーションライブラリの文法を使って検証します。
.should(chainers, value)
例)
cy.getBySel('error').should('be.empty')
cy.getBySel('error').should('contain.text', '必須です')
また、andコマンドを用いて検証を連ねることもできます。
cy.getBySel
.should('have.property', 'name')
.and('contain.text', '必須です')
▼ 参考 - アサーション一覧 | cypress
▼ 参考 - アサーション一覧 | chaijs