Javascript 高阶选择器

我试图创建一个更高阶的选择器，我可以通过更改文本参数来重用它。在下面的代码段中，当我尝试使用

actualSelector

执行

t.click

时，它没有按预期工作。当我在控制台上记录

实际选择器的值时，我看到整个项目值都被打印出来

看来我用得不对。你能帮我做这个吗

e、 g

下面是此测试的完整testcafe代码


fixture`Getting Started`
  .page // declare the fixture
`https://hasans30.github.io/testpage/dropdown.html`; // specify the start page

//then create a test and place your code there
test("My first test", async (t) => {

   const testItemNameGenericSelector = (itemName) =>
    Selector(
      ".ms-Callout-container .ms-Callout-main  div div"
    )
  .withText(itemName);
  const buttonSelector = Selector('.ms-Button-label');
  const selectedValue = Selector('.ms-Dropdown-title');

  const itemNameToSelect = "Test Item-8ab1ec12-e719-4ab6-a0a3-ed538143d6d3";
  const actualSelector = testItemNameGenericSelector(itemNameToSelect);


  await t.click(buttonSelector,{speed:0.51})
  console.log(`selecting ${await actualSelector().textContent}`)

  await t.click(actualSelector,{speed:0.51})
  await t.expect(await selectedValue().textContent).eql(itemNameToSelect);

});

您可以发布浏览器的“元素”选项卡中显示的选择器吗？如果字符串中有空格，我不确定它是否有效，至少对我来说没有。这给了我提示。我必须使用选择器中的till按钮。下面的选择器工作。“.ms Callout container.ms Callout main div按钮”我很高兴它可以。我询问的原因是，此选择器不适用于我。flex.flex-row bg red rounded-full.p-1，但此选择器不适用于div.flex.flex-row.bg-red.rounded-full.p-1。用点替换空格。另外，您可以将该选择器作为一个函数，例如：async testItemSelector（itemname:string）{await t.click（选择器（“.ms Callout container.ms Callout main.div.div”）.withText（itemname））}，然后在测试期间调用该函数，就像await this.testItemSelector（itemname='this item name'））

fixture`Getting Started`
  .page // declare the fixture
`https://hasans30.github.io/testpage/dropdown.html`; // specify the start page

//then create a test and place your code there
test("My first test", async (t) => {

   const testItemNameGenericSelector = (itemName) =>
    Selector(
      ".ms-Callout-container .ms-Callout-main  div div"
    )
  .withText(itemName);
  const buttonSelector = Selector('.ms-Button-label');
  const selectedValue = Selector('.ms-Dropdown-title');

  const itemNameToSelect = "Test Item-8ab1ec12-e719-4ab6-a0a3-ed538143d6d3";
  const actualSelector = testItemNameGenericSelector(itemNameToSelect);


  await t.click(buttonSelector,{speed:0.51})
  console.log(`selecting ${await actualSelector().textContent}`)

  await t.click(actualSelector,{speed:0.51})
  await t.expect(await selectedValue().textContent).eql(itemNameToSelect);

});