Skip navigation

Sample: Reuse Scenarios

Consider the previous sample form. This time we will write a test suite in re-usable way.

Test suite

To create the test suite, follow these steps:

  1. Create a file named data/form-reuse-scenarios.tests.yaml in your test project.

  2. Add the following content to the file:

    scenarios:
  # Input the form with valid username and email,
  # but not submit it
  - url: https://tuyen.blog/optimizely-cms/testing/form-submission-test-sample/
    label: Input the form with valid username and email
    viewportNames:
      - desktop
    id: valid-data-1
    actions:
      - input: '#signup #username'
        value: test
      - input: '#signup #email'
        value: test@gmail.com

  # Input the form with username, email and password,
  # but not submit it
  - url: https://tuyen.blog/optimizely-cms/testing/form-submission-test-sample/
    label: Input the form with valid password
    viewportNames:
      - desktop
    id: valid-data-2
    # Executing all the actions from above scenario
    # before executing the actions from this scenario
    needs: valid-data-1
    actions:
      - input: '#signup #password'
        value: kCzs0!!kP^jIXamK}g@e
      - input: '#signup #confirm-password'
        value: kCzs0!!kP^jIXamK}g@e

  # Submit the form with valid data
  - url: https://tuyen.blog/optimizely-cms/testing/form-submission-test-sample/
    label: Submit the form
    viewportNames:
      - desktop
    needs:
      # Executing all the actions from the scenarios `valid-data-1`
      # and `valid-data-2` before executing the actions from this scenario
      - valid-data-2
    actions:
      - click: '#signup input[type="submit"]'
      - wait: 5000
        url: '**/?action=signup'

Verify

Execute the following command to verify the test suite:

npm run ref -- --test-suite form-reuse-scenarios
npm run approve -- --test-suite form-reuse-scenarios
npm run test -- --test-suite form-reuse-scenarios