使用 capybara selenium 测试 vuetify on rails 项目答案

【问题标题】：Testing a vuetify on rails project with capybara selenium使用 capybara selenium 测试 vuetify on rails 项目
【发布时间】：2020-10-07 13:50:42
【问题描述】：

我经常使用这个网站，但我从来没有遇到过提问。现在我被屏蔽了，所以是时候问第一个了。

我需要测试一个使用 vue 2 和 vuetify 创建的注册表单，服务器端使用 ruby on rails，webpack 5 渲染。我用 selenium chrome 无头驱动程序配置了 capybara，它在与文本字段和按钮交互时工作，但是当我尝试选中复选框时：

(byebug) check('Accept')
*** Capybara::ElementNotFound Exception: Unable to find visible checkbox "Accept" that is not disabled

Vuetify 隐藏输入并将其替换为漂亮的 div 但是，检查 v-checkbox 的最佳方法是什么？

Signup form

如果我添加了 visible 属性，则会找到输入但没有任何反应。我想我需要与其他元素进行交互？

(byebug) check('Accept', visible: false)
#<Capybara::Node::Element tag="input" path="/HTML/BODY[1]/DIV[1]/DIV[1]/DIV[1]/MAIN[1]/DIV[1]/DIV[2]/DIV[1]/DIV[1]/DIV[1]/FORM[1]/DIV[2]/DIV[2]/DIV[1]/DIV[1]/DIV[1]/INPUT[1]">

我也试过了，但仍然没有任何反应：

(byebug) page.find('input[type=checkbox]', visible: false).set(true)
#<Capybara::Node::Element tag="input" path="/HTML/BODY[1]/DIV[1]/DIV[1]/DIV[1]/MAIN[1]/DIV[1]/DIV[2]/DIV[1]/DIV[1]/DIV[1]/FORM[1]/DIV[2]/DIV[2]/DIV[1]/DIV[1]/DIV[1]/INPUT[1]">

所以我也尝试了点击的方式，但得到了这个错误：

(byebug) page.find('input[type=checkbox]', visible: false).click
*** Selenium::WebDriver::Error::ElementClickInterceptedError Exception: element click intercepted: Element <input aria-checked="false" id="input-96" role="checkbox" type="checkbox" value=""> is not clickable at point (234, 531). Other element would receive the click: <div class="v-input--selection-controls__ripple"></div>
  (Session info: headless chrome=85.0.4183.121)

我也尝试执行原始脚本：

page.execute_script("window.uiApp.$data.terms_and_conditions = true")

vue app是这样挂载的：

    window.uiApp = new Vue({
      i18n,
      vuetify,
      store,
      router,
      el: id,
      render: h => h(App, {
        props
      })
    })

但是window.uiApp.$data是空的，所以这个尝试似乎也失败了:(如何访问vue组件数据（没有vue web工具）？

我不知道还有什么可以尝试的，在此先感谢

【问题讨论】：

用于显示“漂亮”复选框的 HTML 是什么，用户实际点击的是哪个元素？
@Thomas vuetifyjs.com/en/components/checkboxes

标签： ruby-on-rails selenium vue.js capybara vuetify.js

【解决方案1】：

查看链接图像中显示的 HTML（将来在提问时，如果您将相关的 HTML 直接包含在问题中会很有帮助）看起来您有一个与用户可以隐藏的复选框相关联的标签点击。在这种情况下，您可以使用

check('Accept', allow_label_click: true)

当实际的复选框被隐藏时，它会点击相关的标签。如果您希望默认情况下启用该行为，您可以设置Capybara.automatic_label_click = true。

您的另一个选择是准确确定哪个元素实际显示为“复选框”，并使用find(...).click 找到该元素并单击它。

【讨论】：

谢谢你，Thomas，你拯救了我的一天！很抱歉缺少 html，这就是问题所在。我已经尝试过 allow_label_click 选项，但它不起作用。问题出在我用于复选框的 html 中。在标签中，我插入了一个显然不允许点击水豚的弹出窗口。
这是我使用的复选框vuetifyjs.com/en/components/checkboxes/#label-slot 为了解决您的建议，我移出了“条款和条件”链接。
@MarcoMastrodonato 是的 - 它会点击那里的链接中间。您的另一个选项，而不是修改 html，可能是手动查找标签并使用偏移量单击它 - 类似于 `find(:label, 'Accept').click(x: 10, y: 10) 来调整位置在标签元素中发生点击。另外 - 由于答案解决了您的问题，请不要忘记接受它（复选标记），以便您的问题被标记为已回答

【解决方案2】：

我以这种方式更改了复选框：

              <v-checkbox v-model="terms_and_conditions"
                          @input='$v.terms_and_conditions.$touch()'
                          @blur='$v.terms_and_conditions.$touch()'
                          :label="$t('commons.accept')">
              </v-checkbox>
              <div class="ml-2">
                <v-tooltip bottom>
                  <template v-slot:activator="{ on }">
                    <a
                        target="_blank"
                        href="/users/terms_and_conditions"
                        @click.stop
                        v-on="on"
                    >
                      {{ $t('session.sign_up.terms') }}
                    </a>
                  </template>
                  {{ $t('session.sign_up.terms_hint') }}
                </v-tooltip>
              </div>

谢谢

【讨论】：