TestCafe 功能选择器

Question

我正在尝试弄清楚如何制作我需要的选择器，但我有点困惑。我的 DOM 看起来像这样：

<div class="project index_list__item_container">
  <div class="index_item__header">
    <h3 class="index_item__title">
      <a class="index_item__title_link" href="/foo_bar_link">
        foo bar title
      </a>
    </h3>
    <div class="index_list__item_detail index_list__item_detail--light">
      <span data-test="progress-p">
        In Progress / Started about 1 month ago
      </span>
    </div>
  </div>
  <div class="index_item__stats_and_actions">
    <a class="index_item__stat_indicator" href="/foo_bar_link">
      <span class="stat_indicator__stat_total">23</span>
      <span class="index_item__stat_description">views</span>
    </a>
    <a class="index_item__stat_indicator" href="/foo_bar_link">
      <span class="stat_indicator__stat_total">25</span>
      <span class="index_item__stat_description">plays</span>
    </a>
  </div>
</div>

页面上有很多 "item containers" 都在一个列表中。换句话说，我要做的是 "find the specific item that has "foo bar title" 在其中，然后验证项目详细信息是否包含文本 "In Progress"."

我试过像这样使用 .filter（以及之前的 .find）：

test('Verify states', async (t) => {
  const draftItemDetail = await 
    indexPage.indexItemContainer.withText('foo bar title')
      .filter(indexPage.indexItemDetail);

  await t
    .expect(draftItemDetail.textContent).contains('In Progress');
});

// Page Object
import { Selector } from 'testcafe';

export default class IndexPage {
  constructor() {
    this.indexItemContainer = Selector('.index_list__item_container');
    this.indexItemDetail = Selector('.index_list__item_detail');
  }
}

我得到的错误是：

 1) filter code is expected to be specified as a function, but string was passed.

我经常看到人们在查找和筛选中使用选择器的示例，所以我显然做错了其他事情。任何帮助将不胜感激，我有很多类似的模式需要为此页面编写代码，而且我宁愿不必使用长的特定后代链。谢谢！

Answer 1

filter function 接受 predicate 或 cssSelector。但是，您传递了一个 Selector (indexPage.indexItemDetail).

例如下面的find function正确找到了想要的元素，测试通过：

test('Verify states', async (t) => {
  const draftItemDetail = await indexPage.indexItemContainer
    .withText('foo bar title')
    .find(".index_list__item_detail")

  await t.expect(draftItemDetail.textContent).contains('In Progress');
});

或者，您可能希望将第二个选择器作为 child/parent 谓词的依赖项传递：

test('Verify states', async (t) => {
  const indexItemDetail = indexPage.indexItemDetail;
  const draftItemDetail = await indexPage.indexItemContainer
    .withText('foo bar title')
    .child((node, idx, originNode) => {
        const itemDetail = indexItemDetail();
        if (node.contains(itemDetail))
            return true;
    }, { indexItemDetail });

  await t.expect(draftItemDetail.textContent).contains('In Progress');
});

TestCafe 功能选择器

TestCafe functional selectors

testing

automated-tests

filter

e2e-testing

testcafe