Best approach to automate Shopify Theme Customizer UI using Playwright
Reproduction steps
I’m automating the Shopify Theme Editor using Playwright. I can interact with the Theme Editor UI, but I’m unable to reliably validate the UI changes in the preview window.
Is there a recommended or officially supported way to automate and validate the Theme Editor preview? How do developers typically verify UI changes made through the Customizer?
Any guidance or best practices would be appreciated. Thank you!
Additional info
I’d like to know:
Is UI automation of the Theme Editor preview officially supported?
What is the recommended approach for validating UI changes made through the Theme Editor?
Is there a supported way to access or inspect the preview DOM during automation?
Do Shopify developers typically automate the Theme Editor itself, or do they automate only the storefront after changing settings?
Are there any recommended tools, APIs, or best practices for this type of testing?
I guess it depends on exactly what you’re trying to achieve?
I’d always recommend (at least at the current state of theme architecture) to edit content through template json files, if you’re doing it programmatically?
You could stille automate testing and design reviews with playwright mcp and screenshots through the preview URL (not theme editor).
Thanks for the suggestion! I understand that editing the template JSON files is a more reliable approach than automating the Theme Editor UI.
Could you please explain how section automation works through the template JSON files? Specifically, how can I programmatically update section settings (such as text, images, colours, blocks, and other section-specific options) and then validate the changes using Playwright on the preview URL?
I heavily use Playwright / Chrome / Safari MCP to test my Shopify apps / theme changes.
Can you elaborate more on the issues you’re facing when trying to validate the UI changes?
If the store password is an issue, you can temporarily manually enter in the store password manually in the test browser window, then resume your tests.
My main challenge isn’t accessing the storefront preview or the store password. I’m able to automate and validate the storefront UI using Playwright.
The difficulty is automating the Theme Editor (Customizer) itself. My goal is to validate that every customizable option (text, colors, typography, spacing, blocks, section settings, etc.) works correctly and that the corresponding changes are reflected in the storefront.
Since the Theme Editor is a dynamic React-based interface with nested components and iframes, I’ve found UI automation to be quite fragile and difficult to maintain.
I’m trying to understand whether the recommended approach is to programmatically update the template JSON files (or other theme configuration files) instead of interacting with the Theme Editor UI, and then use Playwright to validate the preview.
If so, could you explain how you automate different section settings through the JSON/template files? For example, how do you update section and block settings programmatically and trigger the preview for validation?
I’d love to understand the workflow you use for testing Shopify theme changes at scale.
Got it. So that’s behind the Shopify Admin as well, which requires logging in.
Have you tried using an AI harness to control Playwright/Chrome/Safari via MCP? That way the harness can discover these “fuzzy” quirks about navigating the dynamic JS driven HTML.
Just as a security note, I always create a dedicated user in my dev store that is limited to the bare minimum permissions to access the storefront and not modify any production data.