CODEWITHSUNDEEP
javascriptreactjsautomated-testse2e-testingtestcafe
Psdet
Psdet

Reputation: 689

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

I'm using TestCafe version 1.1.0 and Testcafe-react-selector version 3.1.0. My goal is the return the text from the node. The HTML tree looks like this:

<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>

Over here, I would like to get "2 people" text and verify if the "2 people" is visible or not.

I tried with Selector as following:

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

But this didn't work out.

Here is the React Tree for the same HTML tree obtained from REACT chrome extension:

<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>

For the above React Component I tried to use this:

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

In summary, both Selector and ReactSelector didn't work for me as I'm getting this error when I try to assert the element:

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

I know I'm doing something wrong but can't figure out what is the problem. Can someone please tell a good and efficient way to handle these types of cases?

Upvotes: 3

Views: 1593

Answers (1)

lostlemon
lostlemon

Reputation: 744

Change Selector('.header-count total > div') to Selector('div.header-count.total'). The full assertion would look something like:

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

The way it's written currently, I believe you're telling TestCafe to look for a div that is the child of a total element, total also being a descendant of .header-count. TestCafe thinks it's looking for this structure:

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

Check out the W3 Schools Selector Reference to understand what each of the patterns select.

Upvotes: 9

Related Questions