Front-end Testing 101: Integration and End-to-end Testing/

...

/

Interacting with the Page

Interacting with the Page

Learn to interact with the page using the Cypress UI.

We'll cover the following...

Interacting with the page

First of all, we need to automate the Cypress test so that it fills the form and clicks the “Sign up” button itself.

We need Cypress to:

  • “Identify” the input fields.
  • Identify the button.
  • Click the button.

Identifying elements and interacting with web pages can have some hidden challenges, but they are all fairly simple to overcome. . Down below is the code for the signup page.

Press + to interact
<form>
  <fieldset>
    <fieldset class="form-group">
      <input
        class="form-control form-control-lg"
        type="text"
        placeholder="Username"
        value=""
      />
    </fieldset>
    <fieldset class="form-group">
      <input
        class="form-control form-control-lg"
        type="email"
        placeholder="Email"
        value=""
      />
    </fieldset>
    <fieldset class="form-group">
      <input
        class="form-control form-control-lg"
        type="password"
        placeholder="Password"
        value=""
      />
    </fieldset>
    <button class="btn btn-lg btn-primary pull-xs-right" type="submit">
      Sign up
    </button>
  </fieldset>
</form>

The three input fields are pretty identical except for:

  • The order: The email field comes first, then the email and password fields.

  • The type: text, email, and password.

  • The placeholder: attribute specifies a short hint that describes the expected value of a text field.

Order of elements

Note: the ...