[Selenium自动化测试实战] 如何可视化验证元素的定位

问题

在进行Web UI的自动化测试过程中，除了例如点击和拖拽某个元素产生的界面反馈，测试工程师在浏览器的窗口中是很难看到正在被操作的元素的。但是在一些场景下工程师可能会需要观察哪个元素正在被操作。

解决方案

要让元素能够被测试工程师的肉眼观察到，最简单的办法的就是改变元素的样式，例如让元素出现高亮的效果。那么，如何通过selenium来实现这个改变呢？
Selenium::WebDriver类有一个方法execute_script，可以在自动化脚本的运行过程中执行简单的JS脚本，实现我们的目的。

实例

# coding: utf-8
require 'selenium-webdriver'

def highlight(element, duration = 3)

  # 保留元素原有的style，以待方法执行完成后恢复
  original_style = element.attribute("style")

  # 给元素加一个红色的虚线边界
  $driver.execute_script(
    "arguments[0].setAttribute(arguments[1], arguments[2])",
    element,
    "style",
    "border: 2px solid red; border-style: dashed;")

  # 让元素的边界保留一段时间再恢复
  if duration > 0
    sleep duration
    $driver.execute_script(
      "arguments[0].setAttribute(arguments[1], arguments[2])",
      element,
      "style",
      original_style)
  end
end

begin
    $driver = Selenium::WebDriver.for :firefox
    $driver.get 'https://www.jianshu.com'
    highlight $driver.find_element(xpath: "//a[@class='logo']")
ensure
    $driver.quit
end

总结

Selenium::WebDriver类的方法execute_script在实际使用中是一个很重要的方法，可以通过这个方法实现很多高级的功能。