When you use any
get calls in your test cases, the current state of the
container (DOM) gets printed on the console. For example:
The above test case will fail, however it prints the state of your DOM under test, so you will get to see:
Note: Since the DOM size can get really large, you can set the limit of DOM
content to be printed via environment variable
DEBUG_PRINT_LIMIT. The default
7000. You will see
... in the console, when the DOM content is
stripped off, because of the length you have set or due to default size limit.
Here's how you might increase this limit when running tests:
This works on macOS/Linux, you'll need to do something else for Windows. If
you'd like a solution that works for both, see
Built on top of
this helper function can be used to print out readable representation of the DOM
tree of a node. This can be helpful for instance when debugging tests.
It is defined as:
It receives the root node to print out, an optional extra parameter to limit the
size of the resulting string, for cases when it becomes too large. It has a last
parameter which allows you to configure your formatting. In addition to the
options listed you can also pass the
<script /> and comment nodes are ignored. You can
configure this behavior by passing a custom
filterNode function that should
true for every node that you wish to include in the output.
This function is usually used alongside
console.log to temporarily print out
DOM trees during tests for debugging purposes:
This function is what also powers the automatic debugging output described above.
This helper function can be used to print out a list of all the implicit ARIA roles within a tree of DOM nodes, each role containing a list of all of the nodes which match that role. This can be helpful for finding ways to query the DOM under test with getByRole.