Cypress のテストで Basic 認証をパスする方法
Node.js のテスティングライブラリ Cypress のテストで Basic 認証をパスする方法についてです。
確認時のバージョン
動作確認に使用したバージョンは次のとおりです:
- Node.js
16.5.0 - Cypress
8.0.0
1. とりあえず Basic 認証をパスする
とりあえず Basic 認証をパスしたい場合は cy.visit() の第 2 引数 options を使用します。
cy.visit(url, options)auth.username: ユーザー名auth.password: パスワード
cypress/integration/basic-auth.js:
it(`Basic 認証をパスできることを確認する`, () => {
const url = 'https://example.com'
cy.visit(url, {
auth: {
username: `ユーザー名`,
password: `パスワード`,
},
})
})変数 url には対象ページの URL を渡します。
参考:
2. 認証情報を設定ファイルで指定する
Basic 認証のユーザー名・パスワードをテストコードに直接書きたくない場合は、ユーザー名・パスワードを設定ファイルの env にセットしておきテストコードではそれらを Cypress.env() で読み込むようにするとよいです。
cypress.staging.json:
{
"baseUrl": "https://example.com",
"env": {
"AUTH_USERNAME": "ユーザー名",
"AUTH_PASSWORD": "パスワード"
}
}cypress/integration/basic-auth-with-env-vars.js:
it(`Basic 認証をパスできることを確認する`, () => {
const username = Cypress.env('AUTH_USERNAME')
const password = Cypress.env('AUTH_PASSWORD')
const url = '/'
if (username && password) {
cy.visit(url, {
auth: {
username,
password,
},
})
} else {
cy.visit(url)
}
})ここでは変数名を AUTH_USERNAME AUTH_PASSWORD としていますが、これらでないといけないわけではありません。
各自がわかりやすい変数名にすれば OK です。
利用する設定ファイルの指定は cypress コマンドのオプション --config-file でできます。
何も指定しなかったときは cypress.json が使用されます。
cypress open --config-file=cypress.staging.json参考:
3. cy.visit() で自動的に Basic 認証をパスする
cy.visit() を実行すれば自動的に Basic 認証をパスするようにしたい場合は、 Cypress のコマンド上書き機能が有用です。
cypress/support/commands.js:
// `cy.visit()` で Basic Auth を自動でサポートする
Cypress.Commands.overwrite('visit', (orig, url, options) => {
const username = Cypress.env('AUTH_USERNAME')
const password = Cypress.env('AUTH_PASSWORD')
if (username && password) {
orig(url, {
auth: {
username,
password,
},
...options,
})
} else {
orig(url, options)
}
})このようにしておくと、設定ファイルで Basic 認証の認証情報が指定されている場合は認証用のヘッダーを追加し、そうでない場合はヘッダーを追加しないというふるまいになります。 これは Basic 認証ありの環境となしの環境を頻繁に切り替えてテストしたい場合などに便利です。
参考: