「End-to-End Web Testing with Cypress」(2021年)

End-to-End Web Testing with Cypress: Explore techniques for automated frontend web testing with Cypress and JavaScript

作者:Mwaura, Waweru
発売日: 2021/01/29
メディア: ペーパーバック

2021年の読書：22冊目/目標30冊

Testcafeの書籍を読んでいましたが、他にどんなE2Eテストのツールがあるかなと探してみると、「Cypress」が検索に引っかかることがありました。
なので、今回は「Cypress」の書籍を手に取り…TestCafeやSeleniumとはどう違うのかを頭に置きながら読んでみました。

テスト駆動開発（TDD）についても少しだけですが、解説がありました。

TDD プロセス

実装する必要のある機能の定義
新しいテストを書く
テストを実行して、テストが失敗するかどうかを確認します
合格するテストケースのコードを書く
追加された機能に対してテストを実行して、テストに合格することを確認します
コードのリファクタリング
このプロセスを繰り返す

また、TDDを実践するにあたって本書では、「開発が始まる前に終わりを視覚化すること」と書かれているのは簡潔で分かりやすかったです。
サンプルでは、下記の機能要件についてのシナリオを作成して実装していました。

機能要件
 - 新しいtodoアイテムの追加
 - ToDoアイテムの削除
 - 追加されたToDoアイテムの表示
 - 追加されたToDoアイテムの数を表示する

E2Eテストを構築する場合、基本はこのシナリオをWebアプリケーションと対応付けて実装していくわけですが、
読み解くにあたっては、実際の操作とコード上の振る舞いを一致させるには、通常手間をかけないといけないなという印象です。
ユースケース記述やアクティビティ図にしても一度コード上のUIに対応付けないといけないので、自然言語のスクリプトやモデルを書いたらそのまま解決するかというと、なかなか悩みどころです。

また、そういった操作を実装するにあたっては、要素(=セレクタ)を取得する必要があります。
この書籍でもセレクタで取得するための方法としてはいくつかあるということで下記が紹介されていました。

- data-cy
- data-test
- data-testid
- id
- class
- tag
- attributes
- nth-child

Cypressの書籍だからWebマニュアルにも書いてある記述がそのまま推奨になっているのは納得なのですが、どうやら上記のうち、カスタムのdata-*属性を使うと良いらしいです。
それ以外の要素だとどうしても画面設計としてみたときに別の使われ方が意図されたり、他の変更の影響が受けやすいからなのだと思います。

また、Cypressは、少し前に触っていたTestCafeよりもデバッグがしやすく、UIも充実している良いテストフレームワークだなという印象でした。
もしクロスブラウザにもっと対応できていたら個人的にはこちらの方が使いやすい印象です。

少し残念だったところは、本書ではページオブジェクトパターンの実装が紹介されていなかったことでした。
最近のE2Eテストであれば基本は乗っていそうなイメージだったので…。

ですが、基本的な機能についてはSeleniumの書籍などと同様に網羅しているので、ひとまずシナリオテストを作成するには困らない内容だと思います。

メモ

テストファイルの基本構造

// Module declarations

import {module} from 'module-package';

// test body

context('テスト目的', () => {
  beforeEach(() => {
    cy.visit('http://todomvc.com/examples/react/#/')
  });

  describe('テストグループ', () => {

     it('runs sample test テスト名', () => {

        expect(2).to.eq(2);

     })
   })
})