如何覆盖标准的 testcafe 错误？答案

【问题标题】：How to override standard testcafe errors?如何覆盖标准的 testcafe 错误？
【发布时间】：2020-06-22 08:59:22
【问题描述】：

我需要通过添加 Selector 的输入定位器来覆盖标准的 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 树中的任何元素。

所以应该是这样的：

带有 locator: 'locator of a selector' 的指定选择器与 DOM 树中的任何元素都不匹配。

UPD 1

我找到了一种猴子补丁的方法来做到这一点。它即将为异常对象分配一些道具，例如“定位器”，然后只需修复 /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];
        }

在 selector-builder.js 上，现在我正试图弄清楚如何修补它以获得客户端 xpath 功能。有什么建议吗？

【问题讨论】：

标签： testing automation automated-tests e2e-testing testcafe

【解决方案1】：

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

【讨论】：

此对话已锁定为已解决，仅限协作者使用。
当然我需要内置 XPath，CSS 不支持字符串方法，例如包含。同时，贡献者对使用 XPath 客户端函数的建议是关于通过返回 Node[] 并将它们打包到 Selector 中的方法来初始化 Selector，所以它： Selector(Selector(Node[])) - 非常棘手的 xpath 方法，不是吗?
我已经找到了一种方法来为客户端功能执行此操作，但它有点棘手，请查看this。有什么建议可以在原始 testcafe 中实现吗？
我们没有立即推出此功能的计划。您可以跟踪 this 票证，以了解我们在此特定案例中的进展情况。
感谢您提出问题！

【解决方案2】：

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

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

您不必获得整个链条，但这对我最有帮助。

【讨论】：