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

Solution: Order Workflow

Explore how to implement and execute automated tests for the order workflow in a React application using WebdriverIO. Understand how to create, update, and delete work orders, navigate between pages, and verify UI changes to ensure robust end-to-end testing of the work order manager.

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 deleteOrder() {
    await $('button=Delete').click()
  }
  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 5, we select a button element with the text “Delete” and execute the click ...