Problem
傳統的網頁資料更新,都是透過刷新整頁方式;隨著javascript的普及化,進步到針對dom node刷新。而資料型態如果為遞增的方式,像jenkins build info或是動作執行過程,很可能為了效能不針對整個node刷新,而採用append的方式。透過瀏覽器所提供的Element檢測器,會看到如下圖情況:
一個pre code底下包含了三個text node,當在Selenium IDE與Chrome Developer Tools中使用以下xpath,由於是找到第一個,所以無法找到任何批配的節點:本篇文章主要告訴你,如果某個節點資料是動態插入的,該如何透過selenium去做assertion。
How to?
以我的測試網頁為例子,要能搜尋到text包含g2的字串,可用以下兩個xpath:
透過index指定位置:
//pre[contains(text()[2],'g2')]
先列出所有text()項目再給予條件:
//pre[text()[contains(.,'g2')]]
但在動態生成的網頁中,很難直接指定index去做assertion。綜合這兩個做法,並試驗一些可能可用的keyword,如下:
除了第二個是我們原先問題會錯之外,其餘的都能正常找到指定項目。所以目前有兩個解法:
- text()優先的xpath。
- 使用Wait Until Element Contain與Element Should Contain: 通常適用於node有好辨別的特徵,如id。
測試網頁
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(document).ready(function(){ $("#gg").append('g1'); $("#gg").append('g2'); $("#gg").append('g3'); }); </script> </head> <body> <pre id='gg'></pre> </body> </html>
留言
張貼留言