如何使用CodeceptJS直接访问Vuetify的Checkbox组件？

我完全懂你遇到的这个麻烦——Vuetify组件的嵌套渲染结构确实会给自动化测试添点小阻碍，尤其是当你想用自定义属性定位元素的时候。

问题根源 #

Vuetify的v-checkbox会生成多层嵌套的DOM结构，你添加的v-ruid属性会被绑定到组件的外层容器div上，但真正能触发交互的是嵌套在内部的<input type="checkbox">或者对应的<label>标签。直接点击外层div就会触发"element not interactable"错误，因为这个容器并不是可交互的表单控件。

解决方案 #

你可以通过父元素的data-ruid属性，精准定位到内部的可交互元素，这里有几个可靠的方法：

1. 点击关联的Label标签

Vuetify的checkbox设计中，点击label也能触发状态切换，这是最稳定的方式之一：

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

2. 直接定位内部的Input元素

如果你想直接操作表单控件本身，可以定位到嵌套的input标签：

I.click('[data-ruid="defaultVideo"] input[type="checkbox"]');

3. 结合Vuetify的内置类名定位

Vuetify给组件内部元素提供了统一的类名，你也可以结合data-ruid和类名来定位：

I.click('[data-ruid="defaultVideo"] .v-input--checkbox__input');

4. 确保元素可交互后再点击

如果页面加载有延迟，建议先等待元素可见并可交互后再操作：

I.waitForElement('[data-ruid="defaultVideo"] label', 5); // 等待5秒直到元素就绪
I.click('[data-ruid="defaultVideo"] label');

这些方法都能绕过外层不可交互的容器，直接操作真正能触发checkbox状态改变的元素，完美解决"element not interactable"的问题。

内容的提问来源于stack exchange，提问作者carl