The specified selector does not match any element in the DOM tree

I am a beginner here. I am trying to learn automated testing using TestCafe. Currently I am using https://ift.tt/2ctsxsj for my learning.

most of the time when I execute my script I get following error

1) The specified selector does not match any element in the DOM tree.

   > | Selector('.new-todo')

  Browser: Chrome 81.0.4044.122 / Windows 10
  Screenshot: E:\todomvc_testcafe\screenshots\2020-04-27_16-09-40\test-1\Chrome_81.0.4044.122_Windows_10\errors\1.png

     11 |  await t.wait(1000)
     12 |  //await t.expect(mainpage.header.innerText).contains('React')
     13 |  let str = 'This todo will be deleted '
     14 |
     15 |  for (let i = 0; i < 3; i++) {
   **> 16 |    await t.typeText(mainpage.todoText, str + i, {**
     17 |      paste: true,
     18 |      replace: true,
     19 |    })
     20 |    await t.pressKey('enter')
     21 |  }

     at <anonymous> (E:\todomvc_testcafe\tests\deleteOneTodo.test.js:16:13)

Following is the console output.

1/1 failed (18s) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! learn_testcafe@1.0.0 test:chrome: testcafe chrome ./tests -s takeOnFails=true --reporter list npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the learn_testcafe@1.0.0 test:chrome script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: