capybara受け入れテスト - UIの検査から正しい要素を選択する方法

Question

この厳しいテストでは、@notesでログエントリを作成し、@notesを@updated_notesに置き換えてログを更新しようとします。

@notes = Faker::Crypto.md5 
@updated_notes = Faker::Crypto.sha256 

ログエントリを作成するためのコードブロックです。ソースコード内のdivのIDとそのIDを検査で使用しました。

it 'User can update manpower log entry' do 

# create a new entry 
within '#manpower_log_div' do 
    find('#manpower_log_notes').send_keys(@notes) 
    click_button "+ Add" 
    expect(page.has_css?('td', @notes)).to be true 
end 

ここでは、ページ上の既存のメモをクリックして編集します。エラーが受信

# click the already existing notes to be able to edit them 
within '#manpower_log_div' do 
    find('#inline_edit').click 
end 

要素を点検

Capybara::ElementNotFound: 
    Unable to find css "#inline_edit" 

は私達にこれを与えるが、オブジェクトのidがあまりにも特定され気づかされます。データのobject_id =「11747753」。このテストを実行するたびに、私はどの要素を使用して見つけることができますか？

<span textarea_cols="50" class="inline_textarea_edit inline_editable" data-object_field="notes" data-object_id="11747753" data-object_class="ManpowerLog" data-custom_callback="" id="ManpowerLog-11747753-notes" data-value_required="false">a5c3e556f108fd29b00150ca736c82d6</span> 

Answer 1

要素は、それに一致する任意の有効なCSSセレクタで見つけることができます。あなたの例では、クラス属性またはデータ属性、あるいはその両方の組み合わせを使用できます。あなたのコードfind('#inline_edit')で

find('span.inline_textarea_edit[data-object_field="notes"]').click() 

Answer 2

ID inline_editを持つ要素を探しています。 Thomas Walpoleが述べたように、あなたはクラスによって、たとえばCSSセレクタを使用して、ボタンを見つけることができます。

find('.inline_textarea_edit') 

または

find('.inline_editable') 

または

find('.inline_textarea_edit.inline_editable') 

をクラスはその要素のUNIQであることを確認してください。そうでなければ、クラス以外の何かを使用する必要があります。そうでなければ、その要素のuniq属性を探す必要があります。 はまた、あなたがwithin '#manpower_log_div'

を使用しているとして、あなたの要素はあなたがここにCSSセレクタについての詳細情報を見つけることができますID manpower_log_divを持つ要素内にあることを確認してください：http://www.w3schools.com/cssref/css_selectors.asp