Capybara Testing: нажатие на кнопку не работает должным образом

Question

Я пишу тест функции с использованием capybara, где я должен проверять каждую кнопку на функциональность. На самом деле, я тестирую следующую функцию: feature for testing image

Я попытался найти последний значок удаления на столе и щелкнуть по нему, однако диалоговая панель не появляется. Мой тестовый сценарий:

scenario 'delete button ' do 

     # click on delete icon does not work 
     (page.all('.table_amenities tr').last).find(".amenity_action>button", visible: false).click 
     expect(page).to have_content '削除してもよろしいですか?' 
    end 

Javascript код этой функции:

template#room-amenities-template 
    div[v-if="permissions[0]"] 
    #room-amenities-dialog 
     | {{ window.I18n.dialogs.delete_confirmation }} 
    .search_date 
     router-link[to="/buildings"] 
     span.but_choice.hvr-fade 
      i.fa.fa-home[aria-hidden="true"] 
      | {{ window.I18n.activerecord.models.building }} 
     a 
     span.but_choice_active 
      i.fa.fa-list[aria-hidden="true"] 
      | {{ window.I18n.activerecord.models.room_amenity }} 
     router-link[to="/room_types"] 
     span.but_choice.hvr-fade 
      i.fa.fa-bars[aria-hidden="true"] 
      | {{ window.I18n.activerecord.models.room_type }} 
     router-link[v-if="permissions[1]" to="/room_amenities/new"] 
     span#new-room-amenity.but_save.hvr-fade 
      i.fa.fa-plus[aria-hidden="true"] 
      | {{ window.I18n.buttons.new }} 
    .for_table_amenities 
     table.table_amenities[width="80%" border="1px solid #313131;"] 
     tr 
      th.amenity_number 
      | {{ window.I18n.support.tables.num }} 
      th.amenity_title 
      | {{ window.I18n.activerecord.models.room_amenity }} 
      th.amenity_action 
      | {{ window.I18n.support.tables.actions}} 
     tr[v-for="(roomAmenity, index) in roomAmenities"] 
      td 
      | {{ index + 1 }} 
      td.amenity_title 
      | {{ roomAmenity.title }} 
      td.amenity_action 
      template[v-if="permissions[2]"] 
       router-link[:to= "{ path: '/room_amenities/' + roomAmenity.id }"] 
       button.btn-link 
        i.fa.fa-pencil[aria-hidden="true"] 
       template[v-if="permissions[3] && roomAmenity.rooms.length === 0"] 
       | | 
       button.btn-link[@click= "promptRemove (index, roomAmenity.id)"] 
        i.fa.fa-trash.delete_from_table[aria-hidden="true"] 

Html код этой таблицы:

<td>4</td> 
<td class="amenity_title">Refrigerator</td> 
<td class="amenity_action"> 
    <a href="/room_amenities/4" class=""> 
    <button class="btn-link"><i aria-hidden="true" class="fa fa-pencil"> </i></button></a> 
    | 
<button class="btn-link"><i aria-hidden="true" class="fa fa-trash delete_from_table"></i></button> 

Кто-нибудь есть идея, почему диалоговая панель мог не отображается значок удаления?

Answer 1

Вы не можете нажимать на невидимые элементы, поэтому передайте параметр visible: false, а затем вызывать щелчок на результирующем элементе не имеет смысла. Кроме того, вы хотите передать опцию minimum: 1 на вызов all, чтобы убедиться, что таблица действительно загружена, или используйте селектор css, например: last-child, а не all. Что-то вроде

page.find('.table_amenities tbody tr:last-child').find(".amenity_action > button:last-child).click 

должно работать. Если это не сработает, проверьте ошибки JS, которые мешают обработчику кликов.