如何从 TestCafe 选择器中提取底层 HTML dom 元素？

Question

I'm trying out TestCafe and having problems locating some of my elements. I want to be able to, for debugging purposes, print out whatever element(s) that TestCafe has found with a particular Selector so I can compare them against the DOM that exists.

I have already tried reading the documentation and running this code:

const a = await Selector('span', { timeout: 20000 }).withText('some text');
console.log(a);

However, when I run this code, all I get is a printout of some internal TestCafe type like so:

[Function: __$$clientFunction$$] {
  with: [Function],
  nth: [Function],
...
}

Answer 1

For anyone who wants the answer for later, to get the actual html element, you need to call the Selector, ie:

const a = await Selector('span', { timeout: 20000 }).withText('text'))()
console.log(a)

This is because Selector creates a function that testcafe uses and can execute internally to get elements, but if you want to manually do that, you need to call it.

example output

{
  nodeType: 1,
  textContent: 'Before or on',
  childNodeCount: 1,
  hasChildNodes: true,
  childElementCount: 1,
  hasChildElements: true,
  tagName: 'span',
  visible: true,
  focused: false,
  attributes: {
    'data-role': 'filtercell',