TestCafe中自动化操作div内非mat-select所属mat-option的方法咨询

你之前的两种方案失败的核心原因如下：

• 方法1未提前触发下拉面板展开，Angular Material下拉默认懒加载，未展开时mat-option不存在于DOM中，也可能存在元素层级匹配错误导致点击不生效
• 方法2逻辑错误，直接修改了首个.mat-option-text的文本，而非匹配到文本为Hello的目标元素再执行点击操作

可行实现方案 #

方案1：常规交互方案（模拟用户真实操作） #

先触发下拉面板展开，等待目标元素可交互后点击，需注意Angular Material的下拉面板默认挂载在body下的cdk-overlay-container容器中，定位时可以加上这个父级提高定位准确性：

// 替换为你实际触发下拉的元素，比如输入框、下拉箭头按钮
const dropdownTrigger = Selector('#your-dropdown-trigger-id');
// 触发下拉面板渲染
await t.click(dropdownTrigger);

// 定位目标选项
const targetOption = Selector('div.cdk-overlay-container mat-option')
  .find('.mat-option-text')
  .withExactText('Hello')
  .parent('mat-option');

// 等待元素可交互后点击
await t
  .expect(targetOption.exists).ok({ timeout: 5000 })
  .expect(targetOption.visible).ok()
  .click(targetOption);

如果存在点击被遮挡、拦截的情况，可以开启强制点击参数：

await t.click(targetOption, { force: true });

方案2：ClientFunction 原生DOM操作方案 #

修正之前的逻辑错误，先匹配到对应文本的选项再触发点击：

const selectMatOptionByText = ClientFunction((optionText) => {
  // 遍历所有已渲染的mat-option文本节点
  const allOptionTexts = Array.from(document.querySelectorAll('.mat-option-text'));
  const targetTextNode = allOptionTexts.find(node => node.textContent.trim() === optionText);
  if (targetTextNode) {
    // 触发父级mat-option的点击事件
    targetTextNode.closest('mat-option').click();
    return true;
  }
  return false;
});

// 调用方法，传入要选中的选项文本
const selectResult = await selectMatOptionByText('Hello');
await t.expect(selectResult).ok('未找到匹配的下拉选项');

注意：两种方案都需要确保执行操作前，下拉面板已经触发展开，mat-option元素已经渲染到DOM中，否则会出现元素找不到的报错。

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