控制代碼
簡介
Playwright 可以建立頁面 DOM 元素或頁面內任何其他物件的控制代碼。這些控制代碼存在於 Playwright 程序中,而實際物件存在於瀏覽器中。有兩種類型的控制代碼:
- JSHandle 用於參考頁面中的任何 JavaScript 物件
- ElementHandle 用於參考頁面中的 DOM 元素,它具有額外的方法,允許對元素執行動作和斷言其屬性。
由於頁面中的任何 DOM 元素也是 JavaScript 物件,因此任何 ElementHandle 也是 JSHandle。
控制代碼用於對頁面中的實際物件執行操作。您可以對控制代碼進行求值、取得控制代碼屬性、將控制代碼作為求值參數傳遞、將頁面物件序列化為 JSON 等。請參閱 JSHandle 類別 API 以了解這些方法。
API 參考
以下是取得 JSHandle 的最簡單方法。
JSHandle jsHandle = page.evaluateHandle("window");
// 使用 jsHandle 進行求值
元素控制代碼
不建議使用 ElementHandle,請改用 Locator 物件和網頁優先斷言。
當需要 ElementHandle 時,建議使用 Page.waitForSelector()
或 Frame.waitForSelector()
方法來取得它。這些 API 會等待元素附加且可見。
// 取得元素控制代碼
JSHandle jsHandle = page.waitForSelector("#box");
ElementHandle elementHandle = jsHandle.asElement();
// 斷言元素的邊界框
BoundingBox boundingBox = elementHandle.boundingBox();
assertEquals(100, boundingBox.width);
// 斷言元素的屬性
String classNames = elementHandle.getAttribute("class");
assertTrue(classNames.contains("highlighted"));
控制代碼作為參數
控制代碼可以傳遞到 Page.evaluate()
和類似的方法中。以下程式碼片段在頁面中建立一個新陣列,用資料初始化它,並將該陣列的控制代碼返回到 Playwright。然後在後續的求值中使用該控制代碼:
// 在頁面中建立新陣列
JSHandle myArrayHandle = page.evaluateHandle("() => {\n" +
" window.myArray = [1];\n" +
" return myArray;\n" +
"}");
// 取得陣列的長度
int length = (int) page.evaluate("a => a.length", myArrayHandle);
// 使用控制代碼向陣列新增一個元素
Map<String, Object> arg = new HashMap<>();
arg.put("myArray", myArrayHandle);
arg.put("newElement", 2);
page.evaluate("arg => arg.myArray.add(arg.newElement)", arg);
// 當不再需要物件時釋放它
myArrayHandle.dispose();
控制代碼生命週期
控制代碼可以使用頁面方法(如 Page.evaluateHandle()
、Page.querySelector()
或 Page.querySelectorAll()
)或其框架對應方法(Frame.evaluateHandle()
、Frame.querySelector()
或 Frame.querySelectorAll()
)取得。一旦建立,控制代碼將保留物件不被垃圾回收,除非頁面導航或通過 JSHandle.dispose()
方法手動處置控制代碼。
API 參考
- JSHandle
- ElementHandle
ElementHandle.boundingBox()
ElementHandle.getAttribute()
ElementHandle.innerText()
ElementHandle.innerHTML()
ElementHandle.textContent()
JSHandle.evaluate()
Page.evaluateHandle()
Page.querySelector()
Page.querySelectorAll()
定位器與元素控制代碼的比較
我們只建議在需要對靜態頁面執行大量 DOM 遍歷的罕見情況下使用 ElementHandle。對於所有使用者動作和斷言,請改用定位器。
Locator 和 ElementHandle 的區別在於,後者指向特定元素,而定位器捕獲如何檢索該元素的邏輯。
在下面的範例中,控制代碼指向頁面上的特定 DOM 元素。如果該元素更改文字或被 React 用來呈現完全不同的元件,控制代碼仍然指向那個非常過時的 DOM 元素。這可能導致意外的行為。
ElementHandle handle = page.querySelector("text=Submit");
handle.hover();
handle.click();
使用定位器時,每次使用定位器時,都會使用選擇器在頁面中定位最新的 DOM 元素。因此在下面的程式碼片段中,底層 DOM 元素將被定位兩次。
Locator locator = page.getByText("Submit");
locator.hover();
locator.click();