はじめに
Web テストシリーズの前回
Nightwatch を使用したテスト環境のセットアップ方法と、最初のエンドツーエンドテストの作成に成功しました。 簡単におさらいすると、
インストール: npm init nightwatch
作成: browser.navigateTo('/').assert.textEquals('h1', '<TEXT>')
実行: npx nightwatch test
今回の投稿の概要
Web サイトや Web アプリの信頼性を確保するためのエンドツーエンドテストでは、テキストの確認だけでは十分ではありません。Web は複雑な要素で構成され、多くのユーザーインタラクションが含まれます。このチュートリアルでは、最初に作成したテストから継続して、一般的なシナリオをテストする方法を説明します。
Web テストの作成は、主に次の 3 つのコンポーネントを中心に展開されます。
- 要素の発見
- 要素の操作
- 要素とそのプロパティのテスト
次のシナリオのテストを作成できるように、テストのこれら 3 つの主要な側面について説明します。
- [Get Started] ボタンをクリックし、インストールページに移動したかどうかを確認します。
- [Search] をクリックし、クエリ「frame」を入力し、結果を待機し、下矢印キーで 2 番目の結果に移動し、Enter キーを押します。
.parentFrame()ドキュメントページに移動したかどうかを確認します。
この投稿のビデオチュートリアルもご覧いただけます。
発見 👀
Web テストの最初のステップは、テストしたいページで DOM 要素を見つけることです。Nightwatch を使用すると、さまざまなセレクターを使用して要素を見つけることができます。最も一般的な方法は、CSS セレクターを使用することです。これは、.element.find() API を使用して行うことができます。
さらに、以下に示すように、ページ上の要素を他のさまざまな方法で検索できます。次の例では、.find()、.findByText()、および .findByPlaceholderText() を使用します。利用可能なすべてのセレクターの詳細はこちらをご覧ください。
すべての find API をチェーンすることで、要素の内側をさらに深く検索することもできます。これにより、目的の要素を正確に取得することが非常に簡単になります。
例
browser.element.find('main').find('.hero').findByText('Get Started')待機
探している要素がまだ準備できておらず、待つ必要がある場合があります。良い例は、入力ボックスに入力し、結果が表示されるのを待つことです。これは、.waitUntil(<status>) API を使用して行うことができます。
.find(<string>) - 文字列は有効な CSS セレクターである必要があります.findByText(<string>) .findByPlaceholderText(<string>) .waitUntil(<string>) - <string> は、次のいずれかになります: "visible"、"not.visible"、"selected"、"not.selected"、"enabled"、"not.enabled"、または "disabled"例
// Find the element with class "DocSearch-Modal" and wait for it to be visible
browser.element.find('.DocSearch-Modal').waitUntil('visible')要素の検索方法を学習したので、要素の操作に進むことができます。
操作 ✍️
次のステップは、Web と対話することです。最も一般的なシナリオは、ユーザーがボタンをクリックしたり、フォームに入力したりすることです。動的な Web アプリや Web サイトをテストする場合、このテスト部分は不可欠になります。
Nightwatch は、要素操作 API browser.element.find().<interaction_api>() を通じてこれらのアクションをシミュレートするのに役立ちます。 使用可能な操作 API は、clear、click、dragAndDrop、sendKeys、setAttribute、setProperty、submit、update、upload、submitForm、updateValue、uploadFile、clickAndHold、doubleClick、rightClick、および moveTo です。
これに加えて、.perform() を使用して、複雑なユーザーアクションを実行することもできます。ただし、このブログの範囲内では、.click() と .sendKeys() のみを使用します。
.click() - 見つけた要素をクリックします.sendKeys(<string | [...keycodes]>) - 選択した要素に送信するキーボード入力→ 引数:
<string> キーボード入力として送信するテキスト。例: .sendKeys("hello world!")→ 引数:
<[...keycodes]> browser.keys.<special_key> にある特殊キーを含む、文字列とキーコードのリストを送信することもできます。例: .sendKeys([browser.Keys.TAB, "hello", browser.Keys.ENTER])。特殊キーのリストはこちらをご覧ください。例
// Find the button "Get Started" and click it
browser.element.findByText('Get Started').click()
// Find the input box with placeholder "Search docs" and type "frame"
browser.element.findByPlaceholderText('Search docs').sendKeys('frame')
// Press the down arrow and press Enter
browser.element.findByPlaceholderText('Search docs').sendKeys([browser.Keys.ARROW_DOWN, browser.Keys.ENTER])要素の操作方法を学習したので、要素の側面を確認するに進むことができます。
アサート ✅
最後のステップは、探しているものが Web ページに表示されているものと一致するかどうかをテストすることです。これには、必要な要素の属性を取得して検証することが含まれます。
属性の検索
要素で最も一般的にテストされる側面は、テキスト、属性 (クラスを含む)、および値 (入力要素の場合) です。これは、.getText()、.getAttribute()、および .getValue() を使用して実現できます。すべての要素の状態の詳細についてはこちらをご覧ください。
テスト
必要な値を見つけたら、次のステップはそれをテストすることです。テストは、equals、contains、および matches の 3 つの方法に基づいて、必要に応じて緩くまたは厳密に記述できます。
.assert.equals(<str>) - 文字列を受け取り、それが完全に同じかどうかを確認します。.assert.contains(<str>) - 文字列を受け取り、入力が部分文字列として存在するかどうかを確認します。.assert.matches(<regex>) - 入力として正規表現を受け取り、それに対して検証します。例
// Check if the h1 text contains "Install Nightwatch"
browser.element.find('h1').getText().assert.contains('Install Nightwatch')
// Check if the "autocomplete" attribute of the input box is exactly "off"
browser.element.findByPlaceholderText('Filter by title').getAttribute('autocomplete').assert.equals('off').assert の代わりに .verify を使用できます。否定
何かが等しく「ない」はずか、または含まれて「いない」はずかを確認するには、.assert の後に .not を追加するだけです。
// Check if the h1 does not text contains "Selenium"
browser.element.find('h1').getText().assert.not.contains('Selenium')要素の状態
.assert の後に .visible()、.present()、.selected()、および .enabled() を使用して、要素の状態をアサートできます。これは、待機セクションで以前に学習した .waitUntil ステータスと非常によく似ており、互換性があります。
// Check if the element with class "DocSearch-Dropdown-Container" is present
browser.element.find('.DocSearch-Dropdown-Container').assert.present()ドキュメントの状態
browser.assert.url[Contains/Matches/Equals](<string>) と browser.assert.title[Contains/Matches/Equals](<string>) を使用して、ドキュメントのタイトルと URL をアサートできます。
// Check if the title contains "Getting Started"
browser.assert.titleContains('Getting Started')すべてをまとめる 🧩
これまで学習したことをすべて使用して、これらの 2 つのシナリオのテストを作成しましょう。
シナリオ: [Get Started] をクリックすると、インストールページに移動する必要があります
コード
it('Should lead to the installation page on click of Get Started', function (browser) {
browser.navigateTo('/')
browser.element.findByText('Get Started').click()
browser.element.findByPlaceholderText('Filter by title').waitUntil('visible')
browser.element.find('h1').getText().assert.equals('Install Nightwatch')
browser.assert.titleEquals('Getting Started | Developer Guide | Nightwatch.js')
browser.assert.urlContains('nightwatchjs.org/guide/quickstarts')
browser.element.findByPlaceholderText('Filter by title')
.getAttribute('autocomplete').assert.equals('off')
;
browser.end()
})説明
まず、.navigateTo('/') を使用してホームページに移動します。これは、以前にプロジェクトの設定で、プロジェクトの base_url を Nightwatch のホームページに設定したためです。これは、nightwatch.conf.js ファイルで編集できます。ナビゲーション後、[Get Started] というテキストのボタンを見つけてクリックします。リンクがフロントエンドでルーティングされ、ページがリロードされない場合は、アクションが完了するのを待つことをお勧めします。ここでは、左側の検索バーが表示されるのを待ちます。次に、タイトル、URL、および h1 要素をアサートしてインストールページを確認します。検索バーの「autocomplete」属性をアサートして、属性アサーションも示します。
browser.end() はブラウザウィンドウを閉じます。ブラウザを閉じてテストを終了することをお勧めします。シナリオ: 検索を許可し、正しい結果を表示する必要があります
コード
it('Should allow search and show correct results', function (browser) {
browser.navigateTo('/')
browser.element.find('#docsearch').click()
browser.element.find('.DocSearch-Modal').waitUntil('visible')
const search_input = browser.element.findByPlaceholderText('Search docs')
search_input.sendKeys('frame')
browser.element.find('.DocSearch-Dropdown-Container').assert.present()
search_input.sendKeys([browser.Keys.ARROW_DOWN, browser.Keys.ENTER])
browser.element.find('h1').getText().assert.contains('.frameParent')
browser.end()
})説明
ホームページに移動し、検索アイコンを見つけてクリックします。モーダルが開き、表示されるのを待ちます。次に、検索入力バーにテキスト「frame」を入力します。".DocSearch-Dropdown-Container" の存在を確認して結果が読み込まれるのを待ち、結果が読み込まれたら、下矢印キーと Enter キーを押します。これにより、2 番目の結果 .frameParent() のドキュメントに移動し、h1 テキストを検証して確認します。
最終ファイル
最終的な home.spec.js は次のようになります。
describe('Nighwatch homepage', function () {
it('Should have the correct title', function(browser) {
browser
.navigateTo('/')
.assert.textEquals('h1', 'Introducing Nightwatch v3')
.end()
;
})
it('Should lead to the installation page on click of Get Started', function (browser) {
browser.navigateTo('/')
browser.element.findByText('Get Started').click()
browser.element.findByPlaceholderText('Filter by title').waitUntil('visible')
browser.element.find('h1').getText().assert.equals('Install Nightwatch')
browser.assert.titleEquals('Getting Started | Developer Guide | Nightwatch.js')
browser.assert.urlContains('nightwatchjs.org/guide/quickstarts')
browser.element.findByPlaceholderText('Filter by title')
.getAttribute('autocomplete').assert.equals('off')
;
browser.end()
})
it('Should allow search and show correct results', function (browser) {
browser.navigateTo('/')
browser.element.find('#docsearch').click()
browser.element.find('.DocSearch-Modal').waitUntil('visible')
const search_input = browser.element.findByPlaceholderText('Search docs')
search_input.sendKeys('frame')
browser.element.find('.DocSearch-Dropdown-Container').assert.present()
search_input.sendKeys([browser.Keys.ARROW_DOWN, browser.Keys.ENTER])
browser.element.find('h1').getText().assert.contains('.frameParent')
browser.end()
})
})前の投稿で学習した同じコマンドでテストを実行しましょう。
npx nightwatch testブラウザでテストが完了すると、出力は次のようになります。
次回の予定
Web テストの高度なテクニックとシナリオ
今日は、要素の発見、操作、アサートという 3 つのテクニックを使用して、一般的なユースケースのために Web をテストする方法を学びました。Web テストに関する次の章では、テストフック、マルチタブインタラクション、iFrame、コピー/ペースト、async/await の使用、クライアント JS の実行、ジオロケーションのエミュレート、シャドウ DOM の処理、アクション API など、Web テストの高度なテクニックについて学習します。Web テストの高度なテクニックとシナリオに関する今後の投稿にご期待ください。
コミュニティに参加しましょう 💬
ご不明な点がございましたら、Discord サーバーにアクセスして、お気軽にお声がけください。私たちのコミュニティは、常にサポートを提供し、洞察を共有し、テスト関連の質問があればお手伝いします。皆様の積極的な参加を歓迎し、Discord コミュニティで皆様とつながることを楽しみにしています。Twitter を通じてご連絡いただくこともできます。
ハッピーテスティング！🎉
ビデオチュートリアル
