What's the best way to interact with the history API?

[aryzing]

Modern SPA apps use the History API, which can be used to communicate state to other parts of the app (eg, where a user was redirected from).

Although inter-page communication can also be accomplished via a query param, the current app that I'm working with is using pushState()'s state object. I'm trying to follow best practices and not fill out an entire form just to get redirected to the right place with the proper state object.

Don't think this is supported natively with Cypress (eg, cy.visit("path/to/page", {state: {foo: "bar"}})), so what's the best way to navigate to a particular page with a given History API state object?

[bahmutov]

@aryzing can you provide an app example where you want to visit specific pages like that?

[aryzing]

Sure. Say you're filling out a form in a React app on /app/form. The react app is using the standard React Router.

After submitting the form, the user is redirected /app/details, with a History API state {isUserComingFromForm: true}. When the details page loads, if it finds isUserComingFromForm to be true, it displays some animation such as a confetti animation.

Any other time the user visits the details page, nothing will happen because the history state won't be there. So it would be great if Cypress had the ability to navigate to a specific page with the a specific History API state.

Does this make sense?

[bahmutov]

@aryzing take a look at https://glebbahmutov.com/blog/cypress-history-api-example/ and the example app https://github.com/bahmutov/cypress-history-api-example I think it might answer all your questions

[aryzing]

Amazing! Thanks for the post.