Troubleshoot issues when recording on one environment and simulating on another

You can record sessions from one environment (for example, production, or localhost) and simulate them against another environment (for example, a preview URL). However the sessions may fail to simulate if there are significant differences between the environments, for example:

  • Differences in authentication configuration: If the authentication is configured differently on the different environments, and the frontend javascript performs some basic authentication checks before talking to the backend then sessions may not simulate correctly across environments.

    Since Meticulous mocks out any requests to the backend, and doesn't hit your real backend, it doesn't matter if the environment hits a different backend or a different auth service. However if, for example, the FE checks for the existance of a certain local storage value to check auth, and redirects the user to the login page if it's absent, and the name of the local storage value that is checked is different between the two enviornments, then sessions recorded on one environment may not simulate correctly on the other.

  • Fundamental differences in the URL routing, rather than just the base URL: Meticulous can handle differences in the base URL/the origin, however it may not work if there are more fundemental differences in the URL routes between the different environments (for example, one environment uses a path parameter where another uses a query parameter). Click here for more details.

If you're using Vercel, Netlify, or similar preview URLs, then Meticulous will simulate sessions against the preview URL of the base commit on the main branch and against the preview URL of the head commit of the pull request branch, and compare visual snapshots between the two. It's therefore also important that the preview URLs of the main branch and the pull request branches are configured to run the app with the same configuration. In this case please check the environment variables and configuration you use to run & build your app are the same for the deployments of the main branch (production deploys) and the deployments of pull request branches (preview deploys). If the configuration is not aligned then it's possible that you could get false positive screenshot diffs.

How do I solve this?

To fix these issues you may need to unify some of the configurations across the environments you are recording and simulating on. For example, If there are fundamental differences in the URL routing, then you could alias the routes on the different environments so that they match, and sessions can be simulated.

You can also use the Meticulous object on the window to detect if the page is being rendered as part of a Meticulous test, rather than for an end user, and if so modify the behaviour of the app to work around the differences between the environments. For example, if sessions are failing to simulate because the frontend code looks for a different cookie name on the different environment to check if the user is authenticated, then you could disable the frontend-only authentication checks if the page is being rendered as part of a Meticulous test. Since the user won't be authenticated any requests to the backend would fail, but since Meticulous mocks out all responses from the backend anyway it doesn't matter.

If you have any questions reach out to eng@meticulous.ai and we'll be happy to help. You can also join our community discord.