testing - Access Clipboard in TestCafe

Question

How can I access the clipboard in TestCafe? I am unable to use the navigator.clipboard API since we run in headless chrome --allow-insecure. (This is not something I can change).

Any ideas?

Thank you!

question from:https://stackoverflow.com/questions/66051800/access-clipboard-in-testcafe

Answer 1

TestCafe does not have built-in clipboard tools at the moment. However, you can use the client function to emulate the clipboard:

import { Selector, ClientFunction } from 'testcafe';
fixture `Example`
    .page `http://devexpress.github.io/testcafe/example/`;

test('Clipboard test', async t => {
    const text = 'Value for copy-paste';

    const emulateClipboard = ClientFunction(() => {
        let buffer = '';

        document.addEventListener('keypress', event => {
            if (event.ctrlKey) {
                if (event.key === 'c')
                    buffer = document.getSelection().toString();
                
                if (event.key === 'v')
                    document.activeElement.value = buffer;
            }
        });
    });

    await emulateClipboard();
    await t
        .typeText('#developer-name', text)
        .selectText('#developer-name')
        .pressKey('ctrl+c')
        .click('#tried-test-cafe')
        .click('#comments')
        .pressKey('ctrl+v')
        .expect(Selector('#comments').value).eql(text)
});

This example works correctly in Chrome. It may not work in other browsers due to the difference in accessing the content of <textarea> elements.

You may be able to glean more information from this discussion: https://github.com/DevExpress/testcafe/issues/2668