https://github.com/bahmutov/cypress-example-forms
Example Cypress test for multi-page form
https://github.com/bahmutov/cypress-example-forms
cypress cypress-example
Last synced: 9 months ago
JSON representation
Example Cypress test for multi-page form
- Host: GitHub
- URL: https://github.com/bahmutov/cypress-example-forms
- Owner: bahmutov
- License: mit
- Created: 2019-10-03T13:12:01.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2024-12-17T23:51:09.000Z (over 1 year ago)
- Last Synced: 2024-12-27T20:12:42.159Z (over 1 year ago)
- Topics: cypress, cypress-example
- Language: JavaScript
- Size: 1.35 MB
- Stars: 5
- Watchers: 1
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# cypress-example-forms [![renovate-app badge][renovate-badge]][renovate-app] [](https://circleci.com/gh/bahmutov/cypress-example-forms/tree/master)  
Forms component is [uniforms](https://uniforms.tools/docs/tutorials-basic-uniforms-usage)
- [single-test.js](cypress/integration/single-test.js) shows a single long test that goes through the 3 pages of the form.
- [three-tests.js](cypress/integration/three-tests.js) splits this long test into 3 tests. Each test ends by confirming the internal application state, then a new test starts by setting that state. This sets the second test at the same checkpoint _as if the test went through the user interface_.
- [actions.js](./cypress/integration/actions.js) shows even better approach to controlling the application's state from the tests using [cypress-react-app-actions](https://github.com/bahmutov/cypress-react-app-actions) plugin, read "[Control React Applications From Cypress Tests](https://glebbahmutov.com/blog/react-app-actions/)".
Main points
Application exposes its reference by setting it on the `window` object.
```js
// application code
class MasterForm extends React.Component {
constructor (props) {
super(props)
if (window.Cypress) {
window.app = this
}
}
...
}
```
Then the first test ends with a known state - we assert the internal state object.
```js
// end of the first test
const startOfSecondPageState = {...}
cy.contains('Next').click()
cy.log('Second page')
cy.contains('h1', 'Book Hotel 2')
cy.window()
.its('app.state')
.should('deep.equal', startOfSecondPageState)
```
The second test starts by visiting the application page and setting the state object.
```js
// start of the second test
cy.window().its('app').invoke('setState', startOfSecondPageState)
cy.log('Second page')
cy.contains('h1', 'Book Hotel 2')
```
Once the test invokes the `app.setState(...)` it "becomes" exactly as if the test went through the user interface filling the first page.
See more notes about this direct access from the Cypress test to the application in [Stop using Page Objects and Start using App Actions](https://www.cypress.io/blog/2019/01/03/stop-using-page-objects-and-start-using-app-actions/).
## License
This project is licensed under the terms of the [MIT license](/LICENSE.md).
[renovate-badge]: https://img.shields.io/badge/renovate-app-blue.svg
[renovate-app]: https://renovateapp.com/