web 自動化遇到 shadowDOM 節點你會操做嗎？

本文轉載自： http://www.lemfix.com/topics/971

 

近期有同窗在作web自動化的時候，發現頁面上有些元素，在selenium中沒法經過xpath來定位，各類緣由找了半天，都沒找到解決方案，最後發現元素在一個叫作shadow-root的節點下面,以下所示：

 

 

問題：shadow-root是什麼？爲何下面的節點在selenium沒法經過xapth來定位？

 

接下來咱們來先了解一下shawod-root到究竟是什麼！

 

 

1、shadowDOM介紹

​ 上面所看到的shadow-root標籤其實就是一個shadowDOM，那麼什麼是shadowDOM呢？

它是前端的一種頁面封裝技術，您能夠將shadow DOM視爲「DOM中的DOM」（能夠當作一個隱藏的DOM）。

它是一個獨立的DOM樹，具備本身的元素和樣式，與原始文檔DOM徹底隔離。

ShadowDOM 必須附在一個HTML元素中，存放shadowDOM的元素，咱們能夠把它稱爲宿主元素。

在HTML5中有不少的標籤樣式都是經過shadowDOM來實現的，好比：日期選擇框，音頻播放標籤，視頻播放標籤都自帶了樣式；

這邊以音頻播放標籤audio爲例：在html文件中寫入一個audio標籤，頁面上顯示出來的內容就會出現一個音頻播放器，以下圖：

<audio src="file/123.mp3" controls="controls"></audio>

頁面效果：

 

 

 

咱們沒有給aduio標籤作任何的css樣式設置，那麼上面播放器樣式是怎麼實現的呢？

答案就是瀏覽器在解析audio標籤的時候，會自動在audio下添加一個shadowDOM（這個播放器的樣式都是在這裏設置的），而audio就是這個shadowDOM的宿主標籤，shadowDOM中封裝好了全部內容和樣式，只要定義一個宿主標籤就能顯示shadowDOM中的全部內容。

咱們按F12打開瀏覽器的調試工具，點擊audio標籤，就能看到以下信息：

 

 

 

注意：須要調試工具中勾選顯示瀏覽器設置的shadowDOM節點，看能看到如上信息（默認看不到瀏覽器的shadowDOM），以下：

 

 

 

經過上面的案例咱們大體的瞭解了一下shadowDOM的做用，它其實就是瀏覽器提供的一種「封裝」功能，提供了一種強大的技術去隱藏一些實現細節，前面列舉的幾個html5中的元素就是這樣來作的。如今有部分項目的前端頁面，開發人員也使用了這一技術來進行封裝，固然本身封裝的shadowDOM，在使用F12調試工具打開的時候，是能夠清楚的的看到內部的節點和樣式和代碼的。

​ 這種封裝對於前端開發來講雖好，可是咱們測試人員在作web自動給的時候就會遇到一些問題，shadowDOM中的標籤沒法定位。ShadowDom 是遊離在 DOM 樹以外的節點樹，可是他的建立基於普通 DOM 元素（並不文檔的DOM樹），全部沒有辦法基於整個文檔的DOM樹來直接進行操做。

 

 

2、shawomDOM中的節點操做

​ 關於shawomDOM中的節點，selenium中並無提供相關操做的方法，咱們要操做的話就只能經過JS代碼來實現，接下來給你們演示一個案例：

需求：修改 shawom-root下span標籤中的元素內容爲 666

 

 

 

實現步驟：

一、先定位到shadow-root的宿主節點(此處爲id=box的div)

二、切換到shadow-root中

三、而後再選擇shadow-root下的span標籤

 

難點：selenuim中只能選擇到宿主標籤，沒法選擇到shadow-root

解決思路：JS來實現

 

一、js實現代碼以下:

 

 

 

二、selenium中經過js實現代碼以下：

1 import time
2 from selenium import webdriver
3 driver = webdriver.Chrome()
4 driver.get(url="http:127.0.0.1:5000/test")
5 js = 'document.getElementById("box").shadowRoot.children[0].children[0].innerText=666'
6 res = driver.execute_script(js)