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

Question

我正在试用 TestCafe，但在定位我的某些元素时遇到了问题。出于调试目的，我希望能够打印出 TestCafe 使用特定选择器找到的任何元素，以便我可以将它们与现有的 DOM 进行比较。

我已经尝试阅读文档并运行这段代码:

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

但是，当我运行这段代码时，我得到的只是一些内部 TestCafe 类型的打印输出，如下所示:

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

Answer 1

对于以后想要答案的人来说，要获得实际的 html 元素，您需要调用选择器，即:

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

这是因为 Selector 创建了一个函数，testcafe 使用它可以在内部执行以获取元素，但如果你想手动执行此操作，则需要调用它。

示例输出

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