takeElementScreenshot takes screenshot of the element correctly but throw uncaught object "[object object]" error right after

[sophiecdd]

In my test I do the following to take a screenshot of an element:
.takeElementScreenshot(Selector('.element'), testScreenshotPath + imgName, '');

my test failed with the following error:

1. Uncaught object "[object Object]" was thrown. Throw Error instead.

   Browser: Chrome 70.0.3538 / Windows 10.0.0
   Screenshot: C:\dev\Testcafe-POC\screenshots\2018-12-04_16-32-32\test-3\Chrome_70.0.3538_Windows_10.0.0\errors\1.png

In the screenshot tests folder I can see the screenshot of that element was successfully taken and the content is correct. Can anybody help me with this? Thanks in advance!

[andrzej-woof]

I get similar Uncaught object thrown when I try to use simple ClientFunction that only returns window.location in TestCafe v0.23.3-alpha2

Managed to get the object returned as an error

{ callsite:
   { filename:
      '/Users/andrzej-kodify/projects/paysite-frontend/test/functional/tests/smoke/home-test.js',
     lineNum: 115,
     callsiteFrameIdx: 3,
     stackFrames:
      [ CallSite {
          constructor: [Function: CallSite],
          getColumnNumber: [Function],
          getEvalOrigin: [Function],
          getFileName: [Function],
          getFunction: [Function],
          getFunctionName: [Function],
          getLineNumber: [Function],
          getMethodName: [Function],
          getPosition: [Function],
          getScriptNameOrSourceURL: [Function],
          getThis: [Function],
          getTypeName: [Function],
          isConstructor: [Function],
          isEval: [Function],
          isNative: [Function],
          isToplevel: [Function],
          toString: [Function: CallSiteToString] },
        CallSite {
          constructor: [Function: CallSite],
          getColumnNumber: [Function],
          getEvalOrigin: [Function],
          getFileName: [Function],
          getFunction: [Function],
          getFunctionName: [Function],
          getLineNumber: [Function],
          getMethodName: [Function],
          getPosition: [Function],
          getScriptNameOrSourceURL: [Function],
          getThis: [Function],
          getTypeName: [Function],
          isConstructor: [Function],
          isEval: [Function],
          isNative: [Function],
          isToplevel: [Function],
          toString: [Function: CallSiteToString] },
        CallSite {
          constructor: [Function: CallSite],
          getColumnNumber: [Function],
          getEvalOrigin: [Function],
          getFileName: [Function],
          getFunction: [Function],
          getFunctionName: [Function],
          getLineNumber: [Function],
          getMethodName: [Function],
          getPosition: [Function],
          getScriptNameOrSourceURL: [Function],
          getThis: [Function],
          getTypeName: [Function],
          isConstructor: [Function],
          isEval: [Function],
          isNative: [Function],
          isToplevel: [Function],
          toString: [Function: CallSiteToString] },
        CallSite {
          constructor: [Function: CallSite],
          getColumnNumber: [Function],
          getEvalOrigin: [Function],
          getFileName: [Function],
          getFunction: [Function],
          getFunctionName: [Function],
          getLineNumber: [Function],
          getMethodName: [Function],
          getPosition: [Function],
          getScriptNameOrSourceURL: [Function],
          getThis: [Function],
          getTypeName: [Function],
          isConstructor: [Function],
          isEval: [Function],
          isNative: [Function],
          isToplevel: [Function],
          toString: [Function: CallSiteToString] },
        {},
        CallSite {
          constructor: [Function: CallSite],
          getColumnNumber: [Function],
          getEvalOrigin: [Function],
          getFileName: [Function],
          getFunction: [Function],
          getFunctionName: [Function],
          getLineNumber: [Function],
          getMethodName: [Function],
          getPosition: [Function],
          getScriptNameOrSourceURL: [Function],
          getThis: [Function],
          getTypeName: [Function],
          isConstructor: [Function],
          isEval: [Function],
          isNative: [Function],
          isToplevel: [Function],
          toString: [Function: CallSiteToString] },
        CallSite {
          constructor: [Function: CallSite],
          getColumnNumber: [Function],
          getEvalOrigin: [Function],
          getFileName: [Function],
          getFunction: [Function],
          getFunctionName: [Function],
          getLineNumber: [Function],
          getMethodName: [Function],
          getPosition: [Function],
          getScriptNameOrSourceURL: [Function],
          getThis: [Function],
          getTypeName: [Function],
          isConstructor: [Function],
          isEval: [Function],
          isNative: [Function],
          isToplevel: [Function],
          toString: [Function: CallSiteToString] },
        CallSite {
          constructor: [Function: CallSite],
          getColumnNumber: [Function],
          getEvalOrigin: [Function],
          getFileName: [Function],
          getFunction: [Function],
          getFunctionName: [Function],
          getLineNumber: [Function],
          getMethodName: [Function],
          getPosition: [Function],
          getScriptNameOrSourceURL: [Function],
          getThis: [Function],
          getTypeName: [Function],
          isConstructor: [Function],
          isEval: [Function],
          isNative: [Function],
          isToplevel: [Function],
          toString: [Function: CallSiteToString] },
        CallSite {
          constructor: [Function: CallSite],
          getColumnNumber: [Function],
          getEvalOrigin: [Function],
          getFileName: [Function],
          getFunction: [Function],
          getFunctionName: [Function],
          getLineNumber: [Function],
          getMethodName: [Function],
          getPosition: [Function],
          getScriptNameOrSourceURL: [Function],
          getThis: [Function],
          getTypeName: [Function],
          isConstructor: [Function],
          isEval: [Function],
          isNative: [Function],
          isToplevel: [Function],
          toString: [Function: CallSiteToString] } ],
     isV8Frames: true },
  isRejectedDriverTask: true }

