Поиск неисправности узла элемента с использованием TestCafe Selector или testcafe-Reaction-selector для вложенных компонентов

Question

Я использую TestCafe версии 1.1.0 и Testcafe-Reaction-selector версии 3.1.0.Моя цель - вернуть текст с узла.Дерево HTML выглядит следующим образом:

<div class="header">
     <div class="title">board</div>
     <div class="secondary-title">Wednesday Mar 06, 2019</div>
</div>
<div class="MuiPaper-root-9 MuiPaper-elevation2-02 MuiPaper-rounded-9 board-title-break">
    <div class="board-header">
         <div class="title">Text Title</div>
         <div class="details">
           <div>
               <div>Total</div>
               <div class="header-count total">2 people</div>
           </div>
           <div> ... </div>
           <div> ... </div>
           <div> ... </div>
           ....
           </div>

Здесь я хотел бы получить текст «2 человека» и проверить, видны ли «2 человека» или нет.

Я пытался использовать Selector следующим образом:

Selector('.header-count total > div')

Но это не сработало.

Вот дерево React для того же дерева HTML, полученного из REACT chromeрасширение:

<TitleBreakdown loading={false} accountId={323}> ==$r
     WithStyles(Paper) className="title-breakdown">
          <Paper className="title-breakdown" component="div" elevation={2} square={false}>
              <div className="MuiPaper-root-9 MuiPaper-elevation2-02 MuiPaper-rounded-9"
                  <div className="board-header">
                      <div class="title">Text Title</div>
                      <div class="details">
                          <div>
                              <div>Total</div>
                              <div class="header-count total">2 people</div>
                          </div>
                          <div> ... </div>
                          <div> ... </div>
                          <div> ... </div>
                           ....
                          </div>

Для вышеупомянутого компонента React я попытался использовать это:

ReactSelector('TitleBreakdown').findReact('div').findReact('div').nth(1).findReact('div').nth(1).withKey('header-count total');

Таким образом, и Selector, и ReactSelector не работали для меня, поскольку я получаю этоошибка при попытке установить элемент:

Cannot obtain information about the node because the specified selector does not match any node in the DOM
  tree.

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

Answer 1

Измените Selector('.header-count total > div') на Selector('div.header-count.total'). Полное утверждение будет выглядеть примерно так:

await t
   .expect(Selector('div.header-count.total').innerText).eql('2 people');

Как это написано в настоящее время, я полагаю, вы говорите TestCafe искать div, который является дочерним элементом total элемента, total также является потомком .header-count. TestCafe считает, что ищет эту структуру:

<div class="header-count">
   <total>
      <div>2 people</div>
   </total>
</div>

Ознакомьтесь с Справочником по выбору школ W3 , чтобы понять, что выбирает каждый из шаблонов.