document.execCommand("copy") does not work in cypress

[tnrich]

Hi there,

I'm curious as to why a document.execCommand("copy") fails when being run during a cypress test (as a side effect to a cy.get().click() ). Curiously it works fine once I'm manually clicking the same element after the test has run.

The failing test in question can be reproduced by running the following code:

describe("menuBar", function() {
  beforeEach(() => {
    cy.visit("http://teselagen.github.io/openVectorEditor/#/Editor");
  });
  
  it("select range, copy, cut works", function() {
    cy.clock()
    cy.get('.tg-menu-bar').contains("Edit").click()
    cy.get('.tg-menu-bar-popover').contains("Select").click()
    cy.get(`[label="From:"]`).clear().type("10")
    cy.get(`[label="To:"]`).clear().type("20")
    cy.get(`.dialog-buttons`).contains("OK").click()
    cy.get(".veStatusBar").contains(`10 to 20`)

    cy.get(".veStatusBar").contains(`5299`)
    cy.get('.tg-menu-bar').contains("Edit").click().tick(200)
    cy.get('.tg-menu-bar-popover').contains("Copy").click()
    cy.contains("Selection Copied")
    cy.get('.tg-menu-bar').contains("Edit").click()
    cy.get('.tg-menu-bar-popover').contains("Cut").click()
    cy.contains("Selection Cut")
    cy.get(".veStatusBar").contains(`5288`)
  });
});

If you run the above example, the test will fail to find "Selection Copied". This is because

const worked = document.execCommand(type);

evaluates to false so the "Selection Copied" popover is not shown.

You can add a breakpoint manually to the commands/index.js file and see it not working.

Strangely, after the test has run if you manually click "File > Edit > Copy" then the document.execCommand("copy") works just fine. Not sure what is going on here to stop it from working when cypress is running its tests.

Thanks!

[jennifer-shehane]

I thought this piece of info from MDN docs looks interesting concerning the return value of document.execCommand()

Note: Only returns true if part of a user interaction. Don't try using the return value to verify browser support before calling a command.

Since Cypress programmatically triggers the 'click' event, the document.execCommand() will always return true in this case. This looks like another reason we are implementing native events. #311

[tnrich]

@jennifer-shehane so in the future I should be able to do cy.get().click({native:true}) to have the test pass as expected? Is there an expected date the native events feature will land?

Thanks!

[jennifer-shehane]

@tnrich Keep up with the checklist in the main comment of the #311 thread - it is being kept up to date.

[kuceb]

@tnrich can you see if passing a true/false value to the showDefaultUI (second arg) of document.execCommand makes a difference?

document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)

[tnrich]

@bkucera passing true/false as the second arg doesn't seem to have any effect on the copy command getting triggered from the cypress click.

[kuceb]

@jennifer-shehane is correct, the copy command can only happen in response to a trusted user event, which can only be done with native events.
I'll add this to the native events issue

[jennifer-shehane]

Related to

• Using modifier keys for copy + paste: implement modifier effects for copy and paste #2386
• Enable access to clipboard contents: Enable access to clipboard in test #2752