問題

在進行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在實際使用中是一個很重要的方法，可以通過這個方法實現很多高階的功能。