TypeError: Cannot read property 'createElement' of null

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，它是 "subnav" 下某处的 LI 的直接子级。

我认为您真正想要做的是找到 "outer" 列表的 li 元素，如下所示：

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

TypeError: Cannot read property 'createElement' of null

TypeError: Cannot read property 'createElement' of null

javascript

testing

automated-tests

e2e-testing

testcafe