使用 capybara selenium 在 rails 项目上测试 vuetify

Question

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

我需要测试使用 vue 2 和 vuetify 创建的注册表单，服务器端使用 ruby 在 rails 上呈现，webpack 5。我用 selenium chrome headless 驱动程序配置了 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工具）？

我不知道还能尝试什么，提前致谢

Answer 1

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

check('Accept', allow_label_click: true)

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

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

Answer 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>

谢谢

使用 capybara selenium 在 rails 项目上测试 vuetify

Testing a vuetify on rails project with capybara selenium

selenium

ruby-on-rails

capybara

vue.js

vuetify.js