web-dev-qa-db-ja.com

データ属性による要素の検索

RSpecとcapybara-webkitを使用してテストを改善し、すべてのcssとxpathセレクターを削除しようとしています。

find('#edit_user > div:nth-child(7) > div > div > button').click

そして、私はそれらを交換するための最良のオプションを探しています。

要素のcss classを使用するつもりでしたが、一部の「プロ」カピバラテスターは、これは最良のオプションではないと述べました。

だから私の質問は：テストでdataattributesを使用できますか？
要素がある場合

<button name="button" type="submit" class="button last" data-test="edit.update">Update/button>

できますか

find('edit.update').click

？

そして、それは良い考えだと思いますか？このトピックに関するアイデアや情報がありましたら、お気軽にコメントしてください！

ruby-on-railstestingrspeccapybaracapybara-webkit
17
thefabbulus

Data- *属性で要素を見つけるには、CSSセレクターまたはXPathを使用する必要があります。

CSSセレクターの場合：

find('button[data-test="edit.update"]').click

XPathの場合：

find('//button[@data-test="edit.update"]').click

良いアイデアであるかどうかは、実際にアプリケーションに依存します。要素を一意に識別するものを選択する必要があります。 「edit.update」が一意にならない場合、使用するのは良い選択ではありません。 class属性は、ボタンに一意のクラスがあり、その「ボタン」と「最後の」はそうではない場合は問題ありません。

最良のアプローチは、ページ内で一意である必要があり、変更される可能性が低い静的id属性を使用することです。 findメソッドは、IDによる要素の検索もサポートしています。つまり、CSSセレクターやXPathを記述する必要はありません。

23
Justin Ko

Justin Koの答えは正しいです。状況によってはテストを読みやすくするために、もう少し高度なものを追加したかっただけです。 Capybaraに独自の「セレクター」を追加できるので、データテスト属性（テストのためだけに属性を追加したくないので、あまり良い考えではありません）で本当に選択したい場合は、多くのことができます

Capybara.add_selector(:dt) do
  css { |v| "*[data-test=#{v}]" }
end

許可するだろう

find(:dt, 'edit.update')

これにより、テストを理解しやすくすると同時に、複雑なCSSまたはパスクエリをテストコード内の1か所に制限できます。次に、次のようなメソッドを定義できます

def find_by_dt(value)
 find(:dt, value)
end

find（：dt、...）よりもfind_by_dt ...の外観を好む場合

独自の選択にフィルターと説明を追加して、柔軟性を高めたり、エラーの説明を改善したりすることもできます- https://github.com/jnicklas/capybara/blob/master/lib/capybara/selector.rbを参照 capybaraが提供する組み込みセレクター

13
Thomas Walpole