TestCafé - Is it possible to get a pretty display of a `Selector` instance?

Question

Using TestCafé, when an assertion fails, we get a pretty message like this:

1) Cannot obtain information about the node because the specified selector does not match any node in the DOM tree.
      
       > | Selector('body')
         |   .find('table')
         |   .nth(4)
         |   .withText('WAT')

I would very much like to get a similar callchain output to display in debug logs when tests fail!

I use lots of page objects and component wrappers that take a Selector as a parameter. On certain method calls, I log to a file the action taken for easier debugging / tracing when tests fails on the CI server.

e.g.

logProgress(`Looking for valid options in select component '${this.selector.toString()}', found ${validOptions.length}`);

The toString gives nothing relevant and this is where I'd like to format it with all the different call chains used to create the final selector.

I've looked in the code, github issues and googled and could not find anything.

This issue (https://github.com/DevExpress/testcafe/issues/4001) was closed without any answers that make sense.

The code uses apiFnChain in many places, but I cannot find where this array is generated!

Answer 1

I would very much like to get a similar callchain output to display in debug logs when tests fail!

Could you please elaborate on this? Right now, your goal is not completely clear.

You may want to look at 'markup' and 'formatSelectorCallstack' methods in TestCafe/src/errors/test-run/utils.js.

Here are the GitHub links:

https://github.com/DevExpress/testcafe/blob/23c7811ea4169db52d1d2b1593106339f4af51ba/src/errors/test-run/utils.js#L79

https://github.com/DevExpress/testcafe/blob/23c7811ea4169db52d1d2b1593106339f4af51ba/src/errors/test-run/utils.js#L31