将site_prism与动态加载的字段一起使用

Question

我正在努力让测试运行在我向页面动态添加元素的地方。使用cocoon gem使用javascript完成添加。这是该页面的图片。 设置'标题'和'bijbelstudie'和'perikoop 1'一切正常。通过使用site-prism单击“添加新的pericope”按钮，还可以添加更多的pericope。这些元素与pericopes div组合在一起。每个单独的元素都可以用form-group类识别。

我的第一个问题是：我应该用'elements'或'sections'创建一个页面对象吗？我无法从文档中看出哪些应该是首选方法。我的第二个问题，我无法让它发挥作用。我从来没有得到一系列的pericopes，既没有部分也没有元素。

请参阅包含2个元素的页面的HTML代码，以了解代码。

<div id='pericopes'>
    <div class='nested-fields'>
        <div class='input-group'>
            <div class="form-group string required studynote_pericopes_name"><label
                    class="control-label string required" for="studynote_pericopes_attributes_0_name"><abbr
                    title="required">*</abbr> perikoop 1</label>
                <div>
                    <div class="input-group col-sm-12"><input class="form-control string required"
                                                              autofocus="autofocus"
                                                              placeholder="Genesis 1:1-3:21" type="text"
                                                              name="studynote[pericopes_attributes][0][name]"
                                                              id="studynote_pericopes_attributes_0_name"/>
                    </div>
                </div>
            </div>
            <span class='input-group-btn'>
<input type="hidden" name="studynote[pericopes_attributes][0][_destroy]" id="studynote_pericopes_attributes_0__destroy"
value="false"/><a class="delete remove_fields dynamic" style="margin-bottom:-9px" id="delete_pericope"
             href="#"></a>
</span>
        </div>
    </div>

我的页面对象看起来像这样。

class PericopeSection < SitePrism::Section
  element :pericope_field, '.nested-fields'
  element :add_pericope_button, '#add_pericope'
end

class NewStudynotesPage < SitePrism::Page
  set_url '/studynotes/new'

  sections :pericopes, PericopeSection, 'div#pericopes'

  element :title_field, '#studynote_title'
  element :studynote_field, 'trix-editor'
  element :submit_button, '#submit_form'
end

Answer 1

我自己修好了。我摆脱了section并用elements解决了它。

class NewStudynotesPage < SitePrism::Page
  set_url '/studynotes/new'

  elements :pericopes, '.form-control'
  element :add_pericope_button, '#add_pericope'

  element :title_field, '#studynote_title'
  element :studynote_field, 'trix-editor'
  element :submit_button, '#submit_form'
end

rspec现在看起来如下：

require 'rails_helper'

feature 'Users can add multiple pericopes to a studynote', focus: true do
  let(:user) { create(:user) }

  scenario 'to multiple pericopes with valid attributes', js: true do

    create(:biblebook, name: 'Jona')
    login_as(user)

    nsp = NewStudynotesPage.new
    nsp.load
    nsp.title_field.set('Titel')
    nsp.studynote_field.set('Jona is bijzonder.')
    nsp.add_pericope_button.click
    nsp.pericopes[0].set('Jona 1:1 - 1:10')
    nsp.add_pericope_button.click

    nsp.pericopes[1].set('Jona 2:20 - 3:3')
    nsp.submit_button.click

    expect(StudynoteShowPage.new.pericope_field.text).to eq('Jona 1:1 - 10 | Jona 2:20 - 3:3')
  end
end