Selenium系列教程-10 如何執行JavaScript方法

系列資源：

• Selenium系列教程-01 環境配置
• Selenium系列教程-02 使用Chrome開發者工具
• Selenium系列教程-03 使用開發者工具進行元素定位
• Selenium系列教程-04 常用的元素定位方法
• Selenium系列教程-05 findElements 方法詳解
• Selenium系列教程-06 圖片上傳以及Web Element常用操作方法
• Selenium系列教程-07 使用Actions類模擬複雜操作
• Selenium系列教程-08 瀏覽器本身行為控制
• Selenium系列教程-09 如何切換iframe
• Selenium系列教程-10 如何執行JavaScript方法

主要內容

• 如何執行JavaScript方法
• 應用場景

如何執行JavaScript方法

在selenium的api中，為我們提供了executeScript() 方法，可在瀏覽器視窗中執行一段JavaScript程式碼。node.js的呼叫如下:

driver.executeScript(function(){
    // javascript 程式碼})
複製程式碼

或者可以用executeAsyncScript方法非同步執行這段指令碼。

應用場景

• 為日期控制元件設定值
  當自動化日期控制元件的時候，如果按照常規的操作，需要通過開發者工具定位到元素，之後呼叫selenium的click()方法進行點選。這種操作在當時的情況下是有效的。但是，過了一段時間，假如到了下個月，我們再次執行自動化程式碼的時候，就會發現功能執行不正常。因為日期更改後，日曆控制元件佈局發生了變化。下面舉例說明，如圖：

  

  這種情況下，原始的自動化操作方式不能滿足我們的需要，因為無法用固定的selector動態定位某個日期的元素。這個時候，最簡單的方法就是使用JavaScript將日期控制元件設定為某個值。以node.js為例，我們可以使用executeScript()方法執行JavaScript程式碼來實現自動化的需求，程式碼如下：

  require('chromedriver')
  
  let { Builder } = require('selenium-webdriver')
  
  const driver = new Builder().forBrowser('chrome').build();
  
  driver.get('https://ant.design/components/date-picker-cn/')
  
  driver.executeScript(function(){
      let date = new Date().toLocaleDateString()
      document.querySelector('.ant-calendar-picker-input.ant-input').value=date
  })
  複製程式碼

• 滾動檢視
  有些時候，我們需要為介面進行截圖操作。頁面如果太長的話，我們的截圖預設擷取的為可視部分，未顯示的部分就會截不到。為了解決這種問題，我們同樣可以執行JavasScript的方法來實現。例如，百度新聞頁面很長，我需要擷取國際新聞的介面，就可以先使用js程式碼將國際新聞板塊滾動到當前檢視中，之後再執行截圖。node.js程式碼如下:

  require('chromedriver');
  
  let { Builder } = require('selenium-webdriver');
  
  const driver = new Builder().forBrowser('chrome').build();
  
  driver.get('https://ant.design/components/date-picker-cn/');
  
  driver.executeScript(function(){
      //呼叫JavaScript檢視滾動方法
      document.querySelector('#guoji').scrollIntoView();
  
  })
  
  driver.takeScreenshot('<your file path>');
  
  複製程式碼

  ---

  獲取更多資訊，可以關注公眾號,也可以加QQ群：707467292 進行node.js自動化相關技術交流。