如何使用 codeceptjs 访问 vuetify-component答案

【问题标题】：How to access vuetify-component with codeceptjs如何使用 codeceptjs 访问 vuetify-component
【发布时间】：2019-09-27 05:34:42
【问题描述】：

我想用 codecept.js 编写一些测试，但我无法访问 vuetify 组件。

    <v-layout>
      <v-flex xs7>
        <v-text-field
          ref="video1min"
          v-model="video1min"
          :rules="[rules.required, rules.youtubeVideo]"
          clearable
          class="pt-0"
          placeholder="Youtube Link"
        />
      </v-flex>
      <v-flex xs5>
        <v-checkbox
          v-model="defaultVideo"
          v-ruid="'defaultVideo'"
          label="Default Video"
          color="primary"
          class="default-video"
          @change="setDefaultVideo"
        />
      </v-flex>
    </v-layout>

我添加了一个v-ruid，通常可以这样点击：

I.click('[data-ruid=defaultVideo]');

但是使用 vuetify 组件，我总是收到错误消息：element not interactable

这是因为data-ruid被添加到复选框周围的div中。如何直接访问复选框？

【问题讨论】：

标签： javascript testing selenium-webdriver vuetify.js codeceptjs

【解决方案1】：

你可以使用 CSS Selector 来获取 input 里面的 dom 元素。

这个选择器应该可以工作：

'[data-ruid=defaultVideo] input'

编辑：

如果是v-checkbox，您也可以点击标签。

选择器是：

'[data-ruid=defaultVideo] label'

【讨论】：

这不起作用，然后我得到element not interactable 错误
也许您的元素目前不可见。你也可以试试I.click({css: '[data-ruid=defaultVideo] label'})
也错了，得到那个错误信息：Clickable element {"css":"[data-ruid=defaultVideo] label"} was not found by text|CSS|XPath
我在检查模式下添加了一个带有 CSS 的图像
奇怪。能否提供更多vuetify、vue版本的源码和信息？