以编程方式检查 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

尝试使用与复选框直接关联的类，在这种情况下，它将是应用于输入元素的类：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 进行的行选择。