Allow to use HTML5 Clipboard API in tests

[AndreyBelym]

Are you requesting a feature or reporting a bug?

Enhancement

What is the current behavior?

Browser prevent access to the HTML5 Clipboard API (document.execCommand('copy')) when it is invoked not from a user-generated event. It means, that the Clipboard API enabled code don't work under the TestCafe testing environment.

What is the expected behavior?

The Clipboard API functions work properly when a page is tested with TestCafe.

[AndreyBelym]

The workaround is to override the document.execCommand method with a ClientFunction:

const overrideClipboardCopy = ClientFunction(() => {
    const execCommand = document.execCommand;

    document.execCommand = (action, ...args) => {
        if (action === 'copy') {
            //handle copy here
        }
        else
            return execCommand.call(document, ...args);
    }
});

[pbiggar]

Can you also support the ClipboardEvent API? This provides another (in some cases simpler) way of accessing the APIs. https://developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent

(Side note: does your workaround support ClipboardEvents?)

[AndreyBelym]

Thank you for referencing this part of API.

Of course, we should support ClipboardEvents too. As far as I know, they don't let copy arbitrary data to the clipboard at any time; you can only modify content that goes to the clipboard when a user initiates a copy/cut operation by pressing Ctrl + C/Ctrl + X.

I think TestCafe should provide a virtual clipboard for a page under test. The page can use document.execCommand to change the state of this virtual clipboard directly or use ClipboardEvent.setData when a ClipboardEvent is generated by the t.pressKey('cltr+c')/t.pressKey('ctrl+x') actions.

In the meantime, you can use the ClipboardEvent constructor and the dispatchEvent function in my workaround to simulate these events in the place where the copy command is handled:

const overrideClipboardCopy = ClientFunction(() => {
    const execCommand = document.execCommand;     document.execCommand = (action, ...args) => {
        if (action === 'copy') {
            //handle copy here
            const event = new ClipboardEvent(...);

            document.activeElement.dispatchEvent(event, ...);
        }
        else
            return execCommand.call(document, ...args);
    }
});

[pbiggar]

Thanks @AndreyBelym! The ClipboardEvent object has methods which affect the clipboard directly, so I'm not sure we'd be able to simulate that.

Btw, is there a way to pay for these features to be prioritized? If so, my company would be interested.

[AndreyBelym]

Thank you for your support, but we don't accept donations. Sharing your feedback about TestCafe and sending pull requests makes us really happy 😄 If you make a prototype and send a PR, we can help you finish and ship it in some future TestCafe release.

[saripr]

I have a text field in a table and I want to copy the contents of the clipboard to textfield

As paste option is not available in testcafe, so tried the below:

const execPaste = ClientFunction(() => document.execCommand("paste"));
t..click(Selector(".table > tbody > tr:nth-child(5) > td:nth-child(3)"))
    .typeText(
      Selector(".table > tbody > tr:nth-child(5) > td:nth-child(3)"),
      JSON.stringify(execPaste())
    );
console.log(JSON.stringify(execPaste()));
and in the console log I see "{"_then":[],"_taskPromise":null}" and not the value which is copied from the clipboard

Please help

[LavrovArtem]

Hi @saripr,
I think that your use of clipboard API is incorrect. Please see the examples here.

and in the console log I see "{"_then":[],"_taskPromise":null}" and not the value which is copied from the clipboard

The cause of this is the missing await keyword before the client function call.
https://devexpress.github.io/testcafe/documentation/test-api/obtaining-data-from-the-client/#executing-client-functions

I think that it would be best to ask this question on StackOverflow - an amazing platform for users to ask and answer questions.

We try to keep the GitHub issues tracker for bugs and feature requests only (see also: Contributing).

If you think that this is a bug, feel free to open a new issue and please make sure to follow the bug template. Thank you for your cooperation.

[miherlosev]

Hi,

Starting from v3.0.0, TestCafe introduced a new test run mode - NativeAutomation. In this mode, the target key combinations (ctrl+c, ctrl+v etc.) work with the operating system clipboard. This means that all Clipboard APIs will work.
Note that this mode is available in Chromium-based browsers. For other browsers, please use the workaround from #2668 (comment)

[thierryandreys]

you should update the documentation stating that ctrl+c ctrl+v are not supported

[PavelMor25]

Hello @thierryandreys,

As written in the comment above, this functionality works in Native automation mode. Please make sure that your version of TestCafe supports this mode, and there is no option "disableNativeAutomation": true in the configuration file.

You can check the functionality with a simple example:

import { Selector } from "testcafe";
 
fixture("screenshot")
    .page("https://devexpress.github.io/testcafe/example/")
 
test("key combinations", async t => {
    await t
        .typeText('#developer-name', 'John Smith')
        .pressKey('ctrl+a ctrl+c ctrl+v ctrl+v')
        .expect(Selector('#developer-name').value).eql('John SmithJohn Smith');
});

If the issue persists, please create a ticket using this template and also share a Minimal Working Example in that ticket so that the TestCafe team can research the issue and help you.

[thierryandreys]

Hi,
I'm sorry I was not clear. It's working fine in Native Automation but Testcafe documentation on pressKey https://testcafe.io/documentation/402693/reference/test-api/testcontroller/presskey
is still saying that"Clipboard operations are not emulated."
It can be confusing for new users.