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]
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);