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>

На странице есть много таких "контейнеров с предметами", все в списке.Словом, я пытаюсь «найти конкретный элемент, в котором есть« заголовок панели foo », а затем убедиться, что на детали элемента есть текст« В процессе »."

Я пыталсяиспользуя .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.

Я продолжаю видеть примеры людей, использующих селекторы в find ифильтр, так что я явно делаю что-то еще не так.Любая помощь будет принята с благодарностью, у меня есть много похожих шаблонов, которые мне нужно кодировать для этой страницы, и я бы предпочел не использовать длинную цепочку конкретных потомков.Спасибо!

Answer 1

Функция фильтра принимает значения predicate или cssSelector.Однако вы передаете Selector (indexPage.indexItemDetail).

Например, следующая функция поиска правильно находит нужный элемент и тест пройден:

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');
});