使用 TestCafe Selector 或 testcafe-react-selector 查找嵌套组件的元素节点时遇到问题

Question

我使用的是 TestCafe 1.1.0 版和 Testcafe-react-selector 3.1.0 版。我的目标是 return 来自节点的文本。 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 chrome 扩展获得的同一 HTML 树的 React 树：

<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 也是 total 的后代.header-count。 TestCafe 认为它正在寻找这个结构：

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

查看 W3 Schools Selector Reference 以了解每种模式的含义 select。

使用 TestCafe Selector 或 testcafe-react-selector 查找嵌套组件的元素节点时遇到问题

Trouble finding element node using TestCafe Selector or testcafe-react-selector for nested components

javascript

automated-tests

reactjs

e2e-testing

testcafe