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自動化相關技術交流。