Connection reset issues with Playwright when testing embedded Shopify app in iframe

[henryg]

I’m running into a frustrating problem with my Shopify app testing setup. My app is hosted on a cloud platform and I’m trying to do end-to-end testing with Playwright.

Here’s what happens: The first time I run tests, everything works fine. The auth process completes and I save the browser state. But when I try to run the next test using that saved state, the embedded app iframe fails to load most of the time. I get a “connection was reset” error message.

This doesn’t happen every single time, but it’s frequent enough to be really annoying. When I bundle all my test steps together instead of separating them, the problem happens less often. But it still occurs sometimes when the server might be idle.

The weird thing is that I can use the app just fine in my regular Chrome browser during these failures. I do see similar connection errors there occasionally if I leave a tab open for a long time, but refreshing the page fixes it.

My config looks like this:

testProjects: [
  {
    id: 'auth-setup',
    browser: { ...browserSettings['Desktop Chrome'] },
    testPattern: /auth\.setup\.ts/,
  },
  {
    id: 'chrome-tests',
    browser: { 
      ...browserSettings['Desktop Chrome'],
      savedState: STATE_FILE,
    },
    requires: ['auth-setup'],
  },
]

I’m really stuck on this one. It’s blocking me from building out my full test suite because I can’t rely on the tests to run consistently. Has anyone seen this kind of iframe connection issue before?

I’m wondering if this might be related to network connectivity since I had IPv6 issues when setting up the hosting platform CLI tools.

[Ethan99]

I’ve encountered similar intermittent connection issues with embedded apps in testing, although not specifically with Shopify. This seems to be related to how session management carries over between tests and possibly network state. One effective approach I found was to introduce explicit waits before interacting with the iframe; sometimes the saved browser state doesn’t correctly restore network connections, which is crucial for embedded applications. You might want to implement a ‘networkidle’ wait or check the presence of specific iframe elements before executing your tests. Additionally, I developed a retry mechanism, specifically for loading iframes, which alleviated many of the connectivity issues. Since you’ve noticed that bundling your tests works better, it suggests that the saved state may be becoming stale during isolated runs. Consider integrating a fallback re-authentication process in cases where the iframe fails to load within the allotted timeout. Also, your mentioned IPv6 issues could certainly be influencing this, as network configuration problems frequently manifest as random connection resets, particularly in cloud-based setups.

[Finn_Mystery]

This looks like a session persistence issue I’ve seen with iframe apps before. The connection resets happen when saved browser state breaks websocket or persistent connections that Shopify apps need to talk to the parent frame. Here’s what fixed it for me: add a warmup step after loading saved state but before running tests. Navigate to a simple endpoint first, let it fully load, then hit the iframe tests. This re-establishes the network connections. Cloud platforms can mess with this too - their connection pooling or load balancing doesn’t play nice with saved states. Try adding 2-3 seconds between finishing auth setup and running dependent tests. Since bundled tests work better, timing’s definitely part of the problem. Also check if your hosting platform has connection timeout settings that drop idle connections between test runs.