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: 11 days 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 (over 5 years ago)
• Default Branch: master
• Last Pushed: 2024-12-04T18:04:42.000Z (about 1 month ago)
• Last Synced: 2024-12-17T15:47:53.394Z (22 days ago)
• Topics: cypress, cypress-example
• Language: JavaScript
• Size: 1.34 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] [![CircleCI](https://circleci.com/gh/bahmutov/cypress-example-forms/tree/master.svg?style=svg)](https://circleci.com/gh/bahmutov/cypress-example-forms/tree/master) ![cypress version](https://img.shields.io/badge/cypress-9.7.0-brightgreen) ![cypress-react-app-actions version](https://img.shields.io/badge/cypress--react--app--actions-1.0.2-brightgreen)

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.

![Start of the second test](images/start-of-second-test.gif)

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/