TestCafe：如何选择匹配style-[0-9]+ classB模式的首个div元素

嘿，这个需求实现起来挺直接的，我给你两种靠谱的方案，你可以根据自己的场景选：

方案一：结合TestCafe Selector和正则过滤（精准度最高） #

TestCafe的Selector支持自定义逻辑过滤元素，刚好能用正则严格匹配类名模式：

import { Selector } from 'testcafe';

// 定义目标元素选择器
const targetDiv = Selector('div')
  .filter(node => {
    // 逐个检查div的类列表
    const classList = node.classList;
    // 必须包含classB类
    const hasClassB = classList.contains('classB');
    // 必须有符合style-数字格式的类
    const hasValidStyleClass = Array.from(classList).some(cls => /^style-\d+$/.test(cls));
    return hasClassB && hasValidStyleClass;
  })
  .nth(0); // 取过滤后的第一个元素

代码逻辑拆解： #

• 先通过Selector('div')获取页面上所有div元素
• .filter()里的逻辑会逐一校验每个div：
  • 用classList.contains('classB')确保元素确实带有classB类
  • 用正则/^style-\d+$/精准匹配「style-开头+纯数字结尾」的类名
• 最后用.nth(0)锁定第一个符合条件的元素（也就是你示例里的Div1）

方案二：使用CSS属性选择器（更简洁，适合无干扰场景） #

如果你的页面里没有类似style-abc123这种不符合规则的干扰类名，也可以用CSS选择器直接定位：

import { Selector } from 'testcafe';

// 直接用CSS选择器匹配，再取第一个
const targetDiv = Selector('div[class*="style-"][class~="classB"]').nth(0);

注意点： #

• [class*="style-"]表示class属性包含style-字符串，但匹配范围较宽，可能误判带字母的类似类名
• [class~="classB"]确保元素带有独立的classB类（不会匹配classB-xxx这类变种类名）

测试用例里的使用示例 #

你可以在测试中这样调用这个选择器，比如点击或者断言内容：

test('选中第一个符合条件的div', async t => {
  await t.click(targetDiv);
  // 验证元素文本是否符合预期
  await t.expect(targetDiv.textContent).eql('Div1');
});

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