Playwrightで3種類の認証を自動入力
PlaywrightでWebサイトのテストをする際にBasic認証、パスワード、2要素認証の入力が必要になることがあります。
iwb.jpではダッシュボード画面に遷移するためにBasic認証、パスワード、2要素認証の3種類の認証を入力する必要があるので、これらをPlaywrightで自動入力する方法について解説します。
ユーザー名、パスワード、ワンタイムパスワードの認証コードはすべて.envに保存します。
# ベーシック認証
BASIC_AUTH_USERNAME=iwb
BASIC_AUTH_PASSWORD=ba4d610af093cb746cfe5c3fbece57e92534260
# ログイン情報
WP_USERNAME=iwb
WP_PASSWORD=e78799d8f9888c48f0fa70bf68f21e2f391c81f3
# 認証コード
TOTP_SECRET=f06814137242629d1f992554efb08b31eb19a373テスト用のJavaScriptファイルに直接ユーザー名やパスワードを記載すると漏洩リスクが高くなるので、必ず.envファイルに記載してください。
PlaywrightでBasic認証自動入力
Basic認証とはWebサーバーが提供する最もシンプルなユーザー認証方式のひとつです。
.htaccessと.htpasswdファイルを用意するだけでIDとパスワードの認証が実装できます。
iwb.jpのログインページにもBasic認証が実装されており、以下のURLにアクセスするとBasic認証のユーザー名とパスワードの入力画面が表示されます。
Playwrightを使って自動認証する処理をするには以下のコマンドで事前にplaywright, otplib, dotenvをインストールします。
npm i playwright otplib dotenvotplibは2要素認証のワンタイムパスワード、dotenvは.envに書いたユーザー名、パスワード、ワンタイムパスワードの認証コードを読み込むために必要です。
Basic認証はhttpCredentialsのusernameとpasswordを以下のように設定するだけです。
例として test.mjs を作成し、以下のコードを記述します。
import { chromium } from 'playwright'
import dotenv from 'dotenv'
dotenv.config()
;(async () => {
const browser = await chromium.launch({ headless: true })
const context = await browser.newContext({
// Basic認証
httpCredentials: {
username: process.env.BASIC_AUTH_USERNAME,
password: process.env.BASIC_AUTH_PASSWORD
}
})
const page = await context.newPage()
// WordPressのユーザーIDとパスワードを入力
await page.fill('#user_login', process.env.WP_USERNAME)
await page.fill('#user_pass', process.env.WP_PASSWORD)
await page.screenshot({ path: 'screenshot/login.png' })
await page.click('#wp-submit')
await page.waitForSelector('#simba_two_factor_auth')
await browser.close()
console.log('Playwright 完了🎉')
})()
あとは「node test.mjs」を実行すればhttpCredentialsに設定したユーザー名とパスワードが自動入力され、認証を経てログインページを表示できます。
httpCredentialsはplaywright.config.tsでも設定できます。
import { defineConfig } from '@playwright/test';
export default defineConfig({
use: {
httpCredentials: {
username: 'user',
password: 'pass',
},
},
});ログインページが表示できれば、WordPressのユーザーIDとパスワードはpage.fillで入力するだけです。
Playwrightで2要素認証を入力する
Playwrightで2要素認証を入力するためにotplibを使用しています。
以下のようにauthenticator.generate(process.env.TOTP_SECRET)で6桁のワンタイムパスワードを生成して入力します。
iwb.jpではWordPressのAll-In-One Securityプラグインで2要素認証を実装しています。
import { chromium } from 'playwright'
import { authenticator } from 'otplib'
import dotenv from 'dotenv'
dotenv.config()
;(async () => {
const browser = await chromium.launch({ headless: true })
const context = await browser.newContext({
// BASIC認証
httpCredentials: {
username: process.env.BASIC_AUTH_USERNAME,
password: process.env.BASIC_AUTH_PASSWORD
}
})
const page = await context.newPage()
// WordPressログインページへ
await page.goto('https://iwb.jp/wp-login.php')
// WordPressのユーザーIDとパスワードを入力
await page.fill('#user_login', process.env.WP_USERNAME)
await page.fill('#user_pass', process.env.WP_PASSWORD)
await page.screenshot({ path: 'screenshot/login.png' })
await page.click('#wp-submit')
await page.waitForSelector('#simba_two_factor_auth')
// 2要素認証コードを入力
const token = authenticator.generate(process.env.TOTP_SECRET)
await page.fill('#simba_two_factor_auth', token)
await page.screenshot({ path: 'screenshot/totp.png' })
await page.click('#tfa_login_btn')
// ダッシュボード画面のスクリーンショットを保存
await page.waitForSelector('#wpadminbar')
await page.screenshot({ path: 'screenshot/dashboard.png' })
2要素認証コードを入力してログインすれば、WordPressのダッシュボード画面を表示できます。
この記事ではiwb.jpのWordPressのログインページを例としたコードで解説していますが、ほかのBasic認証、パスワード、2要素認証(TOTP)が必要なWebサイトでも前述のコードで自動入力して画面遷移できるので試してみてください。