@sophiecdd you can try wrapping your line with takeElementScreenshot in try/catch and log the actual error there. Testcafe (or something in between) seems to wrap it in this useless Uncaught object message.

[LavrovArtem]

@sophiecdd
This information is not sufficient to find the cause of the issue.
Would you clarify if you reproduced this issue without the takeScreenshot action call or with the same steps but without Testcafe.
In addition, try using the --skip-js-errors flag.
If this does not help, please provide a page or a small example so that we can reproduce it on our side.

[sophiecdd]

@andrzej-kodify Thanks for your help! I have tried what you recommended got the error printed out, similar as what you got there, with the try/catch, my test can successfully run through, the screenshot was actually successfully taken in my case, but I do think it is a testcafe issue that at least the error message is supposed to be clear and meaningful right?
{ callsite:
CallsiteRecord {
filename: 'C:\dev\Testcafe-POC\ScreenshotTests.js',
lineNum: 132,
callsiteFrameIdx: 6,
stackFrames:
[ [Object],
[Object],
[Object],
[Object],
[Object],
[Object],
[Object],
CallSite {},
[Object],
[Object],
[Object],
[Object],
CallSite {} ],
isV8Frames: true },
isRejectedDriverTask: true }

@LavrovArtem
With the solution that @andrzej-kodify posted above, I could get my test run through successfully, since the screenshot of the element was taken correctly. But I wasn't sure how to find out where exactly the error was thrown. In my case, I am trying to take a screenshot of a chart element which located on a canvas, maybe this caused something different than a regular DOM element?

[andrzej-woof]

@LavrovArtem for me it happened with ClientFunction(() => { return window.location; }) in v0.23.3-alpha2 (while it was working v0.23.2 and before). I've made a workaround to instead return only properties

ClientFunction(() => {
        const currentLocation = window.location;
        return {
            hash: currentLocation.hash,
            host: currentLocation.host,
            hostname: currentLocation.hostname,
            href: currentLocation.href,
            origin: currentLocation.origin,
            pathname: currentLocation.pathname,
            port: currentLocation.port,
            protocol: currentLocation.protocol,
            search: currentLocation.search,
        };
    }),

that's the only hint I have, not sure if it'll help to trace the issue

[miherlosev]

@sophiecdd @andrzej-kodify

I've tried to run simple test code:

import { ClientFunction } from 'testcafe';
fixture `Fixture`
    .page('https://example.com');
    
test('test', async t => {
    const getLocation = ClientFunction(() => window.location);
    
    console.log(await getLocation());
});

and found a problem in our code - DevExpress/testcafe-hammerhead#1866. But, it's not related to the issue you described.

The problem is likely related to your website and I need an example showing this issue to find its cause.
Feel free to reopen this issue if you can provide such an example.

[miherlosev]

I've reproduced the problem with [email protected].

[AndreyBelym]

This problem is fixed in [email protected]:

• DevExpress/testcafe-hammerhead@b3b2cfb
• inikulin/replicator@c31578b

Please reopen the issue if you still can reproduce the problem.

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs or feature requests. For TestCafe API, usage and configuration inquiries, we recommend asking them on StackOverflow.