JavaScrip基礎知識 & JS元素定位

如我們在web自動化測試過程中，我們總會進行元素定位，而元素定位，最終都會轉化為 JavaScrip 代碼，那麼何為JavaScrip代碼呢？怎麼用 JavaScrip 進行元素定位呢，下面來簡單介紹一下。

一、前端界面展示層介紹

      前端，主要分為以下三層：

1）HTML， 結構層，顯示頁面結構内容；
2）CSS， 樣式層，渲染頁面；
3）JavaStrip， 行為層，頁面動态      

二、JavaScrip基礎知識

         如何運作JavaScrip代碼呢，如果隻是想簡單操作的話，可以直接從浏覽器中，按F12，點選console，直接進行JavaScrip腳本編寫。

1、列印
- console.log('lalala')  ==> lalala ，相當于print
- alert('lalala')   ===> 通過彈框的方式，顯示lalala

2、定義變量
- var name = 'lalala' ==> name ===>  lalala   ==> 比較常用
- let name = 'lalanala'  ==> name ===>  lalanala

3、資料類型
- 數字： name = '123'  ==> "123"
- bool: name = 'ture'  ==>  "ture"
- 數組（清單）： name = [1,2,4]  ==> (3)[1, 2, 4]
- 對象 ：name = {'name':'lalalala'}  ==> {name: "lalala"}

4、條件文法：
let age = 18
if (age > 18){
    alert('成年人');
} else if (age == 18){
    alert('成年啦啦啦啦');
} else {
    alert('未成年人，兒童')
}

5、函數定義：
function run(){
    let name = 'lalalana';
    return name;
}
run() ==> lalalana       ==> 函數調用       

三、JS元素定位

1、為什麼要用 JS 進行元素定位

selenium是對一js指令進行封裝，但是隻封裝了部分的js的代碼，
如有些操作無法完成，則可通過js代碼發送指令；      

2、JS 元素定位的簡單流程

通過js進行元素定位的大緻流程如下：

from selenium import webdriver

driver = webdriver.Chrome()
driver.implicity_wait(10)
driver.get('http://www.baidu.com')
js_code = 'return document'   # 編寫js代碼
driver.excute_scrip(js_code)    # 執行js指令      

3、有那些指令是selenium中不存在的呢？

（1）selenium可擷取元素屬性，但是不可設定元素屬性，執行個體如:12306，選擇日期

elem = driver.find_element('xxx','xxxxx')

elem.get_attribute('xxx')   # selenium可擷取元素屬性，但是不可設定元素屬性
elem.set_attribute('xxx')   #selenium無法完成      

from selenium import webdriver
import time

driver = webdriver.Chrome()
driver.implicitly_wait(10)
driver.get('https://www.12306.cn/index/')
time.sleep(2)
# 方法一：通過js語句執行日期選擇

js_code = "let input = document.getElementById('train_date');input.readOnly = false;input.value = '2021-07-22'"  # 進行元素定位，改變readOnly屬性，修改value值

driver.execute_script(js_code)
time.sleep(1)


# # 方法二：通過python和js相混合的方式
elem = driver.find_element('id','train_date')    # 元素定位
time.sleep(2)
js_code = "arguments[0].readOnly = false;arguments[0].value = '2021-07-22'"   # 準備js代碼，arguments[0]表占位，表示elem
time.sleep(2)
driver.execute_script(js_code,elem)
           

（2）視窗中的下拉滾動條

scrollTo，滾動到
scrollBy,滾動      

通過js代碼在console操作
window.scrollTo(0,500)  ==> 指定高度，0寬500高
window.scrollTo(0,document.body.scrollHeight)  ==> 滾動到底部
window.scrollTo(0,document.body.scrollHeight / 2)  ==> 滾動到頁面的中間      

elem = driver.find_element('xpath',"//h2[text()='友情連結']")
elem.location_once_scrolled_into_view  # 将于元素移動到可視範圍内

driver.execute_script('arguments[0].scrollIntoView(false)',elem)  # 另一種表示方式
           

總結

JS元素定位，主要是在在selenium無法定位元素的情況下，才會比較常用的，大多數的元素定位，還是可以通過selenium解決的，JS 了解的比較表面，先記錄吧，以便以後友善檢視。

日常雞湯：

誰都不知道下一秒會發生什麼，可能自己越在意的東西，越沒有辦法得到自己想要的，或者可以換種心情，換個方式面對，可能反而會有意外的收獲。