TypeError: Cannot read property 'createElement' of null

Question

I'm trying to click on a sidebar that has the following structure:

<div class=“sidebar”>
  <nav class=“subnav”>
    <ul>
      <li>
    <a class=“subnav-toggle”></a>
    <div>
      <ul>
        <li class=subnav-item>…</li>
        <li class=subnav-item>…</li>
        <li class=subnav-item>…</li>
      </ul>
    </div>
      </li>
      <li>…</li>
      <li>…</li>
      <li>…</li>
      <li>…</li>
    </ul>
  </nav>
</div>

and I created the following page model:

(Note: I want to get the higher level menu items on the navbar, not the second level <li>)

import { Selector } from 'testcafe';

export class PageModel {
  constructor () {
    this.firstItem = Selector('.subnav > ul > li').nth(0);
    this.secondItem = Selector('.subnav > ul > li').nth(1);
    ...
  }
}

finally, my test script is as follows:

import { PageModel } from 'myclass';

const a_item = new PageModel();
...
test ('Sample test', async t => {
  await t
    .hover(a_item.firstItem);
});

Testcafe successfuly hovers over the element I selected. However, I get an error saying that TypeError: Cannot read property 'createElement' of null.

How do I solve this issue?

** Update **

I updated my query based on a query that I put on the console.

document.querySelectorAll('.subnav > ul > li')
NodeList(8) [li, li, li, li, li, li, li, li]

It looks as if there is no 'second item' that matches that selector. — Meg, Mar 06 '19 at 16:04
@Meg I can find the elements using the console. I updated my question to reflect the query, but the same error appears — , Mar 06 '19 at 16:19
So I see that in your console query you have .subnav, but in your testcode you don't have the "."; Is it as simple as a typo? — Meg, Mar 06 '19 at 16:25
Okay. Can you select OTHER things on the page without getting this error? I begin to suspect that it's not directly related to these lines, since the hover itself does work. Check this out: https://stackoverflow.com/questions/37360202/uncaught-in-promise-typeerror-cannot-read-property-createelement-of-undefin and https://stackoverflow.com/questions/30014090/uncaught-typeerror-cannot-read-property-appendchild-of-null — Meg, Mar 06 '19 at 16:38
It looks like a TestCafe problem. Could please share an example which I can reproduce on my machine? — mlosev, Mar 07 '19 at 09:44

Meg · Accepted Answer · 2019-03-06T16:28:20.387

2

With your selector,

Selector('subnav').find('li > a').nth(0);

you are selecting the first A that is the immediate child of a LI that is somewhere under "subnav".

I think what you actually want to do is find the li elements of the "outer" list, like this:

 Selector('.subnav > ul > li').nth(0);

edited Mar 06 '19 at 16:28

answered Mar 06 '19 at 16:19

Meg

938
9
20

1

This answer reflected the question before an edit-- I will update, or remove if I can't answer properly. – Meg Mar 06 '19 at 16:23
I am able to select the element using that selector, but I'm still getting the error. I also tried creating a selector and using a `querySelectorAll()`, but I get the same error. – Mar 06 '19 at 16:32
1

The error is related to the button I was clicking on my page. I will figure it out, but clicking on other buttons on the navbar work – Mar 06 '19 at 16:52

TypeError: Cannot read property 'createElement' of null

1 Answers1