Skip to main content

執行 JavaScript

簡介​

Playwright 腳本在你的 Playwright 環境中執行。你的頁面程式碼在瀏覽器頁面環境中執行。這些環境不會交叉，它們在不同的虛擬機器中執行，在不同的程序中，甚至可能在不同的電腦上。

page.evaluate() API 可以在網頁的上下文中執行 JavaScript 函式並將結果帶回 Playwright 環境。像 window 和 document 這樣的瀏覽器全域變數可以在 evaluate 中使用。

href = page.evaluate('() => document.location.href')

如果結果是 Promise 或如果函式是非同步的，evaluate 將自動等待直到它被解析:

status = page.evaluate("""async () => {
  response = await fetch(location.href)
  return response.status
}""")

不同的環境​

在瀏覽器環境中執行的腳本會被評估，而您的測試則在測試環境中執行。這意味著您無法在頁面中使用來自測試的變數，反之亦然。相反，您應該將它們明確地作為參數傳遞。

以下的程式碼片段是錯誤的，因為它直接使用了變數:

data = "some data"
result = page.evaluate("""() => {
  // WRONG: there is no "data" in the web page.
  window.myApp.use(data)
}""")

以下程式碼片段是正確的，因為它明確地將值作為參數傳遞:

data = "some data"
# Pass |data| as a parameter.
result = page.evaluate("""data => {
  window.myApp.use(data)
}""", data)

評估參數​

Playwright 評估方法如 page.evaluate() 接受一個可選的參數。此參數可以是 Serializable 值和 JSHandle 實例的混合。控制代碼 (Handles) 會自動轉換為它們所代表的值。

# A primitive value.
page.evaluate('num => num', 42)

# An array.
page.evaluate('array => array.length', [1, 2, 3])

# An object.
page.evaluate('object => object.foo', { 'foo': 'bar' })

# A single handle.
button = page.evaluate_handle('window.button')
page.evaluate('button => button.textContent', button)

# Alternative notation using JSHandle.evaluate.
button.evaluate('(button, from) => button.textContent.substring(from)', 5)

# Object with multiple handles.
button1 = page.evaluate_handle('window.button1')
button2 = page.evaluate_handle('.button2')
page.evaluate("""o => o.button1.textContent + o.button2.textContent""",
    { 'button1': button1, 'button2': button2 })

# Object destructuring works. Note that property names must match
# between the destructured object and the argument.
# Also note the required parenthesis.
page.evaluate("""
    ({ button1, button2 }) => button1.textContent + button2.textContent""",
    { 'button1': button1, 'button2': button2 })

# Array works as well. Arbitrary names can be used for destructuring.
# Note the required parenthesis.
page.evaluate("""
    ([b1, b2]) => b1.textContent + b2.textContent""",
    [button1, button2])

# Any mix of serializables and handles works.
page.evaluate("""
    x => x.button1.textContent + x.list[0].textContent + String(x.foo)""",
    { 'button1': button1, 'list': [button2], 'foo': None })

初始化腳本​

有時在頁面開始載入之前評估一些內容是很方便的。例如，你可能想要設定一些模擬或測試資料。

在這種情況下，使用 page.add_init_script() 或 browser_context.add_init_script()。在下面的範例中，我們將用一個常數值替換 Math.random()。

首先，建立一個 preload.js 檔案，其中包含模擬。

// preload.js
Math.random = () => 42;

接下來，將初始化腳本添加到頁面。

# In your test, assuming the "preload.js" file is in the "mocks" directory.
page.add_init_script(path="mocks/preload.js")