Cypress操作DevExtreme表格：指定行选择与数据输入问题

问题核心 #

你的代码每次选中第一行，是因为没有排除禁用状态的行，直接选取了表格的第一行元素。需要先筛选出所有可用行，再根据原表格第二行是否有数据来决定目标行。

解决方案步骤 #

1. 筛选非禁用行：DevExtreme禁用行通常带有特定CSS类（如dx-row-disabled或dx-state-disabled，需根据你的表格实际class调整），先过滤出所有可用的数据行。
2. 判断目标行：检查筛选后的第一行（对应原表格第二行）是否为空，为空则选它；已有数据则选筛选后的第二行（对应原表格第三行）。
3. 执行输入操作：定位目标行的对应列，进入编辑状态并输入数据。

示例代码 #

// 定位表格的非禁用数据行
cy.get('.dx-data-grid .dx-data-row:not(.dx-row-disabled)').then(availableRows => {
  // 取筛选后的第一行（原表格第二行），检查目标列是否有数据
  const firstAvailableRow = availableRows.eq(0);
  // 假设目标列是表格的第二列（索引为1，根据实际列位置调整）
  firstAvailableRow.find('.dx-data-column').eq(1).invoke('text').then(cellText => {
    let targetRow;
    // 判断单元格是否为空文本
    if (cellText.trim() === '') {
      targetRow = firstAvailableRow;
    } else {
      // 原第二行有数据，选原第三行（筛选后的第二行）
      targetRow = availableRows.eq(1);
    }
    // 进入单元格编辑状态并输入数据（根据表格编辑模式调整，比如双击或点击编辑按钮）
    targetRow.find('.dx-data-column').eq(1).dblclick().type('你的输入内容');
  });
});

关键注意事项 #

• 确认禁用行的CSS类：打开浏览器开发者工具，查看禁用行的class，替换代码中的dx-row-disabled为实际类名。
• 调整列索引：根据你要操作的列位置，修改eq(1)为对应列的索引（从0开始计数）。
• 适配编辑模式：如果表格是行编辑模式，可能需要先点击目标行的编辑按钮，再定位输入框；若为单元格直接编辑，双击或点击即可激活输入。

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