cypressを使ったE2Eテストの自動化〜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の機能について紹介できたらと思っています。
ありがとうございました。