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

Solution: Update an Order

Explore how to update an order in a work order manager application using WebdriverIO. Learn to understand page objects, automate UI interactions like clicking the edit button, and verify changes through test assertions. This lesson guides you step-by-step through reading and running test scripts to validate order updates, helping you gain practical skills in automated UI testing for React-based applications.

We'll cover the following...

Challenge solution

Let's review the code for the challenge exercise.

Order details page object

The solution for the ​​orderDetails.page.js is provided below:

Javascript (babel-node)
import Page from './page'
class OrderDetailsPage extends Page {
  async navigateToEditOrder() {
    await $('button=Edit').click()
  }
  /**
   * Selects a specific order detail
   * @param {*} field ex. Name, Email, Phone, Category, Description
   * @param {*} content the visible text in the field
   */
  orderDetail(field, content) {
    return $(`h5=${field}: ${content}`)
  }
}
export default new OrderDetailsPage()

Let's explain the code above:

  • In line 6, we select a button element with the text “Edit” and execute ...