以编程方式检查 ag-grid 复选框

Question

我正在使用浏览器自动化软件运行自动化 UI 测试。我们的前端站点使用 Vue 和 ag-grid。我的浏览器自动化软件本质上允许我们使用典型的 javascript/jquery 选择器与 UI 自动交互。

我正在尝试让我们的浏览器自动化软件在 ag-grid 内部的 ag-grid 复选框中选中复选框。

我不是 Vue 开发人员，所以我正在尝试我会做的典型事情。像这样的东西：

$('.ag-selection-checkbox').click();

但我实际上没有做任何点击和选择框。任何建议将不胜感激。

更新对于那些和我一样的人。我这样使用 ag API：

document.querySelector('#myGrid').__vue__
   .gridOptions.api.forEachNode((row,index) => {
       document.querySelector('#myGrid').__vue__.
           gridOptions.api.getRowNode(row.id).selectThisNode(true); 
       }
)

Answer 1

尝试使用与复选框直接关联的 class，在这种情况下，它将是应用于输入元素的 class：ag-input-field-input ag-checkbox-input.

你可以这样得到第一行的复选框：

const checkbox = document.querySelector('.ag-center-cols-viewport .ag-row .ag-checkbox-input');
checkbox.click();

请参阅 this example 基于按钮点击通过 DOM 显示行选择。

以编程方式检查 ag-grid 复选框

Programmatically check an ag-grid checkbox

vue.js

ag-grid