Ошибка типа: невозможно прочитать свойство 'createElement' с нулевым значением

Question

Я пытаюсь нажать на боковую панель, которая имеет следующую структуру:

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

, и я создал следующую модель страницы:

(Примечание. Я хочу получить более высокуюпункты меню уровня на панели навигации, а не второй уровень <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);
    ...
  }
}

наконец, мой тестовый скрипт выглядит следующим образом:

import { PageModel } from 'myclass';

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

Testcafe успешно наводит курсор на элемент, который я выбрал,Тем не менее, я получаю сообщение об ошибке, говорящее, что TypeError: Cannot read property 'createElement' of null.

Как мне решить эту проблему?

** Обновление **

Я обновил свой запрос на основе запросачто я положил на консоль.

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

Answer 1

С помощью своего селектора,

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

вы выбираете первый A, который является непосредственным дочерним элементом LI, который находится где-то под "subnav".

Я думаю, что вы на самом деле хотитедля этого нужно найти элементы li из «внешнего» списка, например:

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