时间戳

首页 > 解决方案 > 将 site_prism 与动态加载的字段一起使用

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

问题描述

我正在努力让测试运行，我正在向页面动态添加元素。添加是通过 javascript 使用 cocoon gem 完成的。这是页面的图片。 截屏 设置 'title' 和 'bijbelstudie' 和 'perikoop 1' 都可以正常工作。也可以通过使用站点棱镜单击“添加新的 pericope”按钮来添加更多的 pericope。元素被分组到一个pericopesdiv 中。每个单独的元素都可以用一个form-group类来识别。

我的第一个问题是：我应该使用 '<strong>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

标签： capybaracocoon-gemsite-prism

解决方案

我自己修好了。我摆脱了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

推荐阅读