ウェブサイト＆ウェブアプリのセレクター
概要
ウェブインタラクションを記述する最初のステップは、要素を見つけることです。セレクターは、DOMツリーから要素を見つけるために必要です。Nightwatch v3では、要素の検索をさらに簡単にするためにセレクターがアップグレードされました。V3では、ネストされた要素を簡単に配置できるように、.find()コマンドのチェーンも導入されています。
CSS セレクター
CSS セレクターを使用して、DOMツリー内の要素を簡単に検索できます。Nightwatchがサポートするシンプルで複雑なCSSセレクターには複数の種類があります。いくつかの一般的な例を以下に示します。
- ID ベース
- クラスベース
- 要素クラスベース
- ネスト
// Find an element which contains id = element-id
browser.element.find('#element-id');
// Find all elements with CSS class active
browser.element.findAll('.active');
// Find all <p> elements with class active
browser.element.find('p.active');
// Find element with class active nested within an element with id list
browser.element.find('#id > .active');
// Find an element which contains id = element-id
browser.element.find('#element-id');
// Find all elements with CSS class active
browser.element.findAll('.active');
// Find all <p> elements with class active
browser.element.find('p.active');
// Find element with class active nested within an element with id list
browser.element.find('#id > .active');
XPath セレクター
XPath は、その場所とプロパティに基づいて XML ドキュメントからノードを選択するためのクエリ言語です。XPath を使用して、DOM ツリー内の要素を見つけることができます。
// Find an element with XPath
browser.element.find(by.xpath('xpath string'))
// Find all elements with XPath
browser.element.findAll(by.xpath('xpath string'))
XPath セレクターの詳細については、こちらをご覧ください。
テキストベース
テキストベースのセレクターは、要素を見つける非常に自然な方法です。
// Find an element with text 'Sign In'
browser.element.findByText('Sign In');
// Find all elements with text 'Sign In'
browser.element.findAllByText('Sign In');
// Find an element with text 'Sign In'
browser.element.findByText('Sign In');
// Find all elements with text 'Sign In'
browser.element.findAllByText('Sign In');
プレースホルダーテキストベース
プレースホルダーテキストは、フォーム要素や検索バーでよく使用されます。プレースホルダーテキスト「検索はこちら...」を含む要素の検索方法を見てみましょう。
// Find the search bar with placeholder text 'Search here...'
browser.element.findByPlaceholderText('Search here...');
// Find all elements with placeholder text 'Enter here'
browser.element.findAllByPlaceholderText('Enter here');
// Find the search bar with placeholder text 'Search here...'
browser.element.findByPlaceholderText('Search here...');
// Find all elements with placeholder text 'Enter here'
browser.element.findAllByPlaceholderText('Enter here');
代替テキストベース
代替テキストは、ページ内のメディアでよく使用されます。代替テキストベースの方法で、そのような要素を簡単に検索できます。
// Find the element with alt text 'cat-image'
browser.element.findByAltText('cat-image');
// Find all elements with alt text 'cat-image'
browser.element.findAllByAltText('cat-image');
// Find the element with alt text 'cat-image'
browser.element.findByAltText('cat-image');
// Find all elements with alt text 'cat-image'
browser.element.findAllByAltText('cat-image');
ラベルに基づく入力
フォーム入力には、テキストまたはプレースホルダーテキストが含まれていない場合がありますが、以下に示すようにラベルが含まれている場合があります。
ラベルベースの方法を使用して、ラベルFirst Nameに関連付けられた入力要素を簡単に検索できます。
// Find the input element associated with label 'First Name'
browser.element.findByLabelText('First Name');
// Find the input element associated with label 'First Name'
browser.element.findByLabelText('First Name');
n 番目の要素の選択
要素のリストから特定のインデックスにある要素を見つける必要がある場合は、Nightwatch には便利なメソッド .nth が用意されています。
// Find the 2nd element from all ul elements
browser.element.findAll('ul').nth(2);
// Find the 2nd element from all ul elements
browser.element.findAll('ul').nth(2);
次の推奨ステップ
セレクターを理解したので、それらを使用してコマンドとアサーションを記述できます。