Use Shopify CLI to preview your local theme on a development store, then point Cypress at the preview and test the rendered storefront in a real browser. This is a practical workflow built from Shopify’s preview tools and Cypress’s browser-testing capabilities; the vendors do not document a dedicated Shopify–Cypress integration.
Set up a Shopify theme preview for Cypress
Prepare the development store and theme
Use a development store you are authorized to access. From a valid Shopify theme directory, run:
As an Amazon Associate I earn from qualifying purchases.
shopify theme dev --store my-storeReplace my-store with your store’s handle. Shopify CLI uploads the local theme as a development theme and prints a local preview URL, a theme-editor link, and a shareable preview link. The local preview is commonly http://127.0.0.1:9292. CSS and section changes can hot reload, while other file changes can refresh the page. Exact behavior depends on the CLI version and its options; see Shopify’s theme dev reference and Shopify CLI for themes.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Run the command from a directory with Shopify’s expected theme structure, such as assets, config, layout, locales, sections, snippets, and templates. If your build process transforms source files, run Shopify CLI from the generated theme directory.
Choose a preview that fits the test run
A development theme is useful for active local work, but it is temporary: Shopify says it is deleted after seven days of inactivity and when you run shopify auth logout. For a preview that remains useful after logout, push the development theme to an unpublished theme. Teams switching among stores or environments can configure Shopify CLI environments in shopify.theme.toml; keep credentials out of committed configuration. See Shopify CLI environments.
Shopify also documents shopify theme preview for applying JSON overrides and reusing a preview identifier; consult the theme preview command reference when that is the workflow you need.
Configure Cypress to visit the preview
Use the preview URL Shopify CLI prints. For the local preview, set the Cypress base URL to http://127.0.0.1:9292, or pass the URL directly to cy.visit(). Keep the server running while Cypress executes. The example below uses Cypress’s JavaScript E2E test style; adapt the selectors to your theme’s actual markup.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware match// cypress.config.js
const { defineConfig } = require('cypress');
module.exports = defineConfig({
e2e: {
baseUrl: 'http://127.0.0.1:9292',
},
});// cypress/e2e/storefront.cy.js
describe('Shopify storefront preview', () => {
it('renders the home page and opens a product', () => {
cy.visit('/');
cy.get('main').should('be.visible');
// Replace this selector with a stable link from your theme.
cy.get('a[href*="/products/"]').first().click();
cy.location('pathname').should('include', '/products/');
cy.get('main').should('be.visible');
});
});Cypress waits for the page load event when visiting a page. Its documentation describes browser E2E testing and viewport control in the Cypress FAQ. There is no vendor-prescribed combined configuration, preview authentication recipe, or standard Shopify–Cypress harness, so treat the base URL and access setup as project-specific.
Build useful storefront tests
Choose scenarios that reflect what shoppers can do in the theme, and assert observable outcomes rather than implementation details. A practical first set includes:
- Navigation links open the expected collection or page.
- Collection and product pages render their main content.
- Product options can be selected and product forms respond as expected.
- Cart actions show the expected cart feedback or state.
- Important layouts remain usable at desktop and mobile viewport sizes.
These are suggested test cases, not coverage guarantees from Shopify or Cypress. Cypress viewport control lets a test exercise responsive layouts; decide viewport sizes based on the devices and breakpoints your theme supports.
Use real and stubbed requests deliberately
Use cy.intercept() to observe, wait for, or stub requests made by the storefront in the browser. Use cy.request() when Cypress’s Node process should call an endpoint directly and inspect the response. Cypress notes that cy.request() does not pass through the interception proxy, so cy.intercept() will not observe it.
For confidence in the integrated preview, avoid stubbing every request: a fully stubbed test can prove that the UI responds to a fixture, but not that the real Shopify-backed path works. Where the test environment and endpoint access allow it, combine a UI action with a direct API assertion about the resulting state.
Use development-store data that exercises the theme
Development stores are empty by default, but Shopify provides an option to generate test data. Shopify describes that data as including common commerce primitives and configurations for testing themes, apps, and custom storefronts, including some Plus-specific features. Populate or generate representative products, collections, and relevant configurations before testing flows that depend on them. The official documentation does not prescribe a Cypress fixture workflow; record the data assumptions your tests require. See Shopify development stores.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Know what the local preview does not test
Shopify explicitly states that checkout customizations cannot be previewed using http://127.0.0.1:9292. Do not treat successful Cypress tests against that local URL as validation of checkout customizations. The cited Shopify and Cypress documentation does not establish a Cypress-supported hosted-checkout procedure; verify Shopify’s currently supported checkout test environment separately before designing that coverage.
Browser E2E tests are one layer, not the whole theme test plan. Shopify’s theme-testing article discusses Theme Check, inspecting navigation and product forms with JavaScript disabled, and running Lighthouse against a preview link. That article is older guidance, so check current Shopify requirements before relying on it as a definitive Theme Store submission checklist.
Free tools Windows power users keep installed
One-click scans. No signup required.
Troubleshooting common failures
- Shopify CLI does not recognize the theme: Run the command from a directory with the expected theme structure. If your build generates a separate theme directory, run it there.
- The preview URL is unreachable: Confirm
shopify theme devis still running, then use the exact local or shareable URL printed by the command. Check that Cypress is configured for the same URL and that no other process or network rule blocks access. - The theme preview disappears later: Development themes are temporary and are removed after seven days of inactivity or when you log out with
shopify auth logout. Use an unpublished theme for a persistent preview link. - A selector fails after a theme change: Cypress selectors must match the rendered markup. Prefer stable attributes or meaningful links, and update the test when the UI contract intentionally changes.
cy.intercept()does not see an API call: Check whether the request came fromcy.request(). That command originates in Cypress’s Node process and is not intercepted as browser traffic.- A checkout customization is not visible: The local
127.0.0.1:9292preview cannot preview checkout customizations. Use a separately verified, currently supported checkout test environment.
Or skip the browser setup
If your immediate need is a screenshot rather than an interactive Cypress test, ScreenshotNeo is a website screenshot API and MCP server. One GET request can return an image or PDF; its browser cleanup accepts cookie/consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture, with each cleanup step configurable. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers identify the page verdict and billing status. Its MCP server gives AI agents screenshot, page-info, and PDF-capture tools.
For example, capture a Shopify preview URL as WebP with cURL:
curl -G "https://api.screenshotneo.com/v1/shot"
-d access_key=YOUR_API_KEY
--data-urlencode url=https://your-preview-url
-o shot.webpSee the ScreenshotNeo API documentation for request options and setup. The Free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000. Sign up for ScreenshotNeo’s free plan.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
Recommended Free Tools
