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>

页面上的列表中有许多此类“项目容器”。换句话说，我要做的是“找到其中包含“ foo bar标题”的特定项目，然后确认该项目的详细信息中包含文本“ 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');
});

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

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功能选择器

1 个答案: