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

JavaScript の評価

導入​

PlaywrightスクリプトはPlaywright環境で実行されます。ページスクリプトはブラウザページ環境で実行されます。これらの環境は交差せず、異なる仮想マシン、異なるプロセス、場合によっては異なるコンピュータ上で動作します。

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

const href = await page.evaluate(() => document.location.href);

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

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

異なる環境​

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

次のスニペットは、変数を直接使用しているため誤りです。

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

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

const data = 'some data';
// Pass |data| as a parameter.
const result = await page.evaluate(data => {
  window.myApp.use(data);
}, data);

評価引数​

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

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

// An array.
await page.evaluate(array => array.length, [1, 2, 3]);

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

// A single handle.
const button = await page.evaluateHandle('window.button');
await page.evaluate(button => button.textContent, button);

// Alternative notation using JSHandle.evaluate.
await button.evaluate((button, from) => button.textContent.substring(from), 5);

// Object with multiple handles.
const button1 = await page.evaluateHandle('window.button1');
const button2 = await page.evaluateHandle('window.button2');
await page.evaluate(
    o => o.button1.textContent + o.button2.textContent,
    { button1, button2 });

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

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

// Any mix of serializables and handles works.
await page.evaluate(
    x => x.button1.textContent + x.list[0].textContent + String(x.foo),
    { button1, list: [button2], foo: null });

初期化スクリプト​

ページが読み込まれる前に何かを評価することが便利な場合があります。たとえば、モックやテストデータを設定したい場合などです。

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

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

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

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

import { test, expect } from '@playwright/test';
import path from 'path';

test.beforeEach(async ({ page }) => {
  // Add script for every test in the beforeEach hook.
  // Make sure to correctly resolve the script path.
  await page.addInitScript({ path: path.resolve(__dirname, '../mocks/preload.js') });
});

あるいは、プリロードスクリプトファイルを作成する代わりに、関数を渡すこともできます。これは、短いスクリプトや一度限りのスクリプトに便利です。この方法で引数を渡すこともできます。

import { test, expect } from '@playwright/test';

// Add script for every test in the beforeEach hook.
test.beforeEach(async ({ page }) => {
  const value = 42;
  await page.addInitScript(value => {
    Math.random = () => value;
  }, value);
});