How to override standard testcafe errors?

问题

I need to override standard testcafe error messages by adding there Selector's input locator - this way I will know more about failure and can debug that manually at least by manually checking ability for selector to be found.

When I try just to catch error by this code:

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

I'm getting this object:

{
  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
}

And if I'll just leave code like this:

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

I will get just what I need -

 ✖ 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)

Is there any option to add custom info to that line:

The specified selector does not match any element in the DOM tree.

So it would be like that:

The specified selector with locator: 'locator of a selector' does not match any element in the DOM tree.

UPD 1

I've found a monkey-patchey way to do that. Its about to assign some prop to exception object, for example 'locator', and then just fix /testcafe/lib/errors/test-run/templates.js file:

  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

My problem is when I have custom implemented xpath selector written in this way:

// 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 }
  );
}

I'm getting:

 ✖ Edits auto on propositions

   1) The specified selector does not match any element in the DOM tree.
      
       > | Selector([function])

UPD 3 It's all up to those lines of code:

 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];
        }

on selector-builder.js, and for now I'm trying to figure out how to patch this to be able to get client-side xpath function. Any suggestions?

回答1:

This "XPathSelector" wrapper passes a client-side function to the Selector constructor. There are no ways to use Selector meta-information in errors at the moment. I suggest you consider converting XPath to CSS selectors via third-party modules, for example, you can use xpath-to-css. If you require built-in support for XPath Selectors, please share your opinion here.

回答2:

I had the same issue yesterday. This will not override your error message but it helped me to throw a more helpful error message.

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

You don't have to get the entire chain but this was the most helpful for me.

来源：https://stackoverflow.com/questions/62510808/how-to-override-standard-testcafe-errors