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

[sync-by-unito[bot]]

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

[sync-by-unito[bot]]

➤ Mark Noonan commented:

Chris Baus “CT wiring” refers to this

[sync-by-unito[bot]]

➤ Chris Baus commented:

IF you pick up this issue, please discuss with Brian Mann regarding the implementation

[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]

I was able to rig up a hack that resolved this problem for us, as long as we are only testing in Chrome. I've written an extension that attaches to the debugger and runs the Emulation.setFocusEmulationEnabled on every tab update. This extension is loaded in via Cypress plugins in before:browser:launch. The code is here: https://gist.github.com/taybenlor/6af1ee5a8c82698b7d20261c4179c39f

This isn't a great approach, but it does work.

[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.

[nagash77]

Hi @taybenlor unfortunately we do not currently have the resources to assist outside contributors with their PRs. I would suggest you check out the Cypress Discord Community . The community may be able to appropriately guide you.

[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.