自動テストツールCypressのインストールや、サンプルスクリプトの実行の仕方は以下で解説しましたが、
今回は、テストコードを実際に書いていく手順について解説したいと思います。
Specファルの新規作成
CypressでテストコードはSpecファイルへ記述します。
ということで、まずは「+ New Spec」ボタンをクリックしましょー
![](https://test-hack.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-26-13.48.41.png)
続いて「Create new empty spec」をクリック
![](https://test-hack.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-26-13.49.01.png)
次に下記のようなウィンドウが表示されます
specファイルのファイル名を変更する場合は、ここで変更し「Create Spec」ボタンをクリック
![](https://test-hack.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-26-14.37.55.png)
下記のような、テスト対象のサイトをブラウザで開くだけの簡単なコードが表示されます。
「Okay, run the spec」をクリック。
![](https://test-hack.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-26-13.49.43.png)
自動的にテスト対象のページを開くだけの簡単なテストが開始します。
テストコード(Specファイル)の編集
そのテストコードを修正したい場合は、画面左側で該当のテストへマウスオーバーすると「Open IDE」の文字が表示します。
そこで任意のIDEを選択し、テストコードを修正する為のツールを開きます。
![](https://test-hack.com/wp-content/uploads/2022/09/スクリーンショット-2022-09-05-9.19.12.png)
以下は、テキストエディタ「Sublime Text」で表示しています。
![](https://test-hack.com/wp-content/uploads/2022/09/スクリーンショット-2022-09-05-9.25.51.png)
訪問するテスト対象を「https://example.cypress.io」から「https://test-hack.com/」に変更して上書き保存してみます。
![](https://test-hack.com/wp-content/uploads/2022/09/スクリーンショット-2022-09-05-9.38.40.png)
そうすると「https://test-hack.com/」へ訪問するだけのテストが走り、下記のようにテストが通ったことがわかります。
![](https://test-hack.com/wp-content/uploads/2022/09/スクリーンショット-2022-09-05-9.39.23-1024x380.png)
次にクリックする操作を加えます。
ヘッダーメニュー内の「テスト知識全般」をクリックするコードを追加すると以下のような形になります。
![](https://test-hack.com/wp-content/uploads/2022/09/スクリーンショット-2022-09-05-11.02.13.png)
「●●すること」みたいなアサーションを加える方法
テストとうのは、単純に画面操作するだけではなく「●●すること」みたいなチェック/確認の操作があってテストが成立するはずです。
というわけで、次に「テスト知識全般」画面へアクセスした後、
画面上に「テスト知識全般」のテキストが表示していること、をチェックするアサーションのコードを加えます。
アサーションはshouldのコマンドを使います。(オフィシャルのドキュメントはこちら)
![](https://test-hack.com/wp-content/uploads/2022/09/スクリーンショット-2022-09-06-15.56.47.png)
テストコードを保存するとテストが自動で実行されます。
上記のテストコードを実行した結果は以下のように、テストが通っていることがわかります。
![](https://test-hack.com/wp-content/uploads/2022/09/スクリーンショット-2022-09-06-15.59.08-1024x448.png)
以上が
・テスト対象へのアクセス
・クリック
・アサーション
といった、Cypressで自動テストを行う際の基本的なテストコードの解説でした。
![](https://www14.a8.net/0.gif?a8mat=3HQS1E+5KN5YI+3TVC+TTTEP)