使用水豚硒测试Vuetify on Rails项目

问题描述

我经常使用这个网站，但是我从来没有问过这个问题。现在我被封锁了，现在该问第一个了。

我需要测试使用vue 2创建的注册表单并进行vuetify，服务器端使用ruby on rails渲染，Webpack 5。 我使用硒铬无头驱动程序配置了水豚，它在与文本字段和按钮交互时有效，但是当我尝试选中此复选框时：

(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应用程序的安装方式如下：

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

但是window.uiApp。$ data为空，因此这种尝试似乎也失败了：(如何访问vue组件数据（没有vue Web工具）？

我不知道还能尝试什么，谢谢！

解决方法

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

check('Accept',allow_label_click: true)

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

您的另一种选择是确定确切显示为“复选框”的元素，然后使用find(...).click定位该元素并单击。

,

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

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

谢谢