Login認証が必要なページのテスト 【中級】
目的：ログインページ、HTTPヘッダー、またはベーシック認証によるページをテストする方法です。
Written by Joseph Wynn
ここでは、SpeedCurveを使用して認証が必要なページをテストする方法について説明します。 これは、基本認証またはWebPagetestスクリプトを使用して行われます。スクリプトを追加する方法については、「Adding WebPagetest scripts to URLs」を参照してください。
基本認証
SpeedCurveは、ベーシック認証をサポートしており、簡単なユーザー名とパスワードを使用してWebサイトにログインすることができます。SpeedCurveにサイトへのアクセスを許可するには、「Settings」を編集し、サイトの基本認証のユーザー名とパスワードを追加します。
基本認証の詳細を追加するには、URLの横にある南京錠のアイコンをクリックします。
WebPagetestのスクリプティング
以下に、さまざまな方法でブラウザセッションを認証するスクリプトの例を示します。各ステップで何が行われるのかを説明するコメントが付いています。スクリプトに関する詳細は、「WebPagetest scripting documentation」を参照してください。
注意：WebPagetestスクリプトはタブ区切りです。 サンプルスクリプトをスクリプトエディタに貼り付けるときは、コマンドと引数の間のスペースをタブで置き換えるように注意してください。
ログインフォームの送信
// Turn data logging off to ensure that performance metrics are only recorded
// after we’ve logged in.
logData 0
// Navigate to the login page
navigate https://speedcurve.com/
// SpeedCurve’s login is a modal popup, so click on the “Log In” link and wait
// for the modal to open.
click id=link-login
sleep 1
// Fill in the login form fields and click the button to log in.
setValue id=loginEmail [email protected]
setValue id=loginPassword testpassword
clickAndWait id=loginButton
// Clear the page so that WebPagetest’s visual analysis can start with a blank page
execAndWait document.body.innerHTML = ”
// Turn data logging back on and navigate to a page that requires authentication
logData 1
「setValue」や「click」などのコマンドは、ページ上でJavaScriptを実行することで動作することに注意してください。これらのコマンドを使用する際に問題がある場合や、ページのインタラクションをより詳細に制御したい場合は、「execAndWait」コマンドを使用してJavaScriptを記述することができます。 たとえば、上記のスクリプトをJavaScriptでフォームに入力するように変更することができます。
execAndWait document.querySelector(‘#loginEmail’).value = ‘[email protected]‘
execAndWait document.querySelector(‘#loginPassword’).value = ‘testpassword’
execAndWait document.querySelector(‘#loginButton’).click()
Reactを使用したフォームの記入
Reactのイベント処理は、プログラムでフォームに記入するのを困難にする可能性があります。以下のコードを使用して、React内のインプットを記入することができます。<VALUE>を設定したい値に置き換えます：
execAndW0.5ait el = document.querySelector(‘#someInput’); proto = Object.getPrototypeOf(el); set = Object.getOwnPropertyDescriptor(proto, ‘value’).set; set.call(el, ‘<VALUE>’); el.dispatchEvent(new Event(‘input’, { bubbles: true }));
認証用クッキーの設定
// Set a cookie on the root speedcurve.com path
setCookie https://speedcurve.com/ userid=xxxxxxxxxxxx
// Navigate to the page that requires authentication
認証ヘッダーの設定
// Set a cookie on the root speedcurve.com path
setCookie https://speedcurve.com/ userid=xxxxxxxxxxxx
// Navigate to the page that requires authentication
