Testcafe调用VueSelector.getVue()报"_keys2未定义"的Vuetify测试问题咨询

问题场景 #

在为集成Vuetify组件库的Vue应用编写Testcafe自动化测试用例时，调用组件取值方法触发未定义变量报错：最初尝试通过目标组件的.getValue()方法读取内部数据，更换其他Vuetify组件测试后问题仍然复现，该场景对应上游testcafe-vue-selectors项目的已知问题记录。

测试环境配置 #

• Chrome 89.0.4389.128 / macOS 11.2.3
• node: v14.15.5
• yarn: 1.22.10
• testcafe: 1.14.0
• testcafe-vue-selectors: 3.1.0
• vuetify: 2.4.2

复现代码片段 #

const transfersTable = VueSelector('Transfer SingleAccountStatus v-data-table');
await t.hover(transfersTable); // 步骤执行正常
const transfersTableValues = await transfersTable.getVue(); // 步骤触发报错
console.log(transfersTableValues);

运行报错输出 #

1) getVue 执行过程中发生错误：
      ReferenceError: _keys2 is not defined
      浏览器环境：Chrome 89.0.4389.128 / macOS 11.2.3
         20 |    .click(proceedButton);
         21 |
         22 |  const transfersTable = VueSelector('Transfer SingleAccountStatus v-data');
         23 |  await t.hover(transfersTable);
         24 |
       > 25 |  const transfersTableValues = await transfersTable.getVue();
         26 |  console.log(transfersTableValues);

问题解决指引 #

• 该报错与Vuetify组件实现无直接关联，核心触发原因是testcafe-vue-selectors@3.1.0的构建缺陷：其内置的Vue组件状态序列化逻辑中，依赖的_keys2辅助变量在打包时未被正确注入，一旦调用getVue()、getValue()这类需要遍历组件内部响应式属性的方法，就会触发未定义引用错误。
• 可直接落地的解决方案：
  1. 版本回退：将testcafe-vue-selectors降级至2.4.2版本，匹配当前使用的Testcafe 1.14.0运行环境，可完全规避该编译缺陷
  2. 临时绕行：若需保留当前依赖版本，可改用原生DOM选择器获取页面渲染后的可见属性，不直接调用组件状态读取方法，绕开存在bug的代码分支
  3. 版本等待：待上游团队发布修复该_keys2变量未定义问题的正式版本后，升级依赖即可恢复组件取值能力

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