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

JavaScriptの評価

はじめに​

PlaywrightスクリプトはPlaywright環境で実行されます。ページスクリプトはブラウザのページ環境で実行されます。これらの環境は互いに交差せず、異なるプロセス内の異なる仮想マシンで、さらには異なるコンピューターで実行される可能性があります。

Page.evaluate() APIは、WebページのコンテキストでJavaScript関数を実行し、結果をPlaywright環境に返すことができます。`window`や`document`のようなブラウザのグローバル変数は`evaluate`で使用できます。

String href = (String) page.evaluate("document.location.href");

結果がPromiseである場合、または関数が非同期である場合、evaluateは解決されるまで自動的に待機します

int status = (int) page.evaluate("async () => {\n" +
  "  const response = await fetch(location.href);\n" +
  "  return response.status;\n" +
  "}");

異なる環境​

評価されたスクリプトはブラウザ環境で実行され、テストはテスト環境で実行されます。これは、テストの変数をページで使用できないことを意味し、その逆も同様です。代わりに、引数として明示的に渡す必要があります。

以下のスニペットは変数を直接使用しているため間違いです。

String data = "some data";
Object result = page.evaluate("() => {\n" +
  "  // WRONG: there is no 'data' in the web page.\n" +
  "  window.myApp.use(data);\n" +
  "}");

以下のスニペットは値を引数として明示的に渡しているため正しいです。

String data = "some data";
// Pass |data| as a parameter.
Object result = page.evaluate("data => {\n" +
  "  window.myApp.use(data);\n" +
  "}", data);

評価引数​

PlaywrightのPage.evaluate()のような評価メソッドは、単一のオプション引数を取ります。この引数には、シリアライズ可能な値とJSHandleインスタンスを混在させることができます。ハンドルは、それらが表す値に自動的に変換されます。

// A primitive value.
page.evaluate("num => num", 42);

// An array.
page.evaluate("array => array.length", Arrays.asList(1, 2, 3));

// An object.
Map<String, Object> obj = new HashMap<>();
obj.put("foo", "bar");
page.evaluate("object => object.foo", obj);

// A single handle.
ElementHandle button = page.evaluateHandle("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.
ElementHandle button1 = page.evaluateHandle("window.button1");
ElementHandle button2 = page.evaluateHandle("window.button2");
Map<String, ElementHandle> arg = new HashMap<>();
arg.put("button1", button1);
arg.put("button2", button2);
page.evaluate("o => o.button1.textContent + o.button2.textContent", arg);

// Object destructuring works. Note that property names must match
// between the destructured object and the argument.
// Also note the required parenthesis.
Map<String, ElementHandle> arg = new HashMap<>();
arg.put("button1", button1);
arg.put("button2", button2);
page.evaluate("({ button1, button2 }) => button1.textContent + button2.textContent", arg);

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

// Any mix of serializables and handles works.
Map<String, Object> arg = new HashMap<>();
arg.put("button1", button1);
arg.put("list", Arrays.asList(button2));
arg.put("foo", 0);
page.evaluate(
  "x => x.button1.textContent + x.list[0].textContent + String(x.foo)",
  arg);

初期化スクリプト​

ページがロードを開始する前に何かを評価すると便利な場合があります。たとえば、いくつかのモックやテストデータを設定したい場合などです。

この場合、Page.addInitScript()またはBrowserContext.addInitScript()を使用します。以下の例では、`Math.random()`を定数値に置き換えます。

まず、モックを含む`preload.js`ファイルを作成します。

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

次に、ページに初期化スクリプトを追加します。

// In your test, assuming the "preload.js" file is in the "mocks" directory.
page.addInitScript(Paths.get("mocks/preload.js"));