Sample: Form Submission

Use case

Consider the following sample form:

The form has the following requirements:

All fields are mandatory.
Username (after trimming leading and trailing whitespace):
- Must have at least 3 characters.
- Must not exceed 25 characters.
Email must match the following regular expression pattern:
```
^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$
```
You can independently verify emails against this pattern on regex101.com, using ECMAScript (JavaScript) flavor.
Password must:
- Have at least 8 characters.
- Have at least 1 lowercase character.
- Have at least 1 uppercase character.
- Have at least 1 numeric digit.
- Have at least 1 special character from the set !@#$%^&*.
Confirm Password must match the Password field.

Test suite

To create the test suite, follow these steps:

Create a file named data/form-submission.tests.yaml in your test project.

Add the following content to the file:

scenarios:
  # Scenario:
  # Testing the page without any user interaction
  - url: https://tuyen.blog/optimizely-cms/testing/form-submission-test-sample/
    label: Visit the page

  # Scenario:
  # Testing the form with valid data
  - url: https://tuyen.blog/optimizely-cms/testing/form-submission-test-sample/
    label: Testing the form with valid data
    actions:
      - input: '#signup #username'
        value: test
      - input: '#signup #email'
        value: test@gmail.com
      - input: '#signup #password'
        value: kCzs0!!kP^jIXamK}g@e
      - input: '#signup #confirm-password'
        value: kCzs0!!kP^jIXamK}g@e
      - click: '#signup input[type="submit"]'
      - wait: 5000
        url: '**/?action=signup'

  # Scenario:
  # Testing the form when clic submit without input any data
  - url: https://tuyen.blog/optimizely-cms/testing/form-submission-test-sample/
    label: Testing the form when clic submit without input any data
    actions:
      - click: '#signup input[type="submit"]'

  # Scenario:
  # Testing the form with invalid password
  - url: https://tuyen.blog/optimizely-cms/testing/form-submission-test-sample/
    label: Testing the form with invalid password
    actions:
      - input: '#signup #username'
        value: test
      - input: '#signup #email'
        value: test@gmail.com
      - input: '#signup #password'
        value: 'too simple password'
      - input: '#signup #confirm-password'
        value: 'too simple password'
      - click: '#signup input[type="submit"]'

  # Scenario:
  # Testing the form with Password and Confirm password mismatch
  - url: https://tuyen.blog/optimizely-cms/testing/form-submission-test-sample/
    label: Testing the form with Password and Confirm password mismatch
    actions:
      - input: '#signup #username'
        value: test
      - input: '#signup #email'
        value: test@gmail.com
      - input: '#signup #password'
        value: kCzs0!!kP^jIXamK}g@e
      - input: '#signup #confirm-password'
        value: 25H;]Ib,e>5M<#,FFJ=q
      - click: '#signup input[type="submit"]'

Verify

Execute the following command to verify the test suite:

npm run ref -- --test-suite form-submission
npm run approve -- --test-suite form-submission
npm run test -- --test-suite form-submission

Sample: Form Submission

Use case

Sign Up

Test suite

Verify