Search code examples
testingautomated-testse2e-testingtestcafeweb-testing

Is there a way to view the actual HTML elements that are being captured by the Selectors?

I am trying to determine if my Selector is capturing the correct HTML elements. The only thing that is being outputted is the Selector object which doesn't tell me anything.

I tried to put a debugger in VScode and use the console to view the Selector.

For example if I have this HTML,

<html>
  <body>
    <h1>This is a test</h1>
  </body>
</html>

and my Selector is as followed... const h1 = Selector('h1');

Is there a way for me to see the HTML of the captured element? Eg; have to output 

<h1>This is a test</h1>?

Solution

  • Debugging a Selector object in debug mode is quite difficult. The best way I found to check if a Selector is correct is to hover over it before doing any action or assertion:

    const h1 = Selector('h1');
await t
  .hover(h1)
  ...

    Then you should see the big cursor moving and hover over the selector.