Free tools Windows power users keep installed
One-click scans. No signup required.
To test a Vue app with Vuex and a REST backend in Cypress, choose the layer that matches the behavior you need to prove: mount a component with a fresh Vuex store for component behavior, use cy.intercept() to observe or control requests the app makes, and keep selected end-to-end flows connected to a real backend. Use cy.request() for direct API checks; it does not observe the browser’s app-initiated request.
Choose the test layer that answers your question
These Cypress approaches cover different boundaries; none is a drop-in replacement for the others.
As an Amazon Associate I earn from qualifying purchases.
| Test approach | What it exercises | Best suited to | What it does not establish |
|---|---|---|---|
| Vue component test | An individual component mounted with its required plugins, props, and store | Rendering and component interaction in isolation | That the full application or backend works end to end |
| Application test with a stub | The app in a browser, with controlled REST responses from cy.intercept() |
Repeatable UI states, including empty, validation, and server-error states | That the real server returns the expected response |
| Application test with a real backend | The app’s browser-originated requests and the server responses | Integration confidence for selected user flows | Reliable results without deliberate test-data setup |
| Direct API test | An endpoint called directly with cy.request() |
Checking an API response without exercising the UI | That the app sends the request or handles the response correctly |
Cypress documents Vue component testing for Vue 3 and later. Supported framework and bundler combinations include Vue with Vite and Vue with Webpack; its overview examples specify Vite 8.x and Webpack 5+. Check the current Cypress component-testing setup documentation against the versions installed in your project before copying configuration.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Mount Vue components with a fresh Vuex store
A component that reads from Vuex needs the store installed as a Vue plugin during mount. Create a new store for each test rather than sharing a mutable singleton: state changes in one test should not affect another.
#1 Best Overall
One practical pattern is a getStore() factory passed through a custom cy.mount() command. Adapt the store shape and component import to your app:
// cypress/support/component.js
import { mount } from 'cypress/vue'
import { createStore } from 'vuex'
Cypress.Commands.add('mount', (component, options = {}) => {
const store = options.store ?? createStore({
state: () => ({ items: [] }),
mutations: {
setItems(state, items) {
state.items = items
},
},
})
return mount(component, {
...options,
global: {
...options.global,
plugins: [...(options.global?.plugins ?? []), store],
},
})
})Then mount the component from a test. The example uses the store’s initial state; pass a test-specific store when a case needs different state.
import ItemList from '../../src/components/ItemList.vue'
it('renders items from Vuex state', () => {
const store = createStore({
state: () => ({ items: [{ id: 1, name: 'Example item' }] }),
})
cy.mount(ItemList, { store })
cy.contains('Example item').should('be.visible')
})Keep assertions centered on rendered DOM and retryable Cypress assertions when the behavior is user-visible. Cypress also supports interoperability with Vue Test Utils when wrapper-level inspection is useful. See the official Vue component examples for the current mount setup.
Recommended Free Tools
Stub app requests with cy.intercept()
Use cy.intercept() when a browser action in your app should issue a REST request and the test needs to observe or control it. Register the route before visiting the page or taking the action that triggers the request, alias it, then wait for the matching request before making assertions.
beforeEach(() => {
cy.intercept('GET', '/api/items', {
fixture: 'items.json',
}).as('getItems')
})
it('renders items returned by the API', () => {
cy.visit('/')
cy.wait('@getItems')
.its('response.statusCode')
.should('eq', 200)
cy.contains('Example item').should('be.visible')
})Put items.json in the fixtures location configured for your Cypress project and give it the response shape the application expects. Fixtures keep the response known and repeatable while exercising the app’s response parsing and Vuex update path.
Assert on request and response details
The interception yielded by cy.wait('@getItems') includes request and response data. For example, assert on the outgoing query or payload as well as the returned status when those details matter to the behavior being tested:
cy.wait('@getItems').then(({ request, response }) => {
expect(request.method).to.equal('GET')
expect(response.statusCode).to.equal(200)
})Choose explicitly between spying on a real request, returning a static response or fixture, handling a request with a route handler, and simulating a network error. These test different situations; a forced error, for example, should be paired with an assertion that the app shows the intended failure state.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Match routes narrowly
Specify the HTTP method when possible: a matcher without a method can match all methods. Cypress supports exact URL strings, glob patterns, and regular expressions. If more than one intercept matches, ordinary routes are processed in reverse definition order; middleware routes run first. A precise matcher helps prevent unrelated requests from satisfying a wait.
Cypress clears intercepts before each test, so register routes in the test or its setup rather than relying on a route left by an earlier test. See the Cypress intercept documentation for matcher and handler details.
Rank #4
Keep selected flows connected to the real backend
Stubs make difficult states easy to reproduce, but a UI test that always stubs responses does not verify the server integration. Keep appropriate app flows that receive real server responses, and make their test data setup explicit. Depending on the application, that may mean seeded data or test-data factories; Cypress’s Real World App uses these approaches alongside predominantly server-backed flows, while stubbing selected states that are hard to create otherwise.
A balanced suite can use stubs for empty results, validation failures, server errors, and other carefully chosen response cases, while a smaller set of browser flows exercises the app against the backend. The real-server path needs controlled data and should assert the resulting user-visible behavior rather than assume a particular database state.
Use cy.request() for direct API checks
cy.request() makes an HTTP request directly from the test to an endpoint. It is appropriate when the purpose is to test the endpoint’s response or arrange test data, not when you need to observe the request a user action caused in the browser.
it('returns the expected item from the API', () => {
cy.request('GET', '/api/items/1').then((response) => {
expect(response.status).to.eq(200)
expect(response.body).to.have.property('id', 1)
})
})Use cy.intercept() and cy.wait() for app-originated traffic. Cypress documents that intercepts apply to front-end application requests; a direct cy.request() is not a substitute and is not debugged by an intercept. See the Cypress request documentation.
Troubleshoot requests that do not match
- The wait times out: Confirm the intercept was registered before the action, that the action actually triggers a request, and that the method and URL matcher fit the outgoing request.
- The app appears to make no request: Check whether the browser served the resource from cache. A cached response never reaches the network layer where Cypress intercepts traffic, so the route will not fire. Cypress suggests disabling cache headers in the development server while testing or removing cache headers through an appropriate intercept.
- A different request satisfies the route: Narrow the method and URL pattern. Check for multiple matching routes and their definition order; ordinary routes are processed in reverse order, with middleware routes first.
- A fixture test fails while a real flow passes: Compare the fixture’s structure and types with the response shape the component and store expect. A fixture should be realistic enough to exercise the app’s actual parsing and state updates.
- Results change between component tests: Avoid a shared mutable Vuex store. Build a fresh store inside each test’s mount path or provide a new store instance to every mount.
Or skip the browser setup
If your task is to capture a page screenshot rather than test Vuex state or REST behavior, ScreenshotNeo is a website screenshot API and MCP server. A single GET request returns a PNG, JPEG, WebP, or PDF, and it is not a replacement for Cypress UI or backend integration tests.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for options and response details. It accepts cookie and consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for AI agents. The Free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 shots.
Sign up for ScreenshotNeo’s free plan: 1,000 screenshots a month, no card required.
Frequently Asked Questions
Does a Cypress component test prove that the REST backend works?
No. It checks the mounted component and its configured dependencies; use an app flow that reaches the real backend for integration confidence.
Can cy.request() trigger the app’s browser request so cy.intercept() can catch it?
No. cy.request() calls the endpoint directly from the test. Use a browser action plus cy.intercept() to observe app-originated traffic.
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.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →
