Embedded app iframe loading issues in Shopify e2e tests

Other Questions Shopify
1

I’m having trouble with my e2e tests for a Shopify app. The tests work fine at first, but then things go wrong.

Here’s what’s happening:

  1. I set up the auth and save the storageState.
  2. When I try to run more tests using that saved state, the Shopify embedded app iframe won’t load.
  3. I get a “connection reset” error most of the time.

It’s weird because I can use the app normally in my regular Chrome browser. Sometimes I see the reset error there too, but refreshing fixes it.

I’m using Playwright for testing. Here’s a snippet from my config:

const testConfig = {
  projects: [
    {
      name: 'initial',
      use: { ...devices['Desktop Chrome'] },
      testMatch: /setup\.initial\.ts/,
    },
    {
      name: 'main',
      use: { 
        ...devices['Desktop Chrome'],
        savedState: 'browser_state.json',
      },
      dependencies: ['initial'],
    },
  ]
};

Any ideas what could be causing this? It’s making it hard to build up my test suite. Could it be a network thing? I had to tweak some settings to even install the CLI tool.

2

yo, i feel ur pain with shopify testing. have u tried using a different browser for ur tests? sometimes chrome can be finicky. also, maybe check ur network stability - flaky connections can mess with iframes. if all else fails, u could try mocking the iframe content for faster tests. good luck mate!

3

hey, i’ve had similar issues with shopify testing. have u tried clearing browser cache between tests? sometimes stale data messes things up. also, check ur network settings - maybe increase timeout for iframe loading. could be shopify’s rate limiting kicking in too. good luck!

4

I’ve dealt with similar headaches testing Shopify apps. One thing that helped was setting up a custom user agent string for my test browser. Shopify sometimes treats automation tools differently, so mimicking a real browser can help.

Also, have you looked into using Shopify’s App Bridge library? It can sometimes smooth out iframe communication issues. You might need to add a small delay after the iframe loads to let App Bridge initialize fully.

Network-wise, I had to whitelist a bunch of Shopify domains in my firewall to get consistent results. If you’re behind a corporate network, that could be causing intermittent issues.

Lastly, don’t discount Shopify’s own quirks. I’ve seen random ‘connection reset’ errors that weren’t my fault at all - just Shopify having a moment. Building in some resilience and retries into your tests can help work around that.

5

I’ve encountered similar challenges with Shopify e2e testing. One approach that’s proven effective is implementing a retry mechanism for the iframe load. You could wrap the iframe loading process in a function that attempts to load it multiple times with short delays between attempts.

Additionally, consider setting up a proxy server to handle your requests. This can help mitigate rate limiting issues and provide more consistent network behavior. It’s also worth examining your network configuration to ensure there are no firewall or VPN settings interfering with the connection.

Lastly, double-check your Shopify app’s settings. Sometimes, permissions or API version mismatches can cause unexpected behavior in testing environments. Ensuring all settings are correctly configured might resolve the issue.