Cypress: Cypress tests when run in the background (in interactive mode) become extremely flakey

[TransmissionsDev]

Current behavior:

Cypress tests when run in the background (in interactive mode) become extremely flakey.

When I'm working on my tests and I have the Cypress test runner open behind VSCode (on macos), and I go back to the tests after they auto run on save, I get weird errors when asserting that text should be visible, saying that the text is in the document but is not visible.

However, this does not happen outside of interactive mode, or when I rerun the tests when the runner is the primary focus.

Desired behavior:

Tests should perform the same when run in the background (in interactive mode), as they do when the test runner's window is the primary focus?

Cypress: 4.0.2, MacOS El Capitan, Chrome (Interactive Mode!)

[jennifer-shehane]

Unfortunately we have to close this issue as there is not enough information to reproduce the problem. This does not mean that your issue is not happening - it just means that we do not have a path to move forward.

Please comment in this issue with a reproducible example and we will reopen the issue.

[BirgitPohl]

Can I re-open this one by providing more information?

Let me give you a website and some code to reproduce

I have a container ".wl-modal__frame" that slowly moves from bottom to top when you click on the heart icon at the top. It doen't matter if you have bookmarked items or not.

Following is are the only dependencies and package.json configs:

"devDependencies": {
    "cypress-cucumber-preprocessor": "^2.0.1",
    "cypress": "^4.2.0",
  }

• Chrome 80 in Cypress interactive mode
• MacOS Catalina 10.15.3 on a Mac Book Pro 15'' 2017
• 2,5GHz Quad Core intel Core i7

I use Cucumber as you can see. But I can provide snippets for Cypress only too.
Of course, implementing Cucumber as a plugin: plugins/index.js

module.exports = (on, config) => {
  on("file:preprocessor", cucumber());
};

Code snippets you need:

When(/^I visit Sonnenklar$/, () => {
  cy.visit("https://www.sonnenklar.tv/")
    .get("body").should("be.visible");
});

When(/^I click on the Wishlist Icon$/, () => {
  cy.scrollTo(0, 0)
    .get(".wl-main-button:visible")
    .first()
    .should("be.visible")
    .click()
    .wait(1000); //shouldn't be here, but just to be sure, that it is a timing issue
});

Then(/^I see the Wishlist$/, () => {
  cy.get(".wl-modal__frame").should("be.visible");
});

When I visit Sonnenklar
When I click on the Wishlist Icon
Then I see the Wishlist

Steps to reproduce:

1. Have another window and fullscreen mode
2. Have the Cypress not in fullscreen mode
3. Run the test
4. Go to the fullscreen window and wait
5. Come back and see results

Current behaviour:
".wl-modal__frame" is recognised as not visible
Actual behaviour:
".wl-modal__frame" is recognised as visible

---

I'm still investigating a different issue, that should not be an issue. I have a local storage sk-wishlist that only Cypress can not understand to present it to my iframe which is being served under the same domain. So maybe it also has something to do with it runs in the background and becomes flaky. Let's check. Will keep you updated.

[jennifer-shehane]

@BirgitPohl I can recreate this issue. Your issue is a duplicate of #5023 - see that issue for updates.