如何从 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',

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

How do I extract the underlying HTML dom element from a TestCafe Selector?

html

javascript

testing

e2e-testing

testcafe