cypressを使ったE2Eテストの自動化〜Basic認証 乗り越える編〜

こんにちは。テストエンジニアをしている吉武です。
普段はコードを書かず、主に受入れテストやシステムテストレベルのテストを複数の案件、手動で行っています。

前回、cypressを使ったE2Eテストの自動化〜環境構築編〜として、cypressを動かすための環境構築を行いました。
cypressは前回ご紹介した通り、E2Eテストが行えるテストフレームワークです。
最近私も実際にcypress用のテストコードを書いて、システムテストや受入れテストのフェーズで使っています。

弊社の受入れテストフェーズでは、テストを行うための環境をエンジニア構築してくれるので、主にその環境でテストを行っています。
ただ、案件によってはBasic認証をかけているものもあるので、cypressを使う場合はBasic認証を行うコードを書かないといけません。

CypressのBasic認証

visit | Cypress Documentation
ここに書かれていますが、cypressでは、Basic認証をサポートしています。

使い方はとても簡単。
Basic認証がかかっているサイトにアクセスするときにオプションを指定するだけです。

通常、URLをブラウザで開く場合は、cy.visit('{アクセスしたいURL}')と書くだけです。
が、Basic認証を行う場合は、以下のようなURLになります。

例: https://xxx のBasic認証でログインIDがhoge, パスワードがhogehogeだった場合

cy.visit('https://xxx', {
 auth: {
 username: 'hoge',
 password: 'hogehoge'
 }
 })

とっても簡単ですね！

ただcypressは基本的に一度テストを実行したあと、もう一度実行する場合はセッションがクリアされます（テストツール的には当たり前のような挙動ですけどね）

なのでCustom Commandsにして、テストコード内のbeforeEachの中で呼び出すと便利かなぁと思ってます。
※ Basic認証部分をテストしたい場合はbeforeEachではなく、テスト本文中に期待結果込みで書いたほうが良いかと思います。

//※ support/command.jsに以下を記入
 
 Cypress.Commands.add('basicLogin', fixture =\> { //このbasicLoginがコマンド名になる
 cy.visit('{アクセスしたいURL}', {
 auth: {
 username: '{ログインID}',
 password: '{パスワード}'
 }
 });
 });
 
 //※テストコード(integration/xxx.spec.js)に以下を記入
 beforeEach(() =\> a{
 cy.basicLogin();
 });

おわりに

以上です。
Basic認証サポートしてくれているのはありがたいですね（自分は↑ができるようになるのに結構かかってしまったのですが…（笑））
次回もcypressの機能について紹介できたらと思っています。
ありがとうございました。