如何覆盖标准测试咖啡馆错误?

Question

我需要通过添加选择器的输入定位器来覆盖标准的testcafe错误消息 - 这样我就会更多地了解失败，并且可以手动调试它至少通过手动检查找到选择器的能力。

当我尝试通过以下代码捕获错误时：

try {
const selector = Selector('basdf')
await t.click(selector);
}
catch (e) {
console.log(e);
}

我得到这个对象：

{
code: 'E24',
isTestCafeError: true,
callsite: CallsiteRecord {
filename: '/Users/myPath/helper_test.ts',
lineNum: 37,
callsiteFrameIdx: 6,
stackFrames: [
[CallSite], [CallSite],
[CallSite], [CallSite],
[CallSite], [CallSite],
[CallSite], CallSite {},
[CallSite], [CallSite],
[CallSite]
],
isV8Frames: true
},
apiFnChain: [ "Selector('basdf')" ],
apiFnIndex: 0
}

如果我只留下这样的代码：

const selector = Selector('basdf')
await t.click(selector);

我会得到我需要的——

✖ Edits auto on propositions
1) The specified selector does not match any element in the DOM tree.

 > | Selector('basdf')
Browser: Chrome 83.0.4103.106 / macOS 10.15.5
33 |
34 |  // const someVar = 1;
35 |
36 |  // try {
37 |    const selector = Selector('basdf')
> 38 |    await t.click(selector);
39 |  // }
40 |  // catch (e) {
41 |  //   console.log(e);
42 |  // }
43 |});
at <anonymous> (/Users/orkhan.mamedov/WebstormProjects/osago/tests/e2e/helper_test.ts:38:13)
at fulfilled (/Users/orkhan.mamedov/WebstormProjects/osago/tests/e2e/helper_test.ts:5:58)

1/1 failed (18s)

是否有任何选项可以将自定义信息添加到该行：

指定的选择器与 DOM 树中的任何元素都不匹配。

所以它会是这样的：

带有定位器的指定选择器："选择器的定位器"与 DOM 树中的任何元素都不匹配。

UPD 1

我找到了一种猴子补丁的方法。它即将为异常对象分配一些 prop，例如"定位器"，然后修复/testcafe/lib/errors/test-run/templates.js 文件：

const locator = 'basdf'
try {
const selector = Selector(locator)
await t.click(selector);
}
catch (e) {
console.log(e);
Object.assign(e,{ locator });
throw e;
}

...
[types_1.TEST_RUN_ERRORS.actionElementNotFoundError]: (err, viewportWidth) => `
The specified selector with locator value: '${err.locator}' does not match any element in the DOM tree.
${utils_1.formatSelectorCallstack(err.apiFnChain, err.apiFnIndex, viewportWidth)}
`,
...

UPD 2

我的问题是当我以这种方式编写自定义实现的 xpath 选择器时：

// xpath-selector.js
import { Selector } from 'testcafe';
const elementByXPath = Selector((xpath) => {
const iterator = document.evaluate(
xpath,
document,
null,
XPathResult.UNORDERED_NODE_ITERATOR_TYPE,
null
);
const items = [];
let item = iterator.iterateNext();
while (item) {
items.push(item);
item = iterator.iterateNext();
}
return items;
});
export default function (locator: string, timeout?: number) {
// @ts-ignore
if (!timeout) timeout = 9000;
return Object.assign(
Selector(elementByXPath(locator), { timeout: timeout }),
{ locator }
);
}

我得到：

✖ Edits auto on propositions
1) The specified selector does not match any element in the DOM tree.

 > | Selector([function])

UPD 3这一切都取决于这些代码行：

if (!this.options.apiFnChain) {
const fnType = typeof this.fn;
let item = fnType === 'string' ? `'${this.fn}'` : `[${fnType}]`;
item = `Selector(${item})`;
this.options.apiFn = item;
this.options.apiFnChain = [item];
}

在选择器构建器.js上，现在我正在尝试弄清楚如何修补它以便能够获得客户端 xpath 函数。有什么建议吗？

Answer 1

这个"XPathSelector"包装器将客户端函数传递给选择器构造函数。目前没有办法在错误中使用选择器元信息。 我建议你考虑通过第三方模块将XPath转换为CSS选择器，例如，你可以使用xpath-to-css。 如果您需要对 XPath 选择器的内置支持，请在此处分享您的意见。

Answer 2

我昨天遇到了同样的问题。这不会覆盖您的错误消息，但它帮助我抛出更有用的错误消息。

try {
await t.hover(selector)
} catch (error) {
const selectorFnChain = selector[Object.getOwnPropertySymbols(selector)[0]].options.apiFnChain
//  use selectorFnChain in your error message
}

你不必得到整个链条，但这对我来说是最有帮助的。