I'm trying to set up automated testing for a web app that uses the KnockoutJS framework for handling and displaying the data. To this end we're using TestCafé as it allows us to easily access model properties from the test code.
In our application we have a page that shows a menu in a sidebar. In the test I want to click on an item in this menu. The menu is built as a table with some
<a> elements. The menu snippet is available in this JSFiddle. In the menu I want to click the 'List' link under 'Users and Roles'. Initially, I've written a function that is able to handle XPath expressions and based on these expressions return the correct DOM node. The XPath expression I wrote to get the correct node is:
//li[text()="Users and Roles"]/following-sibling::li//a[text()="List"]
With the introduction of v0.13 of TestCafé came the ability to find and filter elements in the DOM hierarchy through functional-style selector. Eager as I was, I figured that these could replace the XPath expression I wrote. Given the documentation I though that the following expression should yield the same result as the XPath expression:
Selector('li').withText("Users and Roles").nextSibling().child('a').withText("List"))
However, running a test in which this Selector is used as input for the
click function, does not result in the 'List' link being clicked. I therefore guess that the Selector does not yield the proper result.
When I try to log the result (through the command
console.log(await Selector('li').withText("Users and Roles").nextSibling().child('a').withText("List")))), however, returns the Selector object and not its results. In order to debug the Selector I wrote, I was wondering whether it is possible to log the Selector results somehow to the console such that I know which DOM elements are returned by a particular Selector function. Does TestCafé support this? If yes, how?
Furthermore any help with respect to the correct Selector function to get the 'List' link under 'Users and Roles' is appreciated :).