Selenium测试react-joyride时如何确保JS/CSS加载完成避免点击事件失效

1. 优先关闭react-joyride测试环境动画 #

react-joyride默认的步骤切换过渡动画会导致按钮在动画过程中pointer-events被临时禁用，此时点击不会触发任何事件。在测试环境下给joyride组件配置disableAnimation: true关闭动画，可解决80%以上的偶发点击失效问题。

2. 强化等待逻辑，等待元素可交互 #

原代码仅判断元素存在，未校验按钮是否处于可点击状态，修改判断逻辑，增加禁用状态校验和延长等待阈值：

• 所有按钮判断新增disabled: false参数，确保按钮未被禁用
• 新增wait参数，适配慢加载场景下的资源等待

3. 提前确认全局资源加载完成 #

点击启动引导按钮前，先校验页面JS资源和React组件完全初始化：

# 等待页面所有资源加载完成
wait_until { page.execute_script("return document.readyState === 'complete'") }
# 可选：如果你的应用暴露了React挂载完成的标识，可增加对应判断
# wait_until { page.execute_script("return window.__REACT_APP_MOUNTED__ === true") }

4. 增加稳定点击方法 #

针对Selenium原生点击偶发失效的问题，可使用JS点击降级，直接触发元素点击事件：

# 通用稳定点击方法
def stable_js_click(button_text)
  target_btn = find(:button, button_text, disabled: false, wait: 3)
  page.execute_script("arguments[0].click()", target_btn)
end

优化后的测试代码示例 #

# 先等待全局资源加载完成
wait_until { page.execute_script("return document.readyState === 'complete'") }
wait_until { find(:css, '#floatingButton', disabled: false) }
find(:css, '#floatingButton').click

# 等待引导框加载完成
find(:css, 'div.__floater__body', wait: 5)
within(:css, 'div.__floater__body') do
  # STEP 1
  assert page.has_content? 'An event is a date on which a particular test can be taken.', wait: 5
  assert page.has_button? 'Close tour', disabled: false, wait: 3
  assert page.has_button? 'Next', disabled: false, wait: 3

  stable_js_click('Next')

  # STEP 2
  assert page.has_content? 'You can click here to create a new event.', wait: 5
  assert page.has_button? 'Close tour', disabled: false, wait: 3
  assert page.has_button? 'Next', disabled: false, wait: 3
  assert page.has_button? 'Back', disabled: false, wait: 3

  stable_js_click('Next')
end

相关失败场景截图 #

内容的提问来源于stack exchange，提问作者Kabir Pathak