Add emulate page focus to fix issues with typing or clicking when the Runner is out of focus

[sync-by-unito]

Originally described in this github issue: https://github.com/cypress-io/cypress/issues/5023

Currently, there is non-determinism when you're clicking or typing in the runner and you disable window focus to tab to your editor, your test will fail even though it works.

Enabling Emulate a Focused Page in the chrome devtools fixes this. Luckily, this is an automation flag we can set on browser launch.

┆Issue is synchronized with this Jira Bug by Unito
┆Attachments: Screen Shot 2021-10-13 at 3.28.34 PM.png
┆author: Jess Sachs
┆epic: Edge Cases
┆friendlyId: UNIFY-456
┆priority: High
┆sprint: Sprint #7
┆taskType: Bug

[ThijSlim]

@jennifer-shehane You're saying that you can automate this flag. I can't find a way to set the Emulate a Focused Page flag

[bkuzma]

I could also use some help figuring out how to launch Chrome with this option enabled 😕 🙏

[taybenlor]

This doesn't appear to be a chrome flag, but rather a devtools protocol command. The method is Emulation.setFocusEmulationEnabled and it takes { enabled: boolean }. You can see a code search here.

More documentation here: https://chromedevtools.github.io/devtools-protocol/tot/Emulation/#method-setFocusEmulationEnabled

[taybenlor]

As a workaround, a simple solution that appears to work is to add a command that uses Cypress' internal automation API:

Cypress.Commands.add("emulateFocus", (enabled) => {
    return Cypress.automation("remote:debugger:protocol", {
        command: "Emulation.setFocusEmulationEnabled",
        params: { enabled: enabled ?? true },
    });
});

This resolves the issues we were running into.

[cypress-app-bot]

This issue has not had any activity in 180 days. Cypress evolves quickly and the reported behavior should be tested on the latest version of Cypress to verify the behavior is still occurring. It will be closed in 14 days if no updates are provided.

[wrycu]

still a problem.

[taybenlor]

@brian-mann - I'd be willing to work on a PR to resolve this based off my fix above ^ however I have no context on how Cypress works internally or what direction you would like this fix to take.

We have seen that fix resolve our issues with focus consistently in CI and when running headless.

[cypress-app-bot]

This issue has not had any activity in 180 days. Cypress evolves quickly and the reported behavior should be tested on the latest version of Cypress to verify the behavior is still occurring. It will be closed in 14 days if no updates are provided.

[cypress-app-bot]

This issue has been closed due to inactivity.

[IvanovAtanass]

Hi, I have a similar problem with headless mode, my element is not fully rendered when Cyppers tries to interact with it. In the browser, all tests pass, and this problem occurs every time in a different test, and only in headless mode. I used your abovementioned solution, but it didn't solve my problem. Could I ask for your assistance?

[jennifer-shehane]

@IvanovAtanass Likely your issue is not related to this emulate focus issue if the workaround doesn't solve your issue. I'd suggest writing an assertion that ensures the element is fully rendered before interacting with it, like 'should('be.visible')' or similar.

[cypress-app-bot]

This issue has not had any activity in 180 days. Cypress evolves quickly and the reported behavior should be tested on the latest version of Cypress to verify the behavior is still occurring. It will be closed in 14 days if no updates are provided.