見出し画像

自動化テストでのベーシック認証の課題とCypress での認証処理の実践的ガイド

プロダクト共創組織

Webアプリケーションのテスト自動化は、品質を確保する上で非常に重要です。しかし、ログイン方式の１つである「ベーシック認証」で保護されたシステムをテストする場合、少し工夫が必要になります。
この記事では、Cypress というテストツールにおいて、ベーシック認証を扱う方法を説明します。

ベーシック認証の概要

ベーシック認証は、HTTPプロトコルに組み込まれた単純な認証スキームです。ユーザー名とパスワードをBase64でエンコードし、リクエストヘッダーの一部として送信することが含まれます。その単純さ、広範なサポート、ステートレスな性質により、特に開発やテスト中の多くのシナリオで魅力的な選択肢となっています。ベーシック認証のモーダルは以下のように表示されます。

出典：https://authenticationtest.com/

なぜCypressでベーシック認証を処理する必要があるのか？

ベーシック認証で保護されたアプリケーションのテストを自動化する際、テストスクリプト内でシームレスに認証を処理することが不可欠です。ベーシック認証が適切に処理されていない場合、テストフローが中断され、テストを実行せずに失敗する可能性があります。ベーシック認証を適切に処理することで、テストが手動介入なしで実行でき、一貫性のある信頼性の高い結果を提供することができます。

方法1：Cypressのauthオプションを使用する
Cypressは、cy.visit() 関数の auth オプションを使用してベーシック認証を処理する組み込みの方法を提供しています。この方法は簡単で、最小限の設定で済みます。

describe('Basic Authentication Test', () => {
  it('should successfully authenticate using auth, () => {
    cy.visit('https://example.com', {
      auth: {
        username: 'yourUsername',
        password: 'yourPassword'
      }
    });
    
    // Add your tests here
  });
});

この方法は、単純なベーシック認証シナリオに効果的です。ただし、二要素認証やCAPTCHAなどのより複雑な認証フローには適していない場合があります。

利点

  • シンプルさ：実装と理解が容易。

  • クリーンなコード：テストコードをクリーンで読みやすく保つ。

方法2：URLに認証情報を埋め込む
Cypressでベーシック認証を処理する最も簡単な方法の1つは、保護されたページを訪問する際にURLに直接認証情報を埋め込むことです。この方法では、訪問するURLに直接ユーザー名とパスワードを埋め込みます。URLに認証情報が露出するため安全性は低くなりますが、テスト目的では便利な場合があります。
認証情報を埋め込むURLの形式は以下の通りです：

https://username:password@domain.com

上記の形式を使用する例は以下の通りです：

describe('Basic Auth Test with URL Embedding', () => {
  it('should successfully authenticate using embedded credentials', () => {
    const username = 'yourUsername';
    const password = 'yourPassword';
    const url = `https://${username}:${password}@example.com`;
    
    cy.visit(url);
    
    // Add your tests here
  });
});

これはベーシック認証を処理する迅速かつ簡単な方法ですが、安全性が低く、一般的に本番環境では推奨されません。

利点

  • シンプルさ：単純な認証シナリオに対して実装が容易。

  • クイックセットアップ：追加の設定や準備が不要。

追加のヒント
認証情報をCypress設定ファイルに保存し、Cypress.config()を通じてアクセスして、cy.visit() 関数の auth オプションで送信したり、URLを動的に構築したりするのに使用します。これにより、テストファイルに認証情報をハードコーディングすることを防ぎます。

// cypress.json
{
  "username": "yourUsername",
  "password": "yourPassword"
}
____________________________________________

// Test file Method 1
cy.visit('https://example.com', {
  auth: {
    username: Cypress.config('username'),
    password: Cypress.config('password')
  }
});
____________________________________________

// Test file Method 2
const username = Cypress.config('username');
const password = Cypress.config('password');
const url = `https://${username}:${password}@example.com`;

cy.visit(url);

Cypressでのベーシック認証の処理は、それぞれに利点と考慮事項がある様々な方法で達成できます。方法1のcy.visit()のauthオプションを使用する方法は簡単で、テストコードをクリーンで読みやすく保ちます。方法2のURLに認証情報を埋め込む方法も、単純なシナリオでは簡単かつ迅速にセットアップできます。テストのニーズとセキュリティ要件に最も適した方法を選択してください。
これらの方法を理解し実装することで、ベーシック認証に直面した場合でも、自動化テストがスムーズに実行されることを確保できます。

この記事は、2024年9月に弊社のQAエンジニアである Prahlad Shrestha が執筆した内容を日本語に翻訳したものです。
英語版は、こちらからご覧いただけます。
https://articles.wesionary.team/handling-basic-auth-in-cypress-374f06889685

採用情報

私たちはプロダクト共創の仕組み化に取り組んでいます。プロダクト共創をリードするプロダクト・マネージャー、そして、私たちのビジョンを市場に届ける営業メンバーを募集しています！

開発パートナーをお探しの企業様へ

弊社は、グローバル開発のメリットを活かし、高い費用対効果と品質を両立しています。経験豊富で多様性のあるチームが、課題を正しく理解し、最適なシステムと優れた体験を実現します。業務システムの開発、新規事業の開発、業務効率化やDX化に関するお困りごと、ぜひ弊社にご相談ください。