Case Study: Stabilizing Selenium Automation Scripts for Modal Windows

Improving Fixed Waits for JavaScript Modal Animations, with a bit OO refactoring.

Modal windows (like below) are commonly used in modern websites.

WhenWise is primarily an English-language app. I created the prototype while in high school, and later, AgileWay commercialized it. I used this screenshot to demonstrate how to use element IDs for testing multi-language support in an app.

Below is a test script I wrote before to create 8 appointments on WhenWise app: open a modal window, enter minimal data, and close it.

    8.times do |i|
      calendar_page.click_time_slot(9 + i)
      calendar_new_modal_page = CalendarNewModalPage.new(browser)
      try_for(2) { calendar_new_modal_page.enter_title(i.to_s) }
      calendar_new_modal_page.select_client("米为义")
      calendar_new_modal_page.click_create
      sleep 0.5
    end

Some experienced test automation engineers might point out the using sleep 0.5, a fixed wait is suboptimal. This is the maximum time I allowed for the modal window to be fully closed.

The above fixed-wait works mostly fine, as the JS execution usually takes a lot less than half a second. Even in rare situations, BuildWise’s CT server auto-retry feature will handle that.

Still, I can optimise that and update the Selenium script to ensure the modal window is properly closed before continuing to the next step.