Search⌘ K
AI Features
Home
Courses
Testing React Applications with Postman and WebdriverIO

Solution: Create an Order

Understand how to implement and test a work order creation flow in a React app using WebdriverIO. Learn to interact with form elements, submit orders, and assert that the order appears on the interface, developing skills to automate user interface workflows.

We'll cover the following...

Challenge solution

Let's review the code for the challenge exercise.

Form component

The solution for the ​​form.js is provided below:

Javascript (babel-node)
class Form {
  get nameInput() {
    return $('[name="name"]')
  }
  get emailInput() {
    return $('[name="email"]')
  }
  get phoneInput() {
    return $('[name="phone"]')
  }
  get categorySelect() {
    return $("[aria-label='category selector']")
  }
  get descriptionInput() {
    return $('[name="description"]')
  }
  get submitButton() {
    return $('button=Submit')
  }
  updateField(field) {
    return $(`[name="${field}"]`)
  }
  /**
   * Updates a field in the form
   * @param {*} field ex. name, email, phone, category, description
   * @param {*} value
   */
  async updateOrder(field, value) {
    await this.updateField(field).setValue(value)
    await this.submitButton.click()
  }
  async enterOrder(name, email, category, phone, description) {
    await this.nameInput.setValue(name)
    await this.emailInput.setValue(email)
    await this.categorySelect.click()
    await $(`[name='${category}']`).click()
    await this.phoneInput.setValue(phone)
    await this.descriptionInput.setValue(description)
    await this.submitButton.click()
  }
}
export default new Form()

Let's explain the code above:

  • In line 11, we select the phone field by its name attribute.

  • In line 15, we select the category select by its aria-label attribute.

  • In ...