差異處

這裏顯示兩個版本的差異處。

--- rf:rf:howtoassertmultipletextnode [2016/07/08 10:55]
tony 建立
+++ rf:rf:howtoassertmultipletextnode [2023/06/25 09:48] (目前版本)
@@ 行 2: / 行 2: @@
 ====== How to assert multiple text node? ======
 ===== Problem =====
+傳統的網頁資料更新，都是透過刷新整頁方式；隨著javascript的普及化，進步到針對dom node刷新。而資料型態如果為遞增的方式，像jenkins build info或是動作執行過程，很可能為了效能不針對整個node刷新，而採用append的方式。透過瀏覽器所提供的Element檢測器，會看到如下圖情況:\\
+{{:rf:rf:rf_pre_node_with_mutiple_text.png|}}\\
+\\
+一個pre code底下包含了三個text node，當在Selenium IDE與Chrome Developer Tools中使用以下xpath，由於是找到第一個，所以無法找到任何批配的節點:\\
+{{:rf:rf:rf_pre_node_with_mutiple_text_seleniumide.png|}}\\
+\\
+本篇文章主要告訴你，如果某個節點資料是動態插入的，該如何透過selenium去做assertion。
 ===== How to? =====
+以我的測試網頁為例子，要能搜尋到text包含g2的字串，可用以下兩個xpath:\\
+\\
+透過index指定位置:
+<code>
+//pre[contains(text()[2],'g2')]
+</code>
+先列出所有text()項目再給予條件:
+<code>
+//pre[text()[contains(.,'g2')]]
+</code>
+但在動態生成的網頁中，很難直接指定index去做assertion。綜合這兩個做法，並試驗一些可能可用的keyword，如下:\\
+{{:rf:rf:rf_test_multiple_text_codes_testcase.png|}}\\
+除了第二個是我們原先問題會錯之外，其餘的都能正常找到指定項目。所以目前有兩個解法:
+  - text()優先的xpath: 參考上圖4。
+  - 使用Wait Until Element Contain與Element Should Contain: 通常適用於node有好辨別的特徵，如id，參考上圖5與6。
+===== 測試網頁 =====
+<code html>
+<!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>
+</code>
 ===== Reference =====
   * [[http://stackoverflow.com/questions/5033955/xpath-select-text-node|Stackoverflow - Xpath to select text node]]