メインコンテンツにスキップ

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()など）は、単一のオプション引数を取ります。この引数は、シリアライズ可能な値とJSHandleインスタンスの組み合わせにすることができます。ハンドルは、それが表す値に自動的に変換されます。

# 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")