Page

Page は、Browser 内の単一のタブ、または Chromium の拡張機能のバックグラウンドページを操作するためのメソッドを提供します。1 つの Browser インスタンスは、複数の Page インスタンスを持つことができます。

この例では、ページを作成し、URL にナビゲートし、スクリーンショットを保存します。

const { webkit } = require('playwright');  // Or 'chromium' or 'firefox'.

(async () => {
  const browser = await webkit.launch();
  const context = await browser.newContext();
  const page = await context.newPage();
  await page.goto('https://example.com');
  await page.screenshot({ path: 'screenshot.png' });
  await browser.close();
})();

Page クラスは、Node.js ネイティブの EventEmitter メソッド (on、once、removeListener など) を使用して処理できるさまざまなイベント (下記で説明) を発行します。

この例では、単一のページの load イベントのメッセージをログに記録します。

page.once('load', () => console.log('Page loaded!'));

イベントの登録を解除するには、removeListener メソッドを使用します。

function logRequest(interceptedRequest) {
  console.log('A request was made:', interceptedRequest.url());
}
page.on('request', logRequest);
// Sometime later...
page.removeListener('request', logRequest);

メソッド

addInitScript

v1.9 で追加

page.addInitScript

次のいずれかのシナリオで評価されるスクリプトを追加します。

ページがナビゲートされるたび。
子フレームがアタッチまたはナビゲートされるたび。この場合、スクリプトは新しくアタッチされたフレームのコンテキストで評価されます。

スクリプトは、ドキュメントが作成された後、そのスクリプトが実行される前に評価されます。これは、JavaScript 環境を修正する (例: Math.random をシードする) のに役立ちます。

使用法

ページ読み込み前に Math.random をオーバーライドする例

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

// In your playwright script, assuming the preload.js file is in same directory
await page.addInitScript({ path: './preload.js' });

await page.addInitScript(mock => {
  window.mock = mock;
}, mock);

注

browserContext.addInitScript() および page.addInitScript() を介してインストールされた複数のスクリプトの評価順序は定義されていません。

引数

script function | string | Object #
- path string (オプション)
  
  JavaScript ファイルへのパス。path が相対パスの場合、現在の作業ディレクトリからの相対パスとして解決されます。省略可能。
- content string (オプション)
  
  生のスクリプトコンテンツ。省略可能。
ページで評価されるスクリプト。
arg Serializable (オプション)#

script に渡すオプションの引数 (関数を渡す場合にのみサポートされます)。

戻り値

Promise<void>#

addLocatorHandler

追加: v1.42

page.addLocatorHandler

Web ページをテストする場合、「サインアップ」ダイアログのような予期しないオーバーレイが表示され、自動化したいアクション (ボタンのクリックなど) をブロックすることがあります。これらのオーバーレイは、常に同じように、または同時に表示されるとは限らないため、自動テストで処理するのが難しい場合があります。

このメソッドを使用すると、オーバーレイが可視であることを検出したときにアクティブになる特別な関数 (ハンドラー) を設定できます。ハンドラーの役割は、オーバーレイを削除し、オーバーレイが存在しなかったかのようにテストを続行できるようにすることです。

留意すべき点

オーバーレイが予測可能に表示される場合、page.addLocatorHandler() を使用する代わりに、通常のテストフローの一部として、テストで明示的にオーバーレイを待機して非表示にすることをお勧めします。
Playwright は、アクション可能性チェックが必要なアクションを実行または再試行するたび、または自動待機アサーションチェックを実行する前に、オーバーレイをチェックします。オーバーレイが可視の場合、Playwright は最初にハンドラーを呼び出し、次にアクション/アサーションを続行します。ハンドラーは、アクション/アサーションを実行した場合にのみ呼び出されることに注意してください。オーバーレイが可視になってもアクションを実行しない場合、ハンドラーはトリガーされません。
ハンドラーの実行後、Playwright は、ハンドラーをトリガーしたオーバーレイがもう可視ではないことを確認します。noWaitAfter を使用すると、この動作をオプトアウトできます。
ハンドラーの実行時間は、ハンドラーを実行したアクション/アサーションのタイムアウトにカウントされます。ハンドラーに時間がかかりすぎると、タイムアウトが発生する可能性があります。
複数のハンドラーを登録できます。ただし、一度に実行されるハンドラーは 1 つだけです。ハンドラー内のアクションが別のハンドラーに依存しないようにしてください。

警告

ハンドラーを実行すると、テスト中にページの状態が変更されます。たとえば、現在フォーカスされている要素が変更され、マウスが移動します。ハンドラーの後に実行されるアクションが自己完結型であり、フォーカスとマウスの状態が変更されていないことに依存しないようにしてください。

たとえば、locator.focus() の後に keyboard.press() を呼び出すテストを考えてみましょう。ハンドラーがこれら 2 つのアクションの間にボタンをクリックした場合、フォーカスされている要素はおそらく間違っており、キー押下が予期しない要素で発生します。この問題を回避するには、代わりに locator.press() を使用してください。

別の例は、mouse.move() の後に mouse.down() が続く一連のマウスアクションです。ここでも、ハンドラーがこれら 2 つのアクションの間に実行されると、マウスダウン中にマウスの位置が間違っています。ハンドラーによって状態が変更されないことに依存しない locator.click() のような自己完結型のアクションを優先してください。

使用法

表示されたときに「ニュースレターにサインアップ」ダイアログを閉じる例

// Setup the handler.
await page.addLocatorHandler(page.getByText('Sign up to the newsletter'), async () => {
  await page.getByRole('button', { name: 'No thanks' }).click();
});

// Write the test as usual.
await page.goto('https://example.com');
await page.getByRole('button', { name: 'Start here' }).click();

「セキュリティの詳細を確認してください」ページが表示されたときにスキップする例

// Setup the handler.
await page.addLocatorHandler(page.getByText('Confirm your security details'), async () => {
  await page.getByRole('button', { name: 'Remind me later' }).click();
});

// Write the test as usual.
await page.goto('https://example.com');
await page.getByRole('button', { name: 'Start here' }).click();

すべてのアクション可能性チェックでカスタムコールバックを使用する例。常に可視である <body> ロケーターを使用するため、ハンドラーはすべてのアクション可能性チェックの前に呼び出されます。ハンドラーが <body> 要素を非表示にしないため、noWaitAfter を指定することが重要です。

// Setup the handler.
await page.addLocatorHandler(page.locator('body'), async () => {
  await page.evaluate(() => window.removeObstructionsForTestIfNeeded());
}, { noWaitAfter: true });

// Write the test as usual.
await page.goto('https://example.com');
await page.getByRole('button', { name: 'Start here' }).click();

ハンドラーは、元のロケーターを引数として取ります。times を設定することで、呼び出し回数後にハンドラーを自動的に削除することもできます。

await page.addLocatorHandler(page.getByLabel('Close'), async locator => {
  await locator.click();
}, { times: 1 });

引数

locator Locator #

ハンドラーをトリガーするロケーター。
handler function(Locator):Promise<Object>#

locator が表示されたら実行される関数。この関数は、クリックなどのアクションをブロックする要素を削除する必要があります。
options Object (オプション)
- noWaitAfter boolean (オプション)追加: v1.44#
  
  デフォルトでは、ハンドラーの呼び出し後、Playwright はオーバーレイが非表示になるまで待機し、その後でのみ、Playwright はハンドラーをトリガーしたアクション/アサーションを続行します。このオプションを使用すると、この動作をオプトアウトして、ハンドラーの実行後もオーバーレイを表示したままにすることができます。
- times number (オプション)追加: v1.44#
  
  このハンドラーを呼び出す最大回数を指定します。デフォルトでは無制限です。

戻り値

Promise<void>#

addScriptTag

v1.9 で追加

page.addScriptTag

目的の URL またはコンテンツで <script> タグをページに追加します。スクリプトの onload が発生したとき、またはスクリプトコンテンツがフレームに挿入されたときに、追加されたタグを返します。

使用法

await page.addScriptTag();
await page.addScriptTag(options);

引数

options Object (オプション)
- content string (オプション)#
  
  フレームに挿入される生の JavaScript コンテンツ。
- path string (オプション)#
  
  フレームに挿入される JavaScript ファイルへのパス。path が相対パスの場合、現在の作業ディレクトリからの相対パスとして解決されます。
- type string (オプション)#
  
  スクリプトタイプ。JavaScript ES6 モジュールをロードするには、「module」を使用します。詳細については、script を参照してください。
- url string (オプション)#
  
  追加するスクリプトの URL。

戻り値

Promise<ElementHandle>#

addStyleTag

v1.9 で追加

page.addStyleTag

目的の URL を持つ <link rel="stylesheet"> タグ、またはコンテンツを持つ <style type="text/css"> タグをページに追加します。スタイルシートの onload が発生したとき、または CSS コンテンツがフレームに挿入されたときに、追加されたタグを返します。

使用法

await page.addStyleTag();
await page.addStyleTag(options);

引数

options Object (オプション)
- content string (オプション)#
  
  フレームに挿入される生の CSS コンテンツ。
- path string (オプション)#
  
  フレームに挿入される CSS ファイルへのパス。path が相対パスの場合、現在の作業ディレクトリからの相対パスとして解決されます。
- url string (オプション)#
  
  <link> タグの URL。

戻り値

Promise<ElementHandle>#

bringToFront

v1.9 で追加

page.bringToFront

ページを前面に表示します (タブをアクティブにします)。

使用法

await page.bringToFront();

戻り値

Promise<void>#

close

v1.9 で追加

page.close

runBeforeUnload が false の場合、アンロードハンドラーを実行せず、ページが閉じるのを待ちます。runBeforeUnload が true の場合、メソッドはアンロードハンドラーを実行しますが、ページが閉じるのを待機しません。

デフォルトでは、page.close() は beforeunload ハンドラーを実行しません。

注

runBeforeUnload が true として渡された場合、beforeunload ダイアログが呼び出される可能性があり、page.on('dialog') イベントを介して手動で処理する必要があります。

使用法

await page.close();
await page.close(options);

引数

options Object (オプション)
- reason string (オプション)追加: v1.40#
  
  ページを閉じることによって中断された操作に報告される理由。
- runBeforeUnload boolean (オプション)#
  
  デフォルトは false です。before unload ページハンドラーを実行するかどうか。

戻り値

Promise<void>#

content

v1.9 で追加

page.content

doctype を含む、ページの完全な HTML コンテンツを取得します。

使用法

await page.content();

戻り値

Promise<string>#

context

v1.9 で追加

page.context

ページが属するブラウザコンテキストを取得します。

使用法

page.context();

戻り値

BrowserContext #

dragAndDrop

追加: v1.13

page.dragAndDrop

このメソッドは、ソース要素をターゲット要素にドラッグします。最初にソース要素に移動し、mousedown を実行し、次にターゲット要素に移動して mouseup を実行します。

使用法

await page.dragAndDrop('#source', '#target');
// or specify exact positions relative to the top-left corners of the elements:
await page.dragAndDrop('#source', '#target', {
  sourcePosition: { x: 34, y: 7 },
  targetPosition: { x: 10, y: 20 },
});

引数

source string #

ドラッグする要素を検索するためのセレクター。セレクターを満たす要素が複数ある場合は、最初の要素が使用されます。
target string #

ドロップ先の要素を検索するためのセレクター。セレクターを満たす要素が複数ある場合は、最初の要素が使用されます。
options Object (オプション)
- force boolean (オプション)#
  
  アクション可能性チェックをバイパスするかどうか。デフォルトは false です。
- noWaitAfter boolean (オプション)#
  
  非推奨
  このオプションは効果がありません。
  
  このオプションは効果がありません。
- sourcePosition Object (オプション)追加: v1.14#
  - x number
  - y number
  要素のパディングボックスの左上隅を基準としたこの点で、ソース要素をクリックします。指定しない場合、要素の可視点が使用されます。
- strict boolean (オプション)追加: v1.14#
  
  true の場合、この呼び出しでは、セレクターが単一の要素に解決される必要があります。指定されたセレクターが複数の要素に解決される場合、呼び出しは例外をスローします。
- targetPosition Object (オプション)追加: v1.14#
  - x number
  - y number
  要素のパディングボックスの左上隅を基準としたこの点で、ターゲット要素にドロップします。指定しない場合、要素の可視点が使用されます。
- timeout number (オプション)#
  
  最大時間 (ミリ秒単位)。デフォルトは 0 - タイムアウトなし。デフォルト値は、構成の actionTimeout オプションを使用するか、browserContext.setDefaultTimeout() または page.setDefaultTimeout() メソッドを使用して変更できます。
- trial boolean (オプション)#
  
  設定すると、このメソッドはアクション可能性チェックのみを実行し、アクションをスキップします。デフォルトは false です。アクションを実行せずに、要素がアクションの準備ができるまで待機するのに役立ちます。

戻り値

Promise<void>#

emulateMedia

v1.9 で追加

page.emulateMedia

このメソッドは、media 引数を使用して CSS メディアタイプ を変更するか、colorScheme 引数を使用して 'prefers-colors-scheme' メディア機能を変更します。

使用法

await page.evaluate(() => matchMedia('screen').matches);
// → true
await page.evaluate(() => matchMedia('print').matches);
// → false

await page.emulateMedia({ media: 'print' });
await page.evaluate(() => matchMedia('screen').matches);
// → false
await page.evaluate(() => matchMedia('print').matches);
// → true

await page.emulateMedia({});
await page.evaluate(() => matchMedia('screen').matches);
// → true
await page.evaluate(() => matchMedia('print').matches);
// → false

await page.emulateMedia({ colorScheme: 'dark' });
await page.evaluate(() => matchMedia('(prefers-color-scheme: dark)').matches);
// → true
await page.evaluate(() => matchMedia('(prefers-color-scheme: light)').matches);
// → false

引数

options Object (オプション)
- colorScheme null | "light" | "dark" | "no-preference" (オプション)追加: v1.9#
  
  prefers-colors-scheme メディア機能をエミュレートします。サポートされている値は 'light' および 'dark' です。null を渡すと、カラースキームのエミュレーションが無効になります。'no-preference' は非推奨です。
- contrast null | "no-preference" | "more" (オプション)追加: v1.51#
  
  'prefers-contrast' メディア機能をエミュレートします。サポートされている値は 'no-preference'、'more' です。null を渡すと、コントラストのエミュレーションが無効になります。
- forcedColors null | "active" | "none" (オプション)追加: v1.15#
  
  'forced-colors' メディア機能をエミュレートします。サポートされている値は 'active' および 'none' です。null を渡すと、強制カラーのエミュレーションが無効になります。
- media null | "screen" | "print" (オプション)追加: v1.9#
  
  ページの CSS メディアタイプを変更します。許可される値は 'screen'、'print'、null のみです。null を渡すと、CSS メディアエミュレーションが無効になります。
- reducedMotion null | "reduce" | "no-preference" (オプション)追加: v1.12#
  
  'prefers-reduced-motion' メディア機能をエミュレートします。サポートされている値は 'reduce'、'no-preference' です。null を渡すと、モーション削減エミュレーションが無効になります。

戻り値

Promise<void>#

evaluate

v1.9 で追加

page.evaluate

pageFunction 呼び出しの値を返します。

page.evaluate() に渡された関数が Promise を返す場合、page.evaluate() は Promise が解決されるのを待機し、その値を返します。

page.evaluate() に渡された関数が Serializable ではない値を返す場合、page.evaluate() は undefined に解決されます。Playwright は、JSON でシリアル化できない追加の値 (-0、NaN、Infinity、-Infinity) の転送もサポートしています。

使用法

pageFunction に引数を渡す

const result = await page.evaluate(([x, y]) => {
  return Promise.resolve(x * y);
}, [7, 8]);
console.log(result); // prints "56"

関数の代わりに文字列を渡すこともできます。

console.log(await page.evaluate('1 + 2')); // prints "3"
const x = 10;
console.log(await page.evaluate(`1 + ${x}`)); // prints "11"

ElementHandle インスタンスは、page.evaluate() への引数として渡すことができます。

const bodyHandle = await page.evaluate('document.body');
const html = await page.evaluate<string, HTMLElement>(([body, suffix]) =>
  body.innerHTML + suffix, [bodyHandle, 'hello']
);
await bodyHandle.dispose();

引数

pageFunction function | string #

ページコンテキストで評価される関数。
arg EvaluationArgument (オプション)#

pageFunction に渡すオプションの引数。

戻り値

Promise<Serializable>#

evaluateHandle

v1.9 で追加

page.evaluateHandle

pageFunction 呼び出しの値を JSHandle として返します。

page.evaluate() と page.evaluateHandle() の唯一の違いは、page.evaluateHandle() が JSHandle を返すことです。

page.evaluateHandle() に渡された関数が Promise を返す場合、page.evaluateHandle() は Promise が解決されるのを待機し、その値を返します。

使用法

// Handle for the window object.
const aWindowHandle = await page.evaluateHandle(() => Promise.resolve(window));

関数の代わりに文字列を渡すこともできます。

const aHandle = await page.evaluateHandle('document'); // Handle for the 'document'

JSHandle インスタンスは、page.evaluateHandle() への引数として渡すことができます。

const aHandle = await page.evaluateHandle(() => document.body);
const resultHandle = await page.evaluateHandle(body => body.innerHTML, aHandle);
console.log(await resultHandle.jsonValue());
await resultHandle.dispose();

引数

pageFunction function | string #

ページコンテキストで評価される関数。
arg EvaluationArgument (オプション)#

pageFunction に渡すオプションの引数。

戻り値

Promise<JSHandle>#

exposeBinding

v1.9 で追加

page.exposeBinding

このメソッドは、このページのすべてのフレームの window オブジェクトに関数 name を追加します。呼び出されると、関数は callback を実行し、callback の戻り値に解決される Promise を返します。callback が Promise を返す場合、それは await されます。

callback 関数の最初の引数には、呼び出し元に関する情報 ({ browserContext: BrowserContext, page: Page, frame: Frame }) が含まれています。

コンテキスト全体のバージョンについては、browserContext.exposeBinding() を参照してください。

注

page.exposeBinding() を介してインストールされた関数は、ナビゲーション後も存続します。

使用法

ページ URL をページ内のすべてのフレームに公開する例

const { webkit } = require('playwright');  // Or 'chromium' or 'firefox'.

(async () => {
  const browser = await webkit.launch({ headless: false });
  const context = await browser.newContext();
  const page = await context.newPage();
  await page.exposeBinding('pageURL', ({ page }) => page.url());
  await page.setContent(`
    <script>
      async function onClick() {
        document.querySelector('div').textContent = await window.pageURL();
      }
    </script>
    <button onclick="onClick()">Click me</button>
    <div></div>
  `);
  await page.click('button');
})();

引数

name string #

window オブジェクトの関数の名前。
callback function #

Playwright のコンテキストで呼び出されるコールバック関数。
options Object (オプション)
- handle boolean (オプション)#
  
  非推奨
  このオプションは将来削除されます。
  
  引数を値渡しではなくハンドルとして渡すかどうか。ハンドルを渡す場合、1 つの引数のみがサポートされます。値渡しの場合、複数の引数がサポートされます。

戻り値

Promise<void>#

exposeFunction

v1.9 で追加

page.exposeFunction

このメソッドは、ページのすべてのフレームの window オブジェクトに関数 name を追加します。呼び出されると、関数は callback を実行し、callback の戻り値に解決される Promise を返します。

callback が Promise を返す場合、それは await されます。

コンテキスト全体に公開された関数については、browserContext.exposeFunction() を参照してください。

注

page.exposeFunction() を介してインストールされた関数は、ナビゲーション後も存続します。

使用法

ページに sha256 関数を追加する例

const { webkit } = require('playwright');  // Or 'chromium' or 'firefox'.
const crypto = require('crypto');

(async () => {
  const browser = await webkit.launch({ headless: false });
  const page = await browser.newPage();
  await page.exposeFunction('sha256', text =>
    crypto.createHash('sha256').update(text).digest('hex'),
  );
  await page.setContent(`
    <script>
      async function onClick() {
        document.querySelector('div').textContent = await window.sha256('PLAYWRIGHT');
      }
    </script>
    <button onclick="onClick()">Click me</button>
    <div></div>
  `);
  await page.click('button');
})();

引数

name string #

windowオブジェクト上の関数名
callback function #

Playwrightのコンテキストで呼び出されるコールバック関数。

戻り値

Promise<void>#

frame

v1.9 で追加

page.frame

指定された条件に一致するフレームを返します。name または url のいずれかを指定する必要があります。

使用法

const frame = page.frame('frame-name');

const frame = page.frame({ url: /.*domain.*/ });

引数

frameSelector string | Object#
- name string (optional)
  
  iframe の name 属性で指定されたフレーム名。省略可能です。
- url string | RegExp | function(URL):boolean (optional)
  
  グロブパターン、正規表現パターン、またはフレームの url を URL オブジェクトとして受け取る述語。省略可能です。
フレーム名またはその他のフレーム検索オプション。

戻り値

null | Frame #

frameLocator

追加バージョン: v1.17

page.frameLocator

iframe を操作する場合、iframe に入り、その iframe 内の要素を選択できるようにするフレームロケーターを作成できます。

使用法

次のスニペットは、<iframe id="my-frame"> のように、id my-frame を持つ iframe 内のテキスト "Submit" を持つ要素を特定します。

const locator = page.frameLocator('#my-iframe').getByText('Submit');
await locator.click();

引数

selector string #

DOM 要素を解決する際に使用するセレクター。

戻り値

FrameLocator #

frames

v1.9 で追加

page.frames

ページにアタッチされているすべてのフレームの配列。

使用法

page.frames();

戻り値

Array<Frame>#

getByAltText

追加バージョン: v1.27

page.getByAltText

altテキストで要素を特定できます。

使用法

たとえば、このメソッドは alt テキスト "Playwright logo" で画像を検索します。

<img alt='Playwright logo'>

await page.getByAltText('Playwright logo').click();

引数

text string | RegExp #

要素を特定するためのテキスト。
options Object (オプション)
- exact boolean (optional)#
  
  完全一致を検索するかどうか: 大文字と小文字を区別し、文字列全体を比較します。デフォルトは false です。正規表現で検索する場合は無視されます。完全一致でも空白はトリミングされることに注意してください。

戻り値

Locator #

getByLabel

追加バージョン: v1.27

page.getByLabel

関連付けられた <label> 要素または aria-labelledby 要素のテキスト、または aria-label 属性によって入力要素を特定できます。

使用法

たとえば、このメソッドは次の DOM でラベル "Username" および "Password" で入力を検索します。

<input aria-label="Username">
<label for="password-input">Password:</label>
<input id="password-input">

await page.getByLabel('Username').fill('john');
await page.getByLabel('Password').fill('secret');

引数

text string | RegExp #

要素を特定するためのテキスト。
options Object (オプション)
- exact boolean (optional)#
  
  完全一致を検索するかどうか: 大文字と小文字を区別し、文字列全体を比較します。デフォルトは false です。正規表現で検索する場合は無視されます。完全一致でも空白はトリミングされることに注意してください。

戻り値

Locator #

getByPlaceholder

追加バージョン: v1.27

page.getByPlaceholder

プレースホルダーテキストで入力要素を特定できます。

使用法

たとえば、次の DOM 構造を考えてみましょう。

<input type="email" placeholder="name@example.com" />

プレースホルダーテキストで特定した後、入力を入力できます

await page
    .getByPlaceholder('name@example.com')
    .fill('playwright@microsoft.com');

引数

text string | RegExp #

要素を特定するためのテキスト。
options Object (オプション)
- exact boolean (optional)#
  
  完全一致を検索するかどうか: 大文字と小文字を区別し、文字列全体を比較します。デフォルトは false です。正規表現で検索する場合は無視されます。完全一致でも空白はトリミングされることに注意してください。

戻り値

Locator #

getByRole

追加バージョン: v1.27

page.getByRole

要素を ARIA role、ARIA 属性、およびアクセシブルネームで特定できます。

使用法

次の DOM 構造を考えてみましょう。

<h3>Sign up</h3>
<label>
  <input type="checkbox" /> Subscribe
</label>
<br/>
<button>Submit</button>

各要素を暗黙的なロールで特定できます

await expect(page.getByRole('heading', { name: 'Sign up' })).toBeVisible();

await page.getByRole('checkbox', { name: 'Subscribe' }).check();

await page.getByRole('button', { name: /submit/i }).click();

引数

role "alert" | "alertdialog" | "application" | "article" | "banner" | "blockquote" | "button" | "caption" | "cell" | "checkbox" | "code" | "columnheader" | "combobox" | "complementary" | "contentinfo" | "definition" | "deletion" | "dialog" | "directory" | "document" | "emphasis" | "feed" | "figure" | "form" | "generic" | "grid" | "gridcell" | "group" | "heading" | "img" | "insertion" | "link" | "list" | "listbox" | "listitem" | "log" | "main" | "marquee" | "math" | "meter" | "menu" | "menubar" | "menuitem" | "menuitemcheckbox" | "menuitemradio" | "navigation" | "none" | "note" | "option" | "paragraph" | "presentation" | "progressbar" | "radio" | "radiogroup" | "region" | "row" | "rowgroup" | "rowheader" | "scrollbar" | "search" | "searchbox" | "separator" | "slider" | "spinbutton" | "status" | "strong" | "subscript" | "superscript" | "switch" | "tab" | "table" | "tablist" | "tabpanel" | "term" | "textbox" | "time" | "timer" | "toolbar" | "tooltip" | "tree" | "treegrid" | "treeitem"#

必須の aria ロール。
options Object (オプション)
- checked boolean (optional)#
  
  通常、aria-checked またはネイティブ <input type=checkbox> コントロールによって設定される属性。
  
  aria-checked の詳細をご覧ください。
- disabled boolean (optional)#
  
  通常、aria-disabled または disabled によって設定される属性。
  
  注
  他のほとんどの属性とは異なり、disabled は DOM 階層を介して継承されます。aria-disabled の詳細をご覧ください。
- exact boolean (optional)追加バージョン: v1.28#
  
  name が完全に一致するかどうか: 大文字と小文字を区別し、文字列全体を比較します。デフォルトは false です。name が正規表現の場合、無視されます。完全一致でも空白はトリミングされることに注意してください。
- expanded boolean (optional)#
  
  通常、aria-expanded によって設定される属性。
  
  aria-expanded の詳細をご覧ください。
- includeHidden boolean (optional)#
  
  非表示要素を一致させるかどうかを制御するオプション。デフォルトでは、ARIA で定義されている非表示でない要素のみがロールセレクターによって一致されます。
  
  aria-hidden の詳細をご覧ください。
- level number (optional)#
  
  通常、ロール heading、listitem、row、treeitem に存在する数値属性で、<h1>-<h6> 要素のデフォルト値があります。
  
  aria-level の詳細をご覧ください。
- name string | RegExp (optional)#
  
  アクセシブルネームを一致させるためのオプション。デフォルトでは、マッチングは大文字と小文字を区別せず、部分文字列を検索します。exact を使用してこの動作を制御します。
  
  アクセシブルネームの詳細をご覧ください。
- pressed boolean (optional)#
  
  通常、aria-pressed によって設定される属性。
  
  aria-pressed の詳細をご覧ください。
- selected boolean (optional)#
  
  通常、aria-selected によって設定される属性。
  
  aria-selected の詳細をご覧ください。

戻り値

Locator #

詳細

ロールセレクターは、アクセシビリティ監査および適合性テストを置き換えるものではありませんが、ARIA ガイドラインに関する早期フィードバックを提供します。

多くの html 要素には、ロールセレクターによって認識される暗黙的に定義されたロールがあります。サポートされているすべてのロールはこちらにあります。ARIA ガイドラインは、デフォルト値に role および/または aria-* 属性を設定して、暗黙的なロールと属性を複製することを推奨していません。

getByTestId

追加バージョン: v1.27

page.getByTestId

テスト ID で要素を特定します。

使用法

次の DOM 構造を考えてみましょう。

<button data-testid="directions">Itinéraire</button>

要素をテスト ID で特定できます

await page.getByTestId('directions').click();

引数

testId string | RegExp #

要素を特定するための ID。

戻り値

Locator #

詳細

デフォルトでは、data-testid 属性がテスト ID として使用されます。必要に応じて別のテスト ID 属性を設定するには、selectors.setTestIdAttribute() を使用します。

// Set custom test id attribute from @playwright/test config:
import { defineConfig } from '@playwright/test';

export default defineConfig({
  use: {
    testIdAttribute: 'data-pw'
  },
});

getByText

追加バージョン: v1.27

page.getByText

指定されたテキストを含む要素を特定できます。

アクセシブルロールなどの別の条件で一致させ、テキストコンテンツでフィルタリングできる locator.filter() も参照してください。

使用法

次の DOM 構造を考えてみましょう

<div>Hello <span>world</span></div>
<div>Hello</div>

テキストの部分文字列、完全な文字列、または正規表現で特定できます

// Matches <span>
page.getByText('world');

// Matches first <div>
page.getByText('Hello world');

// Matches second <div>
page.getByText('Hello', { exact: true });

// Matches both <div>s
page.getByText(/Hello/);

// Matches second <div>
page.getByText(/^hello$/i);

引数

text string | RegExp #

要素を特定するためのテキスト。
options Object (オプション)
- exact boolean (optional)#
  
  完全一致を検索するかどうか: 大文字と小文字を区別し、文字列全体を比較します。デフォルトは false です。正規表現で検索する場合は無視されます。完全一致でも空白はトリミングされることに注意してください。

戻り値

Locator #

詳細

テキストによるマッチングでは、完全一致の場合でも常に空白が正規化されます。たとえば、複数のスペースを1つにし、改行をスペースに変え、先頭と末尾の空白を無視します。

タイプ button および submit の入力要素は、テキストコンテンツの代わりに value で一致します。たとえば、テキスト "Log in" で特定すると、<input type=button value="Log in"> が一致します。

getByTitle

追加バージョン: v1.27

page.getByTitle

title 属性で要素を特定できます。

使用法

次の DOM 構造を考えてみましょう。

<span title='Issues count'>25 issues</span>

タイトルテキストで特定した後、問題数を確認できます

await expect(page.getByTitle('Issues count')).toHaveText('25 issues');

引数

text string | RegExp #

要素を特定するためのテキスト。
options Object (オプション)
- exact boolean (optional)#
  
  完全一致を検索するかどうか: 大文字と小文字を区別し、文字列全体を比較します。デフォルトは false です。正規表現で検索する場合は無視されます。完全一致でも空白はトリミングされることに注意してください。

戻り値

Locator #

goBack

v1.9 で追加

page.goBack

メインリソースのレスポンスを返します。複数のリダイレクトの場合、ナビゲーションは最後のリダイレクトのレスポンスで解決されます。戻ることができない場合は、null を返します。

履歴の前のページに移動します。

使用法

await page.goBack();
await page.goBack(options);

引数

options Object (オプション)
- timeout number (optional)#
  
  操作の最大時間（ミリ秒単位）。デフォルトは 0 - タイムアウトなし。デフォルト値は、構成の navigationTimeout オプション、または browserContext.setDefaultNavigationTimeout()、browserContext.setDefaultTimeout()、page.setDefaultNavigationTimeout() または page.setDefaultTimeout() メソッドを使用して変更できます。
- waitUntil "load" | "domcontentloaded" | "networkidle" | "commit" (optional)#
  
  操作が成功したと見なすタイミング、デフォルトは load です。イベントは次のいずれかになります
  - 'domcontentloaded' - DOMContentLoaded イベントが発生したときに操作が完了したと見なします。
  - 'load' - load イベントが発生したときに操作が完了したと見なします。
  - 'networkidle' - 非推奨 ネットワーク接続が少なくとも 500 ms なくなったときに操作が完了したと見なします。このメソッドをテストに使用しないでください。代わりに、Web アサーションに依存して準備状態を評価してください。
  - 'commit' - ネットワークレスポンスが受信され、ドキュメントのロードが開始されたときに操作が完了したと見なします。

戻り値

Promise<null | Response>#

goForward

v1.9 で追加

page.goForward

メインリソースのレスポンスを返します。複数のリダイレクトの場合、ナビゲーションは最後のリダイレクトのレスポンスで解決されます。進むことができない場合は、null を返します。

履歴の次のページに移動します。

使用法

await page.goForward();
await page.goForward(options);

引数

options Object (オプション)
- timeout number (optional)#
  
  操作の最大時間（ミリ秒単位）。デフォルトは 0 - タイムアウトなし。デフォルト値は、構成の navigationTimeout オプション、または browserContext.setDefaultNavigationTimeout()、browserContext.setDefaultTimeout()、page.setDefaultNavigationTimeout() または page.setDefaultTimeout() メソッドを使用して変更できます。
- waitUntil "load" | "domcontentloaded" | "networkidle" | "commit" (optional)#
  
  操作が成功したと見なすタイミング、デフォルトは load です。イベントは次のいずれかになります
  - 'domcontentloaded' - DOMContentLoaded イベントが発生したときに操作が完了したと見なします。
  - 'load' - load イベントが発生したときに操作が完了したと見なします。
  - 'networkidle' - 非推奨 ネットワーク接続が少なくとも 500 ms なくなったときに操作が完了したと見なします。このメソッドをテストに使用しないでください。代わりに、Web アサーションに依存して準備状態を評価してください。
  - 'commit' - ネットワークレスポンスが受信され、ドキュメントのロードが開始されたときに操作が完了したと見なします。

戻り値

Promise<null | Response>#

goto

v1.9 で追加

page.goto

メインリソースのレスポンスを返します。複数のリダイレクトの場合、ナビゲーションは最初のリダイレクト以外のレスポンスで解決されます。

このメソッドは、次の場合にエラーをスローします

SSL エラーが発生した場合 (自己署名証明書の場合など)。
ターゲット URL が無効な場合。
timeout がナビゲーション中に超過した場合。
リモートサーバーが応答しないか、到達不能な場合。
メインリソースのロードに失敗した場合。

このメソッドは、リモートサーバーから有効な HTTP ステータスコード (404 "Not Found" や 500 "Internal Server Error" を含む) が返された場合、エラーをスローしません。このようなレスポンスのステータスコードは、response.status() を呼び出すことで取得できます。

注

このメソッドは、エラーをスローするか、メインリソースのレスポンスを返します。唯一の例外は、about:blank へのナビゲーション、またはハッシュが異なる同じ URL へのナビゲーションで、これらは成功し、null を返します。

注

ヘッドレスモードでは、PDF ドキュメントへのナビゲーションはサポートされていません。アップストリームの問題を参照してください。

使用法

await page.goto(url);
await page.goto(url, options);

引数

url string #

ページをナビゲートする URL。URL にはスキーム (https:// など) を含める必要があります。baseURL がコンテキストオプションを介して提供され、渡された URL がパスである場合、new URL() コンストラクターを介してマージされます。
options Object (オプション)
- referer string (optional)#
  
  リファラーヘッダーの値。指定された場合、page.setExtraHTTPHeaders() によって設定されたリファラーヘッダーの値よりも優先されます。
- timeout number (optional)#
  
  操作の最大時間（ミリ秒単位）。デフォルトは 0 - タイムアウトなし。デフォルト値は、構成の navigationTimeout オプション、または browserContext.setDefaultNavigationTimeout()、browserContext.setDefaultTimeout()、page.setDefaultNavigationTimeout() または page.setDefaultTimeout() メソッドを使用して変更できます。
- waitUntil "load" | "domcontentloaded" | "networkidle" | "commit" (optional)#
  
  操作が成功したと見なすタイミング、デフォルトは load です。イベントは次のいずれかになります
  - 'domcontentloaded' - DOMContentLoaded イベントが発生したときに操作が完了したと見なします。
  - 'load' - load イベントが発生したときに操作が完了したと見なします。
  - 'networkidle' - 非推奨 ネットワーク接続が少なくとも 500 ms なくなったときに操作が完了したと見なします。このメソッドをテストに使用しないでください。代わりに、Web アサーションに依存して準備状態を評価してください。
  - 'commit' - ネットワークレスポンスが受信され、ドキュメントのロードが開始されたときに操作が完了したと見なします。

戻り値

Promise<null | Response>#

isClosed

v1.9 で追加

page.isClosed

ページが閉じられたことを示します。

使用法

page.isClosed();

戻り値

boolean #

locator

追加: v1.14

page.locator

このメソッドは、このページ/フレームでアクションを実行するために使用できる要素ロケーターを返します。ロケーターは、アクションを実行する直前に要素に解決されるため、同じロケーターに対する一連のアクションは、実際には異なる DOM 要素で実行される可能性があります。これは、それらのアクション間の DOM 構造が変更された場合に発生します。

ロケーターの詳細はこちら.

使用法

page.locator(selector);
page.locator(selector, options);

引数

selector string #

DOM 要素を解決する際に使用するセレクター。
options Object (オプション)
- has Locator (optional)#
  
  この相対ロケーターに一致する要素を含む結果にメソッドの結果を絞り込みます。たとえば、text=Playwright を持つ article は <article><div>Playwright</div></article> に一致します。
  
  内部ロケーターは、外部ロケーターに対して相対的である必要があります。また、ドキュメントルートではなく、外部ロケーターの一致からクエリが開始されます。たとえば、<article><content><div>Playwright</div></content></article> 内の div を持つ content を検索できます。ただし、article div を持つ content を検索すると失敗します。内部ロケーターは相対的である必要があり、content の外部の要素を使用しないでください。
  
  外部ロケーターと内部ロケーターは同じフレームに属している必要があることに注意してください。内部ロケーターに FrameLocator を含めることはできません。
- hasNot Locator (optional)追加バージョン: v1.33#
  
  内部ロケーターに一致する要素を含まない要素を一致させます。内部ロケーターは外部ロケーターに対してクエリされます。たとえば、div を持たない article は <article><span>Playwright</span></article> に一致します。
  
  外部ロケーターと内部ロケーターは同じフレームに属している必要があることに注意してください。内部ロケーターに FrameLocator を含めることはできません。
- hasNotText string | RegExp (optional)追加バージョン: v1.33#
  
  指定されたテキストを子要素または子孫要素に含んでいない要素を一致させます。string が渡された場合、マッチングは大文字と小文字を区別せず、部分文字列を検索します。
- hasText string | RegExp (optional)#
  
  指定されたテキストを子要素または子孫要素に含んでいる要素を一致させます。string が渡された場合、マッチングは大文字と小文字を区別せず、部分文字列を検索します。たとえば、"Playwright" は <article><div>Playwright</div></article> に一致します。

戻り値

Locator #

mainFrame

v1.9 で追加

page.mainFrame

ページのメインフレーム。ページには、ナビゲーション中に持続するメインフレームがあることが保証されています。

使用法

page.mainFrame();

戻り値

Frame #

opener

v1.9 で追加

page.opener

ポップアップページのオープナーを返し、それ以外の場合は null を返します。オープナーがすでに閉じられている場合は、null を返します。

使用法

await page.opener();

戻り値

Promise<null | Page>#

pause

追加: v1.9

page.pause

スクリプトの実行を一時停止します。Playwright はスクリプトの実行を停止し、ユーザーがページオーバーレイの [再開] ボタンを押すか、DevTools コンソールで playwright.resume() を呼び出すのを待ちます。

ユーザーは、一時停止中にセレクターを検査したり、手動手順を実行したりできます。[再開] をクリックすると、一時停止した場所から元のスクリプトの実行が再開されます。

注

このメソッドでは、Playwright がヘッダーモードで、headless オプションが falsy で起動されている必要があります。

使用法

await page.pause();

戻り値

Promise<void>#

pdf

v1.9 で追加

page.pdf

PDF バッファーを返します。

page.pdf() は、print CSS メディアでページの PDF を生成します。screen メディアで PDF を生成するには、page.pdf() を呼び出す前に page.emulateMedia() を呼び出します

注

デフォルトでは、page.pdf() は印刷用に変更された色で PDF を生成します。-webkit-print-color-adjust プロパティを使用して、正確な色のレンダリングを強制します。

使用法

// Generates a PDF with 'screen' media type.
await page.emulateMedia({ media: 'screen' });
await page.pdf({ path: 'page.pdf' });

width、height、および margin オプションは、単位付きの値を受け入れます。ラベルのない値はピクセルとして扱われます。

いくつかの例

page.pdf({width: 100}) - 幅を 100 ピクセルに設定して印刷します
page.pdf({width: '100px'}) - 幅を 100 ピクセルに設定して印刷します
page.pdf({width: '10cm'}) - 幅を 10 センチメートルに設定して印刷します。

可能なすべての単位は次のとおりです

px - ピクセル
in - インチ
cm - センチメートル
mm - ミリメートル

format オプションは次のとおりです

Letter: 8.5インチ x 11インチ
Legal: 8.5インチ x 14インチ
Tabloid: 11インチ x 17インチ
Ledger: 17インチ x 11インチ
A0: 33.1インチ x 46.8インチ
A1: 23.4インチ x 33.1インチ
A2: 16.54インチ x 23.4インチ
A3: 11.7インチ x 16.54インチ
A4: 8.27インチ x 11.7インチ
A5: 5.83インチ x 8.27インチ
A6: 4.13インチ x 5.83インチ

注

headerTemplate および footerTemplate マークアップには、次の制限があります。> 1. テンプレート内のスクリプトタグは評価されません。 > 2. ページスタイルはテンプレート内では表示されません。

引数

options Object (オプション)
- displayHeaderFooter boolean (オプション)#
  
  ヘッダーとフッターを表示します。デフォルトは false です。
- footerTemplate string (オプション)#
  
  印刷フッターの HTML テンプレート。headerTemplate と同じ形式を使用する必要があります。
- format string (オプション)#
  
  用紙フォーマット。設定した場合、width または height オプションよりも優先されます。デフォルトは 'Letter' です。
- headerTemplate string (オプション)#
  
  印刷ヘッダーの HTML テンプレート。印刷値を注入するために使用される以下のクラスを持つ有効な HTML マークアップである必要があります
  - 'date' フォーマットされた印刷日
  - 'title' ドキュメントタイトル
  - 'url' ドキュメントの場所
  - 'pageNumber' 現在のページ番号
  - 'totalPages' ドキュメント内の総ページ数
- height string | number (オプション)#
  
  用紙の高さ。単位付きの値を受け入れます。
- landscape boolean (オプション)#
  
  用紙の向き。デフォルトは false です。
- margin Object (オプション)#
  - top string | number (オプション)
    
    上マージン。単位付きの値を受け入れます。デフォルトは 0 です。
  - right string | number (オプション)
    
    右マージン。単位付きの値を受け入れます。デフォルトは 0 です。
  - bottom string | number (オプション)
    
    下マージン。単位付きの値を受け入れます。デフォルトは 0 です。
  - left string | number (オプション)
    
    左マージン。単位付きの値を受け入れます。デフォルトは 0 です。
  用紙マージン。デフォルトはなしです。
- outline boolean (オプション)追加: v1.42#
  
  ドキュメントのアウトラインを PDF に埋め込むかどうか。デフォルトは false です。
- pageRanges string (オプション)#
  
  印刷するページ範囲。例：'1-5, 8, 11-13'。デフォルトは空文字列で、すべてのページを印刷することを意味します。
- path string (オプション)#
  
  PDF を保存するファイルパス。path が相対パスの場合、現在の作業ディレクトリからの相対パスとして解決されます。パスが指定されていない場合、PDF はディスクに保存されません。
- preferCSSPageSize boolean (オプション)#
  
  ページで宣言された CSS @page サイズを、width、height、または format オプションで宣言されたものよりも優先します。デフォルトは false で、コンテンツを用紙サイズに合わせて拡大縮小します。
- printBackground boolean (オプション)#
  
  背景グラフィックを印刷します。デフォルトは false です。
- scale number (オプション)#
  
  ウェブページのレンダリングのスケール。デフォルトは 1 です。スケール量は 0.1 から 2 の間である必要があります。
- tagged boolean (オプション)追加: v1.42#
  
  タグ付き（アクセシブル）PDF を生成するかどうか。デフォルトは false です。
- width string | number (オプション)#
  
  用紙の幅。単位付きの値を受け入れます。

戻り値

Promise<Buffer>#

reload

v1.9 で追加

page.reload

このメソッドは、ユーザーがブラウザの更新をトリガーした場合と同じ方法で、現在のページをリロードします。メインリソースのレスポンスを返します。複数のリダイレクトが発生した場合、ナビゲーションは最後のリダイレクトのレスポンスで解決されます。

使用法

await page.reload();
await page.reload(options);

引数

options Object (オプション)
- timeout number (オプション)#
  
  操作の最大時間（ミリ秒単位）。デフォルトは 0 - タイムアウトなし。デフォルト値は、構成の navigationTimeout オプション、または browserContext.setDefaultNavigationTimeout()、browserContext.setDefaultTimeout()、page.setDefaultNavigationTimeout() または page.setDefaultTimeout() メソッドを使用して変更できます。
- waitUntil "load" | "domcontentloaded" | "networkidle" | "commit" (オプション)#
  
  操作が成功したと見なすタイミング、デフォルトは load です。イベントは次のいずれかになります
  - 'domcontentloaded' - DOMContentLoaded イベントが発生したときに操作が完了したと見なします。
  - 'load' - load イベントが発生したときに操作が完了したと見なします。
  - 'networkidle' - 非推奨 ネットワーク接続が少なくとも 500 ms なくなったときに操作が完了したと見なします。このメソッドをテストに使用しないでください。代わりに、Web アサーションに依存して準備状態を評価してください。
  - 'commit' - ネットワークレスポンスが受信され、ドキュメントのロードが開始されたときに操作が完了したと見なします。

戻り値

Promise<null | Response>#

removeAllListeners

追加: v1.47

page.removeAllListeners

指定されたタイプ（またはタイプが指定されていない場合は登録されているすべてのリスナー）のすべてのリスナーを削除します。非同期リスナーが完了するのを待つか、これらのリスナーからの後続のエラーを無視することができます。

使用法

page.on('request', async request => {
  const response = await request.response();
  const body = await response.body();
  console.log(body.byteLength);
});
await page.goto('https://playwright.dokyumento.jp', { waitUntil: 'domcontentloaded' });
// Waits for all the reported 'request' events to resolve.
await page.removeAllListeners('request', { behavior: 'wait' });

引数

type string (オプション)#
options Object (オプション)
- behavior "wait" | "ignoreErrors" | "default" (オプション)#
  
  実行中のリスナーを待つかどうか、およびエラーが発生した場合の対処方法を指定します
  - 'default' - 現在のリスナー呼び出し（存在する場合）が完了するのを待ちません。リスナーが例外をスローした場合、未処理のエラーが発生する可能性があります
  - 'wait' - 現在のリスナー呼び出し（存在する場合）が完了するのを待ちます
  - 'ignoreErrors' - 現在のリスナー呼び出し（存在する場合）が完了するのを待ちません。削除後にリスナーによってスローされたすべてのエラーはサイレントにキャッチされます

戻り値

Promise<void>#

removeLocatorHandler

追加: v1.44

page.removeLocatorHandler

特定のロケーターに対して page.addLocatorHandler() によって追加されたすべてのロケーターハンドラーを削除します。

使用法

await page.removeLocatorHandler(locator);

引数

locator Locator #

page.addLocatorHandler() に渡されたロケーター。

戻り値

Promise<void>#

requestGC

追加: v1.48

page.requestGC

ページにガベージコレクションの実行をリクエストします。到達不能なオブジェクトがすべて収集される保証はないことに注意してください。

これは、メモリリークを検出するのに役立ちます。たとえば、ページにリークしている可能性のある大きなオブジェクト 'suspect' がある場合、WeakRef を使用してリークしていないことを確認できます。

// 1. In your page, save a WeakRef for the "suspect".
await page.evaluate(() => globalThis.suspectWeakRef = new WeakRef(suspect));
// 2. Request garbage collection.
await page.requestGC();
// 3. Check that weak ref does not deref to the original object.
expect(await page.evaluate(() => !globalThis.suspectWeakRef.deref())).toBe(true);

使用法

await page.requestGC();

戻り値

Promise<void>#

route

v1.9 で追加

page.route

ルーティングは、ページによって行われるネットワークリクエストを変更する機能を提供します。

ルーティングが有効になると、URL パターンに一致するすべてのリクエストは、続行、フルフィル、または中止されない限り停止します。

注

レスポンスがリダイレクトの場合、ハンドラーは最初の URL に対してのみ呼び出されます。

注

page.route() は、Service Worker によってインターセプトされたリクエストをインターセプトしません。こちらの issue を参照してください。リクエストインターセプトを使用する場合は、serviceWorkers を 'block' に設定して Service Worker を無効にすることをお勧めします。

注

page.route() は、ポップアップページの最初のリクエストをインターセプトしません。代わりに browserContext.route() を使用してください。

使用法

すべての画像リクエストを中止する単純なハンドラーの例

const page = await browser.newPage();
await page.route('**/*.{png,jpg,jpeg}', route => route.abort());
await page.goto('https://example.com');
await browser.close();

または代わりに正規表現パターンを使用する同じスニペット

const page = await browser.newPage();
await page.route(/(\.png$)|(\.jpg$)/, route => route.abort());
await page.goto('https://example.com');
await browser.close();

リクエストを調べてルートアクションを決定することが可能です。たとえば、一部の POST データを含むすべてのリクエストをモックし、他のすべてのリクエストをそのままにします

await page.route('/api/**', async route => {
  if (route.request().postData().includes('my-string'))
    await route.fulfill({ body: 'mocked-data' });
  else
    await route.continue();
});

リクエストが両方のハンドラーに一致する場合、ページルートはブラウザコンテキストルート（browserContext.route() で設定）よりも優先されます。

ハンドラー付きのルートを削除するには、page.unroute() を使用できます。

注

ルーティングを有効にすると、HTTP キャッシュが無効になります。

引数

url string | RegExp | function(URL):boolean #

ルーティング中に一致させる URL を受け取るグロブパターン、正規表現パターン、または述語。baseURL がコンテキストオプションを介して提供され、渡された URL がパスの場合、new URL() コンストラクターを介してマージされます。
handler function(Route, Request):Promise<Object> | Object #

リクエストをルーティングするハンドラー関数。
options Object (オプション)
- times number (オプション)追加: v1.15#
  
  ルートをどのくらいの頻度で使用する必要があるか。デフォルトでは毎回使用されます。

戻り値

Promise<void>#

routeFromHAR

追加: v1.23

page.routeFromHAR

指定された場合、ページで行われたネットワークリクエストは HAR ファイルから提供されます。HAR からのリプレイの詳細をお読みください。

Playwright は、Service Worker によってインターセプトされたリクエストを HAR ファイルから提供しません。こちらの issue を参照してください。リクエストインターセプトを使用する場合は、serviceWorkers を 'block' に設定して Service Worker を無効にすることをお勧めします。

使用法

await page.routeFromHAR(har);
await page.routeFromHAR(har, options);

引数

har string #

事前記録されたネットワークデータを含む HAR ファイルへのパス。path が相対パスの場合、現在の作業ディレクトリからの相対パスとして解決されます。
options Object (オプション)
- notFound "abort" | "fallback" (オプション)#
  - 'abort' に設定すると、HAR ファイルに見つからないリクエストはすべて中止されます。
  - 'fallback' に設定すると、見つからないリクエストはネットワークに送信されます。
  デフォルトは abort です。
- update boolean (オプション)#
  
  指定された場合、ファイルから提供する代わりに、実際のネットワーク情報で指定された HAR を更新します。ファイルは、browserContext.close() が呼び出されたときにディスクに書き込まれます。
- updateContent "embed" | "attach" (オプション)追加: v1.32#
  
  リソースコンテンツ管理を制御するためのオプション設定。attach が指定されている場合、リソースは個別のファイルとして、または ZIP アーカイブのエントリとして永続化されます。embed が指定されている場合、コンテンツは HAR ファイルにインラインで保存されます。
- updateMode "full" | "minimal" (オプション)追加: v1.32#
  
  minimal に設定すると、HAR からのルーティングに必要な情報のみを記録します。これにより、HAR からのリプレイ時に使用されないサイズ、タイミング、ページ、Cookie、セキュリティ、およびその他のタイプの HAR 情報が省略されます。デフォルトは minimal です。
- url string | RegExp (オプション)#
  
  リクエスト URL に一致するグロブパターン、正規表現、または述語。パターンに一致する URL を持つリクエストのみが HAR ファイルから提供されます。指定されていない場合、すべてのリクエストは HAR ファイルから提供されます。

戻り値

Promise<void>#

routeWebSocket

追加: v1.48

page.routeWebSocket

このメソッドを使用すると、ページによって行われる WebSocket 接続を変更できます。

このメソッドが呼び出された後に作成された WebSocket のみがルーティングされることに注意してください。ページをナビゲートする前にこのメソッドを呼び出すことをお勧めします。

使用法

以下は、単一のメッセージに応答する簡単なモックの例です。詳細と例については、WebSocketRoute を参照してください。

await page.routeWebSocket('/ws', ws => {
  ws.onMessage(message => {
    if (message === 'request')
      ws.send('response');
  });
});

引数

url string | RegExp | function(URL):boolean #

このパターンに一致する URL を持つ WebSocket のみがルーティングされます。文字列パターンは、baseURL コンテキストオプションに対して相対的になります。
handler function(WebSocketRoute):Promise<Object> | Object #

WebSocket をルーティングするハンドラー関数。

戻り値

Promise<void>#

screenshot

v1.9 で追加

page.screenshot

キャプチャされたスクリーンショットを含むバッファーを返します。

使用法

await page.screenshot();
await page.screenshot(options);

引数

options Object (オプション)
- animations "disabled" | "allow" (オプション)#
  
  "disabled" に設定すると、CSS アニメーション、CSS トランジション、および Web アニメーションを停止します。アニメーションは、期間に応じて異なる扱いを受けます
  - 有限アニメーションは完了まで早送りされるため、transitionend イベントが発生します。
  - 無限アニメーションは初期状態にキャンセルされ、スクリーンショット後に再度再生されます。
  デフォルトは、アニメーションをそのままにする "allow" です。
- caret "hide" | "initial" (オプション)#
  
  "hide" に設定すると、スクリーンショットはテキストカーソルを非表示にします。"initial" に設定すると、テキストカーソルの動作は変更されません。デフォルトは "hide" です。
- clip Object (オプション)#
  - x number
    
    クリップ領域の左上隅の x 座標
  - y number
    
    クリップ領域の左上隅の y 座標
  - width number
    
    クリップ領域の幅
  - height number
    
    クリップ領域の高さ
  結果の画像のクリッピングを指定するオブジェクト。
- fullPage boolean (オプション)#
  
  true の場合、現在表示されているビューポートの代わりに、スクロール可能なページ全体のスクリーンショットを撮ります。デフォルトは false です。
- mask Array<Locator> (オプション)#
  
  スクリーンショットを撮るときにマスクする必要があるロケーターを指定します。マスクされた要素は、そのバウンディングボックスを完全に覆うピンク色のボックス #FF00FF (maskColor でカスタマイズ) でオーバーレイされます。マスクは非表示の要素にも適用されます。それを無効にするには、可視要素のみをマッチングを参照してください。
- maskColor string (オプション)追加: v1.35#
  
  マスクされた要素のオーバーレイボックスの色を、CSS カラー形式で指定します。デフォルトの色はピンク #FF00FF です。
- omitBackground boolean (オプション)#
  
  デフォルトの白い背景を非表示にし、透明度のあるスクリーンショットをキャプチャできるようにします。jpeg 画像には適用されません。デフォルトは false です。
- path string (オプション)#
  
  画像を保存するファイルパス。スクリーンショットのタイプは、ファイル拡張子から推測されます。path が相対パスの場合、現在の作業ディレクトリからの相対パスとして解決されます。パスが指定されていない場合、画像はディスクに保存されません。
- quality number (オプション)#
  
  画像の品質。0〜100 の間です。png 画像には適用されません。
- scale "css" | "device" (オプション)#
  
  "css" に設定すると、スクリーンショットはページ上の CSS ピクセルごとに 1 ピクセルになります。高 DPI デバイスの場合、これによりスクリーンショットが小さくなります。"device" オプションを使用すると、デバイスピクセルごとに 1 ピクセルが生成されるため、高 DPI デバイスのスクリーンショットは 2 倍以上の大きさになります。
  
  デフォルトは "device" です。
- style string (オプション)追加: v1.41#
  
  スクリーンショットを作成中に適用するスタイルシートのテキスト。これは、動的な要素を非表示にしたり、要素を非表示にしたり、プロパティを変更して、再現可能なスクリーンショットを作成するのに役立つ場所です。このスタイルシートは Shadow DOM を貫通し、内部フレームに適用されます。
- timeout number (オプション)#
  
  最大時間 (ミリ秒単位)。デフォルトは 0 - タイムアウトなし。デフォルト値は、構成の actionTimeout オプションを使用するか、browserContext.setDefaultTimeout() または page.setDefaultTimeout() メソッドを使用して変更できます。
- type "png" | "jpeg" (オプション)#
  
  スクリーンショットのタイプを指定します。デフォルトは png です。

戻り値

Promise<Buffer>#

setContent

v1.9 で追加

page.setContent

このメソッドは内部的に document.write() を呼び出し、そのすべての特定の特性と動作を継承します。

使用法

await page.setContent(html);
await page.setContent(html, options);

引数

html string #

ページに割り当てる HTML マークアップ。
options Object (オプション)
- timeout number (オプション)#
  
  操作の最大時間（ミリ秒単位）。デフォルトは 0 - タイムアウトなし。デフォルト値は、構成の navigationTimeout オプション、または browserContext.setDefaultNavigationTimeout()、browserContext.setDefaultTimeout()、page.setDefaultNavigationTimeout() または page.setDefaultTimeout() メソッドを使用して変更できます。
- waitUntil "load" | "domcontentloaded" | "networkidle" | "commit" (オプション)#
  
  操作が成功したと見なすタイミング、デフォルトは load です。イベントは次のいずれかになります
  - 'domcontentloaded' - DOMContentLoaded イベントが発生したときに操作が完了したと見なします。
  - 'load' - load イベントが発生したときに操作が完了したと見なします。
  - 'networkidle' - 非推奨 ネットワーク接続が少なくとも 500 ms なくなったときに操作が完了したと見なします。このメソッドをテストに使用しないでください。代わりに、Web アサーションに依存して準備状態を評価してください。
  - 'commit' - ネットワークレスポンスが受信され、ドキュメントのロードが開始されたときに操作が完了したと見なします。

戻り値

Promise<void>#

v1.9 で追加

page.setDefaultNavigationTimeout

この設定は、次のメソッドと関連するショートカットのデフォルトの最大ナビゲーション時間を変更します

注

page.setDefaultNavigationTimeout() は、page.setDefaultTimeout()、browserContext.setDefaultTimeout()、および browserContext.setDefaultNavigationTimeout() よりも優先されます。

使用法

page.setDefaultNavigationTimeout(timeout);

引数

timeout number #

最大ナビゲーション時間（ミリ秒単位）

setDefaultTimeout

v1.9 で追加

page.setDefaultTimeout

この設定は、timeout オプションを受け入れるすべてのメソッドのデフォルトの最大時間を変更します。

注

page.setDefaultNavigationTimeout() は、page.setDefaultTimeout() よりも優先されます。

使用法

page.setDefaultTimeout(timeout);

引数

timeout number #

最大時間（ミリ秒単位）。タイムアウトを無効にするには 0 を渡します。

setExtraHTTPHeaders

v1.9 で追加

page.setExtraHTTPHeaders

追加の HTTP ヘッダーは、ページが開始するすべてのリクエストとともに送信されます。

注

page.setExtraHTTPHeaders() は、送信リクエストのヘッダーの順序を保証しません。

使用法

await page.setExtraHTTPHeaders(headers);

引数

headers Object<string, string>#

すべてのリクエストとともに送信される追加の HTTP ヘッダーを含むオブジェクト。すべてのヘッダー値は文字列である必要があります。

戻り値

Promise<void>#

setViewportSize

v1.9 で追加

page.setViewportSize

単一のブラウザに複数のページがある場合、各ページは独自のビューポートサイズを持つことができます。ただし、browser.newContext() を使用すると、コンテキスト内のすべてのページに対してビューポートサイズ（およびそれ以上）を一度に設定できます。

page.setViewportSize() はページのサイズを変更します。多くのウェブサイトは電話がサイズを変更することを想定していないため、ページに移動する前にビューポートサイズを設定する必要があります。page.setViewportSize() は screen サイズもリセットします。これらのプロパティをより詳細に制御する必要がある場合は、screen および viewport パラメーターを指定して browser.newContext() を使用してください。

使用法

const page = await browser.newPage();
await page.setViewportSize({
  width: 640,
  height: 480,
});
await page.goto('https://example.com');

引数

viewportSize Object#
- width number
  
  ページ幅（ピクセル単位）。
- height number
  
  ページ高さ（ピクセル単位）。

戻り値

Promise<void>#

title

v1.9 で追加

page.title

ページのタイトルを返します。

使用法

await page.title();

戻り値

Promise<string>#

unroute

v1.9 で追加

page.unroute

page.route() で作成されたルートを削除します。handler が指定されていない場合、url のすべてのルートを削除します。

使用法

await page.unroute(url);
await page.unroute(url, handler);

引数

url string | RegExp | function(URL):boolean #

ルーティング中にマッチさせる glob パターン、正規表現パターン、または URL を受け取る述語。
handler function(Route, Request):Promise<Object> | Object (オプション)#

リクエストをルーティングするためのオプションのハンドラー関数。

戻り値

Promise<void>#

unrouteAll

追加: v1.41

page.unrouteAll

page.route() および page.routeFromHAR() で作成されたすべてのルートを削除します。

使用法

await page.unrouteAll();
await page.unrouteAll(options);

引数

options Object (オプション)
- behavior "wait" | "ignoreErrors" | "default" (オプション)#
  
  既に実行中のハンドラーを待機するかどうか、およびエラーが発生した場合の処理を指定します。
  - 'default' - 現在のハンドラー呼び出し（もしあれば）の完了を待たず、アンルートされたハンドラーがエラーをスローした場合、未処理のエラーが発生する可能性があります。
  - 'wait' - 現在のハンドラー呼び出し（もしあれば）の完了を待ちます。
  - 'ignoreErrors' - 現在のハンドラー呼び出し（もしあれば）の完了を待たず、アンルーティング後のハンドラーによってスローされたすべてのエラーはサイレントにキャッチされます。

戻り値

Promise<void>#

url

v1.9 で追加

page.url

使用法

page.url();

戻り値

string #

video

v1.9 で追加

page.video

このページに関連付けられた Video オブジェクト。

使用法

page.video();

戻り値

null | Video #

viewportSize

v1.9 で追加

page.viewportSize

使用法

page.viewportSize();

戻り値

null | Object#
- width number
  
  ページ幅（ピクセル単位）。
- height number
  
  ページ高さ（ピクセル単位）。

waitForEvent

v1.9 で追加

page.waitForEvent

イベントが発火するのを待機し、その値を述語関数に渡します。述語が truthy な値を返すと解決します。イベントが発火する前にページが閉じられた場合、エラーをスローします。イベントデータの値を返します。

使用法

// Start waiting for download before clicking. Note no await.
const downloadPromise = page.waitForEvent('download');
await page.getByText('Download file').click();
const download = await downloadPromise;

引数

event string #

イベント名。通常は *.on(event) に渡されるものと同じです。
optionsOrPredicate function | Object (オプション)#
- predicate function
  
  イベントデータを受け取り、待機が解決されるべきときに truthy な値に解決します。
- timeout number (オプション)
  
  待機する最大時間（ミリ秒単位）。デフォルトは 0 - タイムアウトなし。デフォルト値は、config の actionTimeout オプション、または browserContext.setDefaultTimeout() メソッドまたは page.setDefaultTimeout() メソッドを使用して変更できます。
イベントを受け取る述語、またはオプションオブジェクトのいずれか。オプション。
options Object (オプション)
- predicate function (オプション)#
  
  イベントデータを受け取り、待機が解決されるべきときに truthy な値に解決します。

戻り値

Promise<Object>#

waitForFunction

v1.9 で追加

page.waitForFunction

pageFunction が truthy な値を返すと解決します。truthy な値の JSHandle に解決されます。

使用法

page.waitForFunction() は、ビューポートサイズの変更を監視するために使用できます。

const { webkit } = require('playwright');  // Or 'chromium' or 'firefox'.

(async () => {
  const browser = await webkit.launch();
  const page = await browser.newPage();
  const watchDog = page.waitForFunction(() => window.innerWidth < 100);
  await page.setViewportSize({ width: 50, height: 50 });
  await watchDog;
  await browser.close();
})();

page.waitForFunction() 関数の述語に引数を渡すには

const selector = '.foo';
await page.waitForFunction(selector => !!document.querySelector(selector), selector);

引数

pageFunction function | string #

ページコンテキストで評価される関数。
arg EvaluationArgument (オプション)#

pageFunction に渡すオプションの引数。
options Object (オプション)
- polling number | "raf" (オプション)#
  
  polling が 'raf' の場合、pageFunction は requestAnimationFrame コールバックで継続的に実行されます。polling が数値の場合、関数が実行される間隔（ミリ秒単位）として扱われます。デフォルトは raf です。
- timeout number (オプション)#
  
  待機する最大時間（ミリ秒単位）。デフォルトは 0 - タイムアウトなし。デフォルト値は、config の actionTimeout オプション、または browserContext.setDefaultTimeout() メソッドまたは page.setDefaultTimeout() メソッドを使用して変更できます。

戻り値

Promise<JSHandle>#

waitForLoadState

v1.9 で追加

page.waitForLoadState

必要なロード状態に達すると解決します。

これは、ページが必要なロード状態（デフォルトでは load）に達すると解決します。ナビゲーションは、このメソッドが呼び出されたときにコミットされている必要があります。現在のドキュメントが既に必要な状態に達している場合は、すぐに解決されます。

注

ほとんどの場合、Playwright はすべてのアクションの前に自動的に待機するため、このメソッドは必要ありません。

使用法

await page.getByRole('button').click(); // Click triggers navigation.
await page.waitForLoadState(); // The promise resolves after 'load' event.

const popupPromise = page.waitForEvent('popup');
await page.getByRole('button').click(); // Click triggers a popup.
const popup = await popupPromise;
await popup.waitForLoadState('domcontentloaded'); // Wait for the 'DOMContentLoaded' event.
console.log(await popup.title()); // Popup is ready to use.

引数

state "load" | "domcontentloaded" | "networkidle" (オプション)#

待機するオプションのロード状態。デフォルトは load です。現在のドキュメントのロード中に状態が既に到達している場合、メソッドはすぐに解決されます。次のいずれかになります。
- 'load' - load イベントが発火するのを待ちます。
- 'domcontentloaded' - DOMContentLoaded イベントが発火するのを待ちます。
- 'networkidle' - 非推奨 少なくとも 500 ミリ秒間ネットワーク接続がなくなるまで待ちます。テストにこのメソッドを使用しないでください。代わりに、Web アサーションを使用して準備状態を評価してください。
options Object (オプション)
- timeout number (オプション)#
  
  操作の最大時間（ミリ秒単位）。デフォルトは 0 - タイムアウトなし。デフォルト値は、構成の navigationTimeout オプション、または browserContext.setDefaultNavigationTimeout()、browserContext.setDefaultTimeout()、page.setDefaultNavigationTimeout() または page.setDefaultTimeout() メソッドを使用して変更できます。

戻り値

Promise<void>#

waitForRequest

v1.9 で追加

page.waitForRequest

一致するリクエストを待機して返します。イベントの詳細については、イベントの待機を参照してください。

使用法

// Start waiting for request before clicking. Note no await.
const requestPromise = page.waitForRequest('https://example.com/resource');
await page.getByText('trigger request').click();
const request = await requestPromise;

// Alternative way with a predicate. Note no await.
const requestPromise = page.waitForRequest(request =>
  request.url() === 'https://example.com' && request.method() === 'GET',
);
await page.getByText('trigger request').click();
const request = await requestPromise;

引数

urlOrPredicate string | RegExp | function(Request):boolean | Promise<boolean>#

リクエスト URL 文字列、正規表現、または Request オブジェクトを受け取る述語。
options Object (オプション)
- timeout number (オプション)#
  
  最大待機時間（ミリ秒単位）。デフォルトは 30 秒です。タイムアウトを無効にするには 0 を渡します。デフォルト値は、page.setDefaultTimeout() メソッドを使用して変更できます。

戻り値

Promise<Request>#

waitForResponse

v1.9 で追加

page.waitForResponse

一致するレスポンスを返します。イベントの詳細については、イベントの待機を参照してください。

使用法

// Start waiting for response before clicking. Note no await.
const responsePromise = page.waitForResponse('https://example.com/resource');
await page.getByText('trigger response').click();
const response = await responsePromise;

// Alternative way with a predicate. Note no await.
const responsePromise = page.waitForResponse(response =>
  response.url() === 'https://example.com' && response.status() === 200
      && response.request().method() === 'GET'
);
await page.getByText('trigger response').click();
const response = await responsePromise;

引数

urlOrPredicate string | RegExp | function(Response):boolean | Promise<boolean>#

リクエスト URL 文字列、正規表現、または Response オブジェクトを受け取る述語。baseURL がコンテキストオプションを介して提供され、渡された URL がパスの場合、new URL() コンストラクターを介してマージされます。
options Object (オプション)
- timeout number (オプション)#
  
  最大待機時間（ミリ秒単位）。デフォルトは 30 秒です。タイムアウトを無効にするには 0 を渡します。デフォルト値は、browserContext.setDefaultTimeout() メソッドまたは page.setDefaultTimeout() メソッドを使用して変更できます。

戻り値

Promise<Response>#

waitForURL

追加: v1.11

page.waitForURL

メインフレームが指定された URL にナビゲートするのを待ちます。

使用法

await page.click('a.delayed-navigation'); // Clicking the link will indirectly cause a navigation
await page.waitForURL('**/target.html');

引数

url string | RegExp | function(URL):boolean #

ナビゲーションを待機中にマッチさせる glob パターン、正規表現パターン、または URL を受け取る述語。パラメーターがワイルドカード文字を含まない文字列の場合、メソッドは文字列と完全に一致する URL へのナビゲーションを待機することに注意してください。
options Object (オプション)
- timeout number (オプション)#
  
  操作の最大時間（ミリ秒単位）。デフォルトは 0 - タイムアウトなし。デフォルト値は、構成の navigationTimeout オプション、または browserContext.setDefaultNavigationTimeout()、browserContext.setDefaultTimeout()、page.setDefaultNavigationTimeout() または page.setDefaultTimeout() メソッドを使用して変更できます。
- waitUntil "load" | "domcontentloaded" | "networkidle" | "commit" (オプション)#
  
  操作が成功したと見なすタイミング、デフォルトは load です。イベントは次のいずれかになります
  - 'domcontentloaded' - DOMContentLoaded イベントが発生したときに操作が完了したと見なします。
  - 'load' - load イベントが発生したときに操作が完了したと見なします。
  - 'networkidle' - 非推奨 ネットワーク接続が少なくとも 500 ms なくなったときに操作が完了したと見なします。このメソッドをテストに使用しないでください。代わりに、Web アサーションに依存して準備状態を評価してください。
  - 'commit' - ネットワークレスポンスが受信され、ドキュメントのロードが開始されたときに操作が完了したと見なします。

戻り値

Promise<void>#

workers

v1.9 で追加

page.workers

このメソッドは、ページに関連付けられたすべての専用 WebWorker を返します。

注

これには ServiceWorker は含まれません。

使用法

page.workers();

戻り値

Array<Worker>#

プロパティ

clock

追加: v1.45

page.clock

Playwright には、時計と時間の経過をモックする機能があります。

使用法

page.clock

型

Clock

coverage

v1.9 で追加

page.coverage

注

Chromium でのみ使用可能です。

ブラウザー固有の Coverage 実装。詳細については、Coverage を参照してください。

使用法

page.coverage

型

Coverage

keyboard

v1.9 で追加

page.keyboard

使用法

page.keyboard

型

Keyboard

mouse

v1.9 で追加

page.mouse

使用法

page.mouse

型

Mouse

request

追加: v1.16

page.request

このページに関連付けられた API テストヘルパー。このメソッドは、ページのコンテキストで browserContext.request と同じインスタンスを返します。詳細については、browserContext.request を参照してください。

使用法

page.request

型

APIRequestContext

touchscreen

v1.9 で追加

page.touchscreen

使用法

page.touchscreen

型

Touchscreen

イベント

on('close')

v1.9 で追加

page.on('close')

ページが閉じるときに発火します。

使用法

page.on('close', data => {});

イベントデータ

Page

on('console')

v1.9 で追加

page.on('console')

ページ内の JavaScript が、console.log や console.dir などのコンソール API メソッドのいずれかを呼び出すと発火します。

console.log に渡された引数は、ConsoleMessage イベントハンドラー引数で使用できます。

使用法

page.on('console', async msg => {
  const values = [];
  for (const arg of msg.args())
    values.push(await arg.jsonValue());
  console.log(...values);
});
await page.evaluate(() => console.log('hello', 5, { foo: 'bar' }));

イベントデータ

ConsoleMessage

on('crash')

v1.9 で追加

page.on('crash')

ページがクラッシュすると発火します。ブラウザーページは、過剰なメモリを割り当てようとするとクラッシュする可能性があります。ページがクラッシュすると、進行中および後続の操作は例外をスローします。

クラッシュに対処する最も一般的な方法は、例外をキャッチすることです。

try {
  // Crash might happen during a click.
  await page.click('button');
  // Or while waiting for an event.
  await page.waitForEvent('popup');
} catch (e) {
  // When the page crashes, exception message contains 'crash'.
}

使用法

page.on('crash', data => {});

イベントデータ

Page

on('dialog')

v1.9 で追加

page.on('dialog')

alert、prompt、confirm、beforeunload などの JavaScript ダイアログが表示されると発火します。リスナーは、dialog.accept() または dialog.dismiss() のいずれかでダイアログを **承諾** または **拒否** する必要があります。そうしないと、ページはダイアログを待機してフリーズし、クリックなどのアクションは完了しません。

使用法

page.on('dialog', dialog => dialog.accept());

注

page.on('dialog') または browserContext.on('dialog') リスナーが存在しない場合、すべてのダイアログは自動的に拒否されます。

イベントデータ

Dialog

on('domcontentloaded')

追加: v1.9

page.on('domcontentloaded')

JavaScript DOMContentLoaded イベントがディスパッチされると発火します。

使用法

page.on('domcontentloaded', data => {});

イベントデータ

Page

on('download')

v1.9 で追加

page.on('download')

添付ファイルのダウンロードが開始されると発火します。ユーザーは、渡された Download インスタンスを介して、ダウンロードされたコンテンツに対して基本的なファイル操作を実行できます。

使用法

page.on('download', data => {});

イベントデータ

Download

on('filechooser')

追加: v1.9

page.on('filechooser')

<input type=file> をクリックした後など、ファイルチューザーが表示されるはずの場合に発火します。Playwright は、fileChooser.setFiles() を使用して入力ファイルを設定することでこれに応答でき、その後アップロードできます。

page.on('filechooser', async fileChooser => {
  await fileChooser.setFiles(path.join(__dirname, '/tmp/myfile.pdf'));
});

使用法

page.on('filechooser', data => {});

イベントデータ

FileChooser

on('frameattached')

追加: v1.9

page.on('frameattached')

フレームがアタッチされると発火します。

使用法

page.on('frameattached', data => {});

イベントデータ

Frame

on('framedetached')

追加: v1.9

page.on('framedetached')

フレームがデタッチされると発火します。

使用法

page.on('framedetached', data => {});

イベントデータ

Frame

on('framenavigated')

追加: v1.9

page.on('framenavigated')

フレームが新しい URL にナビゲートされると発火します。

使用法

page.on('framenavigated', data => {});

イベントデータ

Frame

on('load')

v1.9 で追加

page.on('load')

JavaScript load イベントがディスパッチされると発火します。

使用法

page.on('load', data => {});

イベントデータ

Page

on('pageerror')

追加: v1.9

page.on('pageerror')

ページ内でキャッチされない例外が発生すると発火します。

// Log all uncaught errors to the terminal
page.on('pageerror', exception => {
  console.log(`Uncaught exception: "${exception}"`);
});

// Navigate to a page with an exception.
await page.goto('data:text/html,<script>throw new Error("Test")</script>');

使用法

page.on('pageerror', data => {});

イベントデータ

エラー

v1.9 で追加

page.on('popup')

ページが新しいタブまたはウィンドウを開くと発火します。このイベントは、browserContext.on('page') に加えて発火しますが、このページに関連するポップアップのみに限定されます。

ページが利用可能になる最も早い瞬間は、最初の URL にナビゲートしたときです。たとえば、window.open('http://example.com') でポップアップを開くと、"http://example.com" へのネットワークリクエストが完了し、そのレスポンスがポップアップでのロードを開始したときに、このイベントが発火します。このネットワークリクエストをルーティング/リッスンする場合は、browserContext.route() および browserContext.on('request') をそれぞれ Page の同様のメソッドの代わりに使用してください。

// Start waiting for popup before clicking. Note no await.
const popupPromise = page.waitForEvent('popup');
await page.getByText('open the popup').click();
const popup = await popupPromise;
console.log(await popup.evaluate('location.href'));

注

ページが特定の状態になるまで待機するには、page.waitForLoadState() を使用します（ほとんどの場合、必要ありません）。

使用法

page.on('popup', data => {});

イベントデータ

Page

on('request')

v1.9 で追加

page.on('request')

ページがリクエストを発行すると発火します。request オブジェクトは読み取り専用です。リクエストをインターセプトして変更するには、page.route() または browserContext.route() を参照してください。

使用法

page.on('request', data => {});

イベントデータ

Request

on('requestfailed')

追加: v1.9

page.on('requestfailed')

リクエストが失敗した場合（たとえば、タイムアウトした場合）に発火します。

page.on('requestfailed', request => {
  console.log(request.url() + ' ' + request.failure().errorText);
});

注

404 や 503 などの HTTP エラーレスポンスは、HTTP の観点からは依然として成功したレスポンスであるため、リクエストは page.on('requestfinished') イベントで完了し、page.on('requestfailed') では完了しません。リクエストが失敗と見なされるのは、クライアントがサーバーから HTTP レスポンスを取得できない場合（たとえば、ネットワークエラー net::ERR_FAILED が原因の場合）のみです。

使用法

page.on('requestfailed', data => {});

イベントデータ

Request

on('requestfinished')

追加: v1.9

page.on('requestfinished')

レスポンスボディをダウンロードした後、リクエストが正常に完了すると発火します。成功したレスポンスの場合、イベントのシーケンスは request、response、および requestfinished です。

使用法

page.on('requestfinished', data => {});

イベントデータ

Request

on('response')

v1.9 で追加

page.on('response')

response のステータスとヘッダーがリクエストに対して受信されると発火します。成功したレスポンスの場合、イベントのシーケンスは request、response、および requestfinished です。

使用法

page.on('response', data => {});

イベントデータ

Response

on('websocket')

追加: v1.9

page.on('websocket')

WebSocket リクエストが送信されると発火します。

使用法

page.on('websocket', data => {});

イベントデータ

WebSocket

on('worker')

v1.9 で追加

page.on('worker')

専用の WebWorker がページによって生成されると発火します。

使用法

page.on('worker', data => {});

イベントデータ

Worker

非推奨

$

追加: v1.9

page.$

非推奨

代わりにロケーターベースの page.locator() を使用してください。ロケーターの詳細をお読みください。

このメソッドは、ページ内で指定されたセレクターに一致する要素を見つけます。セレクターに一致する要素がない場合、戻り値は null に解決されます。ページ上の要素を待機するには、locator.waitFor() を使用してください。

使用法

await page.$(selector);
await page.$(selector, options);

引数

selector string #

クエリするセレクター。
options Object (オプション)
- strict boolean (オプション)追加: v1.14#
  
  true の場合、この呼び出しでは、セレクターが単一の要素に解決される必要があります。指定されたセレクターが複数の要素に解決される場合、呼び出しは例外をスローします。

戻り値

Promise<null | ElementHandle>#

$$

追加: v1.9

page.$$

非推奨

代わりにロケーターベースの page.locator() を使用してください。ロケーターの詳細をお読みください。

このメソッドは、ページ内で指定されたセレクターに一致するすべての要素を見つけます。セレクターに一致する要素がない場合、戻り値は [] に解決されます。

使用法

await page.$$(selector);

引数

selector string #

クエリするセレクター。

戻り値

Promise<Array<ElementHandle>>#

$eval

追加: v1.9

page.$eval

非推奨

このメソッドは、要素が操作可能チェックに合格するのを待機しないため、テストが不安定になる可能性があります。代わりに、locator.evaluate()、その他の Locator ヘルパーメソッド、または Web ファーストのアサーションを使用してください。

このメソッドは、ページ内で指定されたセレクターに一致する要素を見つけ、pageFunction への最初の引数として渡します。セレクターに一致する要素がない場合、メソッドはエラーをスローします。pageFunction の値を返します。

pageFunction が Promise を返す場合、page.$eval() は Promise が解決されるのを待機し、その値を返します。

使用法

const searchValue = await page.$eval('#search', el => el.value);
const preloadHref = await page.$eval('link[rel=preload]', el => el.href);
const html = await page.$eval('.main-container', (e, suffix) => e.outerHTML + suffix, 'hello');
// In TypeScript, this example requires an explicit type annotation (HTMLLinkElement) on el:
const preloadHrefTS = await page.$eval('link[rel=preload]', (el: HTMLLinkElement) => el.href);

引数

selector string #

クエリするセレクター。
pageFunction function(Element) | string #

ページコンテキストで評価される関数。
arg EvaluationArgument (オプション)#

pageFunction に渡すオプションの引数。
options Object (オプション)
- strict boolean (オプション)追加: v1.14#
  
  true の場合、この呼び出しでは、セレクターが単一の要素に解決される必要があります。指定されたセレクターが複数の要素に解決される場合、呼び出しは例外をスローします。

戻り値

Promise<Serializable>#

$$eval

追加: v1.9

page.$$eval

非推奨

ほとんどの場合、locator.evaluateAll()、その他の Locator ヘルパーメソッド、および Web ファーストのアサーションの方が優れています。

このメソッドは、ページ内で指定されたセレクターに一致するすべての要素を見つけ、一致する要素の配列を pageFunction への最初の引数として渡します。pageFunction 呼び出しの結果を返します。

pageFunction が Promise を返す場合、page.$$eval() は Promise が解決されるのを待機し、その値を返します。

使用法

const divCounts = await page.$$eval('div', (divs, min) => divs.length >= min, 10);

引数

selector string #

クエリするセレクター。
pageFunction function(Array<Element>) | string #

ページコンテキストで評価される関数。
arg EvaluationArgument (オプション)#

pageFunction に渡すオプションの引数。

戻り値

Promise<Serializable>#

アクセシビリティ

v1.9 で追加

page.accessibility

非推奨

このプロパティは推奨されません。ページのアクセシビリティをテストする必要がある場合は、Axe などの他のライブラリを使用してください。Axe との統合については、Node.js のガイドをご覧ください。

使用法

page.accessibility

型

Accessibility

check

v1.9 で追加

page.check

非推奨

ロケーターベースの locator.check() を代わりに使用してください。ロケーターの詳細をお読みください。

このメソッドは、selector に一致する要素をチェックするために、以下の手順を実行します。

selector に一致する要素を見つけます。存在しない場合は、一致する要素が DOM にアタッチされるまで待機します。
一致した要素がチェックボックスまたはラジオ入力であることを確認します。そうでない場合、このメソッドは例外をスローします。要素がすでにチェックされている場合、このメソッドはすぐに戻ります。
actionability チェックが force オプションが設定されていない限り、一致した要素に対して実行されるのを待ちます。チェック中に要素がデタッチされた場合、アクション全体が再試行されます。
必要に応じて、要素をビューにスクロールします。
page.mouse を使用して、要素の中央をクリックします。
要素がチェックされたことを確認します。そうでない場合、このメソッドは例外をスローします。

指定された timeout 時間内にすべてのステップが完了しなかった場合、このメソッドは TimeoutError をスローします。タイムアウトに 0 を渡すと、これは無効になります。

使用法

await page.check(selector);
await page.check(selector, options);

引数

selector string #

要素を検索するためのセレクター。セレクターに一致する要素が複数ある場合は、最初の要素が使用されます。
options Object (オプション)
- force boolean (オプション)#
  
  アクション可能性チェックをバイパスするかどうか。デフォルトは false です。
- noWaitAfter boolean (オプション)#
  
  非推奨
  このオプションは効果がありません。
  
  このオプションは効果がありません。
- position Object (オプション)追加: v1.11#
  - x number
  - y number
  要素のパディングボックスの左上隅を基準に使用するポイント。指定しない場合は、要素の可視点の一部を使用します。
- strict boolean (オプション)追加: v1.14#
  
  true の場合、この呼び出しでは、セレクターが単一の要素に解決される必要があります。指定されたセレクターが複数の要素に解決される場合、呼び出しは例外をスローします。
- timeout number (オプション)#
  
  最大時間 (ミリ秒単位)。デフォルトは 0 - タイムアウトなし。デフォルト値は、構成の actionTimeout オプションを使用するか、browserContext.setDefaultTimeout() または page.setDefaultTimeout() メソッドを使用して変更できます。
- trial boolean (オプション)追加: v1.11#
  
  設定すると、このメソッドはアクション可能性チェックのみを実行し、アクションをスキップします。デフォルトは false です。アクションを実行せずに、要素がアクションの準備ができるまで待機するのに役立ちます。

戻り値

Promise<void>#

click

v1.9 で追加

page.click

非推奨

ロケーターベースの locator.click() を代わりに使用してください。ロケーターの詳細をお読みください。

このメソッドは、selector に一致する要素をクリックするために、以下の手順を実行します。

selector に一致する要素を見つけます。存在しない場合は、一致する要素が DOM にアタッチされるまで待機します。
actionability チェックが force オプションが設定されていない限り、一致した要素に対して実行されるのを待ちます。チェック中に要素がデタッチされた場合、アクション全体が再試行されます。
必要に応じて、要素をビューにスクロールします。
page.mouse を使用して、要素の中央、または指定された position をクリックします。
noWaitAfter オプションが設定されていない限り、開始されたナビゲーションが成功または失敗するのを待ちます。

使用法

await page.click(selector);
await page.click(selector, options);

引数

selector string #

要素を検索するためのセレクター。セレクターに一致する要素が複数ある場合は、最初の要素が使用されます。
options Object (オプション)
- button "left" | "right" | "middle" (オプション)#
  
  デフォルトは left です。
- clickCount number (オプション)#
  
  デフォルトは 1 です。UIEvent.detail を参照してください。
- delay number (オプション)#
  
  mousedown と mouseup の間の待ち時間（ミリ秒）。デフォルトは 0 です。
- force boolean (オプション)#
  
  アクション可能性チェックをバイパスするかどうか。デフォルトは false です。
- modifiers Array<"Alt" | "Control" | "ControlOrMeta" | "Meta" | "Shift"> (オプション)#
  
  押す修飾キー。操作中にこれらの修飾キーのみが押されていることを確認し、その後、現在の修飾キーを復元します。指定しない場合、現在押されている修飾キーが使用されます。"ControlOrMeta" は、Windows および Linux では "Control" に、macOS では "Meta" に解決されます。
- noWaitAfter boolean (オプション)#
  
  非推奨
  このオプションは将来、デフォルトで true になります。
  
  ナビゲーションを開始するアクションは、これらのナビゲーションが発生し、ページが読み込みを開始するのを待機しています。このフラグを設定することで、待機をオプトアウトできます。このオプションが必要になるのは、アクセスできないページにナビゲートする場合などの例外的なケースのみです。デフォルトは false です。
- position Object (オプション)#
  - x number
  - y number
  要素のパディングボックスの左上隅を基準に使用するポイント。指定しない場合は、要素の可視点の一部を使用します。
- strict boolean (オプション)追加: v1.14#
  
  true の場合、この呼び出しでは、セレクターが単一の要素に解決される必要があります。指定されたセレクターが複数の要素に解決される場合、呼び出しは例外をスローします。
- timeout number (オプション)#
  
  最大時間 (ミリ秒単位)。デフォルトは 0 - タイムアウトなし。デフォルト値は、構成の actionTimeout オプションを使用するか、browserContext.setDefaultTimeout() または page.setDefaultTimeout() メソッドを使用して変更できます。
- trial boolean (オプション)追加: v1.11#
  
  設定すると、このメソッドは actionability チェックのみを実行し、アクションをスキップします。デフォルトは false です。要素がアクションを実行する準備ができるまで待機する場合に便利です。キーボード modifiers は、それらのキーが押されたときにのみ表示される要素をテストできるように、trial に関係なく押されることに注意してください。

戻り値

Promise<void>#

dblclick

v1.9 で追加

page.dblclick

非推奨

ロケーターベースの locator.dblclick() を代わりに使用してください。ロケーターの詳細をお読みください。

このメソッドは、selector に一致する要素をダブルクリックするために、以下の手順を実行します。

selector に一致する要素を見つけます。存在しない場合は、一致する要素が DOM にアタッチされるまで待機します。
actionability チェックが force オプションが設定されていない限り、一致した要素に対して実行されるのを待ちます。チェック中に要素がデタッチされた場合、アクション全体が再試行されます。
必要に応じて、要素をビューにスクロールします。
page.mouse を使用して、要素の中央、または指定された position をダブルクリックします。

注

page.dblclick() は、2 つの click イベントと 1 つの dblclick イベントをディスパッチします。

使用法

await page.dblclick(selector);
await page.dblclick(selector, options);

引数

selector string #

要素を検索するためのセレクター。セレクターに一致する要素が複数ある場合は、最初の要素が使用されます。
options Object (オプション)
- button "left" | "right" | "middle" (オプション)#
  
  デフォルトは left です。
- delay number (オプション)#
  
  mousedown と mouseup の間の待ち時間（ミリ秒）。デフォルトは 0 です。
- force boolean (オプション)#
  
  アクション可能性チェックをバイパスするかどうか。デフォルトは false です。
- modifiers Array<"Alt" | "Control" | "ControlOrMeta" | "Meta" | "Shift"> (オプション)#
  
  押す修飾キー。操作中にこれらの修飾キーのみが押されていることを確認し、その後、現在の修飾キーを復元します。指定しない場合、現在押されている修飾キーが使用されます。"ControlOrMeta" は、Windows および Linux では "Control" に、macOS では "Meta" に解決されます。
- noWaitAfter boolean (オプション)#
  
  非推奨
  このオプションは効果がありません。
  
  このオプションは効果がありません。
- position Object (オプション)#
  - x number
  - y number
  要素のパディングボックスの左上隅を基準に使用するポイント。指定しない場合は、要素の可視点の一部を使用します。
- strict boolean (オプション)追加: v1.14#
  
  true の場合、この呼び出しでは、セレクターが単一の要素に解決される必要があります。指定されたセレクターが複数の要素に解決される場合、呼び出しは例外をスローします。
- timeout number (オプション)#
  
  最大時間 (ミリ秒単位)。デフォルトは 0 - タイムアウトなし。デフォルト値は、構成の actionTimeout オプションを使用するか、browserContext.setDefaultTimeout() または page.setDefaultTimeout() メソッドを使用して変更できます。
- trial boolean (オプション)追加: v1.11#
  
  設定すると、このメソッドは actionability チェックのみを実行し、アクションをスキップします。デフォルトは false です。要素がアクションを実行する準備ができるまで待機する場合に便利です。キーボード modifiers は、それらのキーが押されたときにのみ表示される要素をテストできるように、trial に関係なく押されることに注意してください。

戻り値

Promise<void>#

dispatchEvent

v1.9 で追加

page.dispatchEvent

非推奨

ロケーターベースの locator.dispatchEvent() を代わりに使用してください。ロケーターの詳細をお読みください。

以下のスニペットは、要素に対して click イベントをディスパッチします。要素の可視状態に関係なく、click がディスパッチされます。これは、element.click() を呼び出すのと同じです。

使用法

await page.dispatchEvent('button#submit', 'click');

内部的には、指定された type に基づいてイベントのインスタンスを作成し、eventInit プロパティで初期化し、要素上でディスパッチします。イベントはデフォルトで composed、cancelable、およびバブルです。

eventInit はイベント固有であるため、初期プロパティのリストについては、イベントのドキュメントを参照してください。

ライブオブジェクトをイベントに渡したい場合は、プロパティ値として JSHandle を指定することもできます。

// Note you can only create DataTransfer in Chromium and Firefox
const dataTransfer = await page.evaluateHandle(() => new DataTransfer());
await page.dispatchEvent('#source', 'dragstart', { dataTransfer });

引数

selector string #

要素を検索するためのセレクター。セレクターに一致する要素が複数ある場合は、最初の要素が使用されます。
type string #

DOM イベントタイプ: "click"、"dragstart" など。
eventInit EvaluationArgument (オプション)#

オプションのイベント固有の初期化プロパティ。
options Object (オプション)
- strict boolean (オプション)追加: v1.14#
  
  true の場合、この呼び出しでは、セレクターが単一の要素に解決される必要があります。指定されたセレクターが複数の要素に解決される場合、呼び出しは例外をスローします。
- timeout number (オプション)#
  
  最大時間 (ミリ秒単位)。デフォルトは 0 - タイムアウトなし。デフォルト値は、構成の actionTimeout オプションを使用するか、browserContext.setDefaultTimeout() または page.setDefaultTimeout() メソッドを使用して変更できます。

戻り値

Promise<void>#

fill

v1.9 で追加

page.fill

非推奨

ロケーターベースの locator.fill() を代わりに使用してください。ロケーターの詳細をお読みください。

このメソッドは、selector に一致する要素を待機し、actionability チェックを待機し、要素にフォーカスし、それを入力し、入力後に input イベントをトリガーします。入力フィールドをクリアするために空の文字列を渡すことができることに注意してください。

ターゲット要素が <input>、<textarea>、または [contenteditable] 要素でない場合、このメソッドはエラーをスローします。ただし、要素が関連付けられた control を持つ <label> 要素内にある場合、代わりにコントロールが入力されます。

きめ細かいキーボードイベントを送信するには、locator.pressSequentially() を使用してください。

使用法

await page.fill(selector, value);
await page.fill(selector, value, options);

引数

selector string #

要素を検索するためのセレクター。セレクターに一致する要素が複数ある場合は、最初の要素が使用されます。
value string #

<input>、<textarea>、または [contenteditable] 要素に入力する値。
options Object (オプション)
- force boolean (オプション)追加: v1.13#
  
  アクション可能性チェックをバイパスするかどうか。デフォルトは false です。
- noWaitAfter boolean (オプション)#
  
  非推奨
  このオプションは効果がありません。
  
  このオプションは効果がありません。
- strict boolean (オプション)追加: v1.14#
  
  true の場合、この呼び出しでは、セレクターが単一の要素に解決される必要があります。指定されたセレクターが複数の要素に解決される場合、呼び出しは例外をスローします。
- timeout number (オプション)#
  
  最大時間 (ミリ秒単位)。デフォルトは 0 - タイムアウトなし。デフォルト値は、構成の actionTimeout オプションを使用するか、browserContext.setDefaultTimeout() または page.setDefaultTimeout() メソッドを使用して変更できます。

戻り値

Promise<void>#

focus

v1.9 で追加

page.focus

非推奨

ロケーターベースの locator.focus() を代わりに使用してください。ロケーターの詳細をお読みください。

このメソッドは、selector を持つ要素を取得し、それにフォーカスします。selector に一致する要素がない場合、メソッドは一致する要素が DOM に表示されるまで待機します。

使用法

await page.focus(selector);
await page.focus(selector, options);

引数

selector string #

要素を検索するためのセレクター。セレクターに一致する要素が複数ある場合は、最初の要素が使用されます。
options Object (オプション)
- strict boolean (オプション)追加: v1.14#
  
  true の場合、この呼び出しでは、セレクターが単一の要素に解決される必要があります。指定されたセレクターが複数の要素に解決される場合、呼び出しは例外をスローします。
- timeout number (オプション)#
  
  最大時間 (ミリ秒単位)。デフォルトは 0 - タイムアウトなし。デフォルト値は、構成の actionTimeout オプションを使用するか、browserContext.setDefaultTimeout() または page.setDefaultTimeout() メソッドを使用して変更できます。

戻り値

Promise<void>#

getAttribute

v1.9 で追加

page.getAttribute

非推奨

ロケーターベースの locator.getAttribute() を代わりに使用してください。ロケーターの詳細をお読みください。

要素の属性値を返します。

使用法

await page.getAttribute(selector, name);
await page.getAttribute(selector, name, options);

引数

selector string #

要素を検索するためのセレクター。セレクターに一致する要素が複数ある場合は、最初の要素が使用されます。
name string #

値を取得する属性名。
options Object (オプション)
- strict boolean (オプション)追加: v1.14#
  
  true の場合、この呼び出しでは、セレクターが単一の要素に解決される必要があります。指定されたセレクターが複数の要素に解決される場合、呼び出しは例外をスローします。
- timeout number (オプション)#
  
  最大時間 (ミリ秒単位)。デフォルトは 0 - タイムアウトなし。デフォルト値は、構成の actionTimeout オプションを使用するか、browserContext.setDefaultTimeout() または page.setDefaultTimeout() メソッドを使用して変更できます。

戻り値

Promise<null | string>#

hover

v1.9 で追加

page.hover

非推奨

ロケーターベースの locator.hover() を代わりに使用してください。ロケーターの詳細をお読みください。

このメソッドは、selector に一致する要素にホバーするために、以下の手順を実行します。

selector に一致する要素を見つけます。存在しない場合は、一致する要素が DOM にアタッチされるまで待機します。
actionability チェックが force オプションが設定されていない限り、一致した要素に対して実行されるのを待ちます。チェック中に要素がデタッチされた場合、アクション全体が再試行されます。
必要に応じて、要素をビューにスクロールします。
page.mouse を使用して、要素の中央、または指定された position にホバーします。

使用法

await page.hover(selector);
await page.hover(selector, options);

引数

selector string #

要素を検索するためのセレクター。セレクターに一致する要素が複数ある場合は、最初の要素が使用されます。
options Object (オプション)
- force boolean (オプション)#
  
  アクション可能性チェックをバイパスするかどうか。デフォルトは false です。
- modifiers Array<"Alt" | "Control" | "ControlOrMeta" | "Meta" | "Shift"> (オプション)#
  
  押す修飾キー。操作中にこれらの修飾キーのみが押されていることを確認し、その後、現在の修飾キーを復元します。指定しない場合、現在押されている修飾キーが使用されます。"ControlOrMeta" は、Windows および Linux では "Control" に、macOS では "Meta" に解決されます。
- noWaitAfter boolean (オプション)追加バージョン: v1.28#
  
  非推奨
  このオプションは効果がありません。
  
  このオプションは効果がありません。
- position Object (オプション)#
  - x number
  - y number
  要素のパディングボックスの左上隅を基準に使用するポイント。指定しない場合は、要素の可視点の一部を使用します。
- strict boolean (オプション)追加: v1.14#
  
  true の場合、この呼び出しでは、セレクターが単一の要素に解決される必要があります。指定されたセレクターが複数の要素に解決される場合、呼び出しは例外をスローします。
- timeout number (オプション)#
  
  最大時間 (ミリ秒単位)。デフォルトは 0 - タイムアウトなし。デフォルト値は、構成の actionTimeout オプションを使用するか、browserContext.setDefaultTimeout() または page.setDefaultTimeout() メソッドを使用して変更できます。
- trial boolean (オプション)追加: v1.11#
  
  設定すると、このメソッドは actionability チェックのみを実行し、アクションをスキップします。デフォルトは false です。要素がアクションを実行する準備ができるまで待機する場合に便利です。キーボード modifiers は、それらのキーが押されたときにのみ表示される要素をテストできるように、trial に関係なく押されることに注意してください。

戻り値

Promise<void>#

innerHTML

v1.9 で追加

page.innerHTML

非推奨

ロケーターベースの locator.innerHTML() を代わりに使用してください。ロケーターの詳細をお読みください。

element.innerHTML を返します。

使用法

await page.innerHTML(selector);
await page.innerHTML(selector, options);

引数

selector string #

要素を検索するためのセレクター。セレクターに一致する要素が複数ある場合は、最初の要素が使用されます。
options Object (オプション)
- strict boolean (オプション)追加: v1.14#
  
  true の場合、この呼び出しでは、セレクターが単一の要素に解決される必要があります。指定されたセレクターが複数の要素に解決される場合、呼び出しは例外をスローします。
- timeout number (オプション)#
  
  最大時間 (ミリ秒単位)。デフォルトは 0 - タイムアウトなし。デフォルト値は、構成の actionTimeout オプションを使用するか、browserContext.setDefaultTimeout() または page.setDefaultTimeout() メソッドを使用して変更できます。

戻り値

Promise<string>#

innerText

v1.9 で追加

page.innerText

非推奨

ロケーターベースの locator.innerText() を代わりに使用してください。ロケーターの詳細をお読みください。

element.innerText を返します。

使用法

await page.innerText(selector);
await page.innerText(selector, options);

引数

selector string #

要素を検索するためのセレクター。セレクターに一致する要素が複数ある場合は、最初の要素が使用されます。
options Object (オプション)
- strict boolean (オプション)追加: v1.14#
  
  true の場合、この呼び出しでは、セレクターが単一の要素に解決される必要があります。指定されたセレクターが複数の要素に解決される場合、呼び出しは例外をスローします。
- timeout number (オプション)#
  
  最大時間 (ミリ秒単位)。デフォルトは 0 - タイムアウトなし。デフォルト値は、構成の actionTimeout オプションを使用するか、browserContext.setDefaultTimeout() または page.setDefaultTimeout() メソッドを使用して変更できます。

戻り値

Promise<string>#

inputValue

追加: v1.13

page.inputValue

非推奨

ロケーターベースの locator.inputValue() を代わりに使用してください。ロケーターの詳細をお読みください。

選択された <input>、<textarea>、または <select> 要素の input.value を返します。

入力要素以外の場合は例外をスローします。ただし、要素が関連付けられた control を持つ <label> 要素内にある場合、コントロールの値を返します。

使用法

await page.inputValue(selector);
await page.inputValue(selector, options);

引数

selector string #

要素を検索するためのセレクター。セレクターに一致する要素が複数ある場合は、最初の要素が使用されます。
options Object (オプション)
- strict boolean (オプション)追加: v1.14#
  
  true の場合、この呼び出しでは、セレクターが単一の要素に解決される必要があります。指定されたセレクターが複数の要素に解決される場合、呼び出しは例外をスローします。
- timeout number (オプション)#
  
  最大時間 (ミリ秒単位)。デフォルトは 0 - タイムアウトなし。デフォルト値は、構成の actionTimeout オプションを使用するか、browserContext.setDefaultTimeout() または page.setDefaultTimeout() メソッドを使用して変更できます。

戻り値

Promise<string>#

isChecked

v1.9 で追加

page.isChecked

非推奨

ロケーターベースの locator.isChecked() を代わりに使用してください。ロケーターの詳細をお読みください。

要素がチェックされているかどうかを返します。要素がチェックボックスまたはラジオ入力でない場合は例外をスローします。

使用法

await page.isChecked(selector);
await page.isChecked(selector, options);

引数

selector string #

要素を検索するためのセレクター。セレクターに一致する要素が複数ある場合は、最初の要素が使用されます。
options Object (オプション)
- strict boolean (オプション)追加: v1.14#
  
  true の場合、この呼び出しでは、セレクターが単一の要素に解決される必要があります。指定されたセレクターが複数の要素に解決される場合、呼び出しは例外をスローします。
- timeout number (オプション)#
  
  最大時間 (ミリ秒単位)。デフォルトは 0 - タイムアウトなし。デフォルト値は、構成の actionTimeout オプションを使用するか、browserContext.setDefaultTimeout() または page.setDefaultTimeout() メソッドを使用して変更できます。

戻り値

Promise<boolean>#

isDisabled

v1.9 で追加

page.isDisabled

非推奨

ロケーターベースの locator.isDisabled() を代わりに使用してください。ロケーターの詳細をお読みください。

要素が無効になっているかどうかを返します。enabled の反対です。

使用法

await page.isDisabled(selector);
await page.isDisabled(selector, options);

引数

selector string #

要素を検索するためのセレクター。セレクターに一致する要素が複数ある場合は、最初の要素が使用されます。
options Object (オプション)
- strict boolean (オプション)追加: v1.14#
  
  true の場合、この呼び出しでは、セレクターが単一の要素に解決される必要があります。指定されたセレクターが複数の要素に解決される場合、呼び出しは例外をスローします。
- timeout number (オプション)#
  
  最大時間 (ミリ秒単位)。デフォルトは 0 - タイムアウトなし。デフォルト値は、構成の actionTimeout オプションを使用するか、browserContext.setDefaultTimeout() または page.setDefaultTimeout() メソッドを使用して変更できます。

戻り値

Promise<boolean>#

isEditable

v1.9 で追加

page.isEditable

非推奨

ロケーターベースの locator.isEditable() を代わりに使用してください。ロケーターの詳細をお読みください。

要素が editable かどうかを返します。

使用法

await page.isEditable(selector);
await page.isEditable(selector, options);

引数

selector string #

要素を検索するためのセレクター。セレクターに一致する要素が複数ある場合は、最初の要素が使用されます。
options Object (オプション)
- strict boolean (オプション)追加: v1.14#
  
  true の場合、この呼び出しでは、セレクターが単一の要素に解決される必要があります。指定されたセレクターが複数の要素に解決される場合、呼び出しは例外をスローします。
- timeout number (オプション)#
  
  最大時間 (ミリ秒単位)。デフォルトは 0 - タイムアウトなし。デフォルト値は、構成の actionTimeout オプションを使用するか、browserContext.setDefaultTimeout() または page.setDefaultTimeout() メソッドを使用して変更できます。

戻り値

Promise<boolean>#

isEnabled

v1.9 で追加

page.isEnabled

非推奨

ロケーターベースの locator.isEnabled() を代わりに使用してください。ロケーターの詳細をお読みください。

要素が enabled かどうかを返します。

使用法

await page.isEnabled(selector);
await page.isEnabled(selector, options);

引数

selector string #

要素を検索するためのセレクター。セレクターに一致する要素が複数ある場合は、最初の要素が使用されます。
options Object (オプション)
- strict boolean (オプション)追加: v1.14#
  
  true の場合、この呼び出しでは、セレクターが単一の要素に解決される必要があります。指定されたセレクターが複数の要素に解決される場合、呼び出しは例外をスローします。
- timeout number (オプション)#
  
  最大時間 (ミリ秒単位)。デフォルトは 0 - タイムアウトなし。デフォルト値は、構成の actionTimeout オプションを使用するか、browserContext.setDefaultTimeout() または page.setDefaultTimeout() メソッドを使用して変更できます。

戻り値

Promise<boolean>#

isHidden

v1.9 で追加

page.isHidden

非推奨

ロケーターベースの locator.isHidden() を代わりに使用してください。ロケーターの詳細をお読みください。

要素が非表示かどうかを返します。visible の反対です。要素に一致しない selector は非表示と見なされます。

使用法

await page.isHidden(selector);
await page.isHidden(selector, options);

引数

selector string #

要素を検索するためのセレクター。セレクターに一致する要素が複数ある場合は、最初の要素が使用されます。
options Object (オプション)
- strict boolean (オプション)追加: v1.14#
  
  true の場合、この呼び出しでは、セレクターが単一の要素に解決される必要があります。指定されたセレクターが複数の要素に解決される場合、呼び出しは例外をスローします。
- timeout number (オプション)#
  
  非推奨
  このオプションは無視されます。page.isHidden() は要素が非表示になるのを待たずに、すぐに戻ります。

戻り値

Promise<boolean>#

isVisible

v1.9 で追加

page.isVisible

非推奨

ロケーターベースの locator.isVisible() を代わりに使用してください。ロケーターの詳細をお読みください。

要素が表示されているかどうかを返します。selectorに一致する要素がない場合、非表示とみなされます。

使用法

await page.isVisible(selector);
await page.isVisible(selector, options);

引数

selector 文字列 #

要素を検索するためのセレクター。セレクターに一致する要素が複数ある場合は、最初の要素が使用されます。
options Object (オプション)
- strict boolean (オプション)追加: v1.14#
  
  true の場合、この呼び出しでは、セレクターが単一の要素に解決される必要があります。指定されたセレクターが複数の要素に解決される場合、呼び出しは例外をスローします。
- timeout 数値 (オプション)#
  
  非推奨
  このオプションは無視されます。page.isVisible()は要素が表示されるのを待たずに、すぐに戻ります。

戻り値

Promise<boolean>#

press

v1.9 で追加

page.press

非推奨

代わりにロケーターベースのlocator.press()を使用してください。ロケーターの詳細をお読みください。

要素にフォーカスし、keyboard.down()とkeyboard.up()を使用します。

keyは、意図されたkeyboardEvent.keyの値、またはテキストを生成する単一の文字を指定できます。key値のスーパーセットはこちらにあります。キーの例は次のとおりです。

F1 - F12、Digit0- Digit9、KeyA- KeyZ、Backquote、Minus、Equal、Backslash、Backspace、Tab、Delete、Escape、ArrowDown、End、Enter、Home、Insert、PageDown、PageUp、ArrowRight、ArrowUpなど。

次の修飾子ショートカットもサポートされています：Shift、Control、Alt、Meta、ShiftLeft、ControlOrMeta。ControlOrMetaは、WindowsとLinuxではControl、macOSではMetaに解決されます。

Shiftキーを押しながらにすると、keyに対応するテキストが大文字で入力されます。

keyが1文字の場合、大文字と小文字が区別されるため、aとAの値はそれぞれ異なるテキストを生成します。

key: "Control+o"、key: "Control++、key: "Control+Shift+T"のようなショートカットもサポートされています。修飾子付きで指定すると、後続のキーが押されている間、修飾子が押されたままになります。

使用法

const page = await browser.newPage();
await page.goto('https://keycode.info');
await page.press('body', 'A');
await page.screenshot({ path: 'A.png' });
await page.press('body', 'ArrowLeft');
await page.screenshot({ path: 'ArrowLeft.png' });
await page.press('body', 'Shift+O');
await page.screenshot({ path: 'O.png' });
await browser.close();

引数

selector 文字列 #

要素を検索するためのセレクター。セレクターに一致する要素が複数ある場合は、最初の要素が使用されます。
key 文字列 #

押すキーの名前、または生成する文字（ArrowLeftやaなど）。
options Object (オプション)
- delay 数値 (オプション)#
  
  keydownとkeyupの間隔（ミリ秒単位）。デフォルトは0です。
- noWaitAfter 真偽値 (オプション)#
  
  非推奨
  このオプションは将来、デフォルトで true になります。
  
  ナビゲーションを開始するアクションは、これらのナビゲーションが発生し、ページが読み込みを開始するのを待機しています。このフラグを設定することで、待機をオプトアウトできます。このオプションが必要になるのは、アクセスできないページにナビゲートする場合などの例外的なケースのみです。デフォルトは false です。
- strict boolean (オプション)追加: v1.14#
  
  true の場合、この呼び出しでは、セレクターが単一の要素に解決される必要があります。指定されたセレクターが複数の要素に解決される場合、呼び出しは例外をスローします。
- timeout 数値 (オプション)#
  
  最大時間 (ミリ秒単位)。デフォルトは 0 - タイムアウトなし。デフォルト値は、構成の actionTimeout オプションを使用するか、browserContext.setDefaultTimeout() または page.setDefaultTimeout() メソッドを使用して変更できます。

戻り値

Promise<void>#

selectOption

v1.9 で追加

page.selectOption

非推奨

代わりにロケーターベースのlocator.selectOption()を使用してください。ロケーターの詳細をお読みください。

このメソッドは、selectorに一致する要素を待ち、操作性のチェックを待ち、指定されたすべてのオプションが<select>要素に存在することを確認し、これらのオプションを選択します。

ターゲット要素が<select>要素でない場合、このメソッドはエラーをスローします。ただし、要素が、関連付けられたcontrolを持つ<label>要素内にある場合、代わりにcontrolが使用されます。

正常に選択されたオプション値の配列を返します。

指定されたすべてのオプションが選択されると、changeイベントとinputイベントをトリガーします。

使用法

// Single selection matching the value or label
page.selectOption('select#colors', 'blue');

// single selection matching the label
page.selectOption('select#colors', { label: 'Blue' });

// multiple selection
page.selectOption('select#colors', ['red', 'green', 'blue']);

引数

selector 文字列 #

要素を検索するためのセレクター。セレクターに一致する要素が複数ある場合は、最初の要素が使用されます。
values null | 文字列 | ElementHandle | Array<文字列> | Object | Array<ElementHandle> | Array<Object>#
- value 文字列 (オプション)
  
  option.valueで一致させます。オプション。
- label 文字列 (オプション)
  
  option.labelで一致させます。オプション。
- index 数値 (オプション)
  
  インデックスで一致させます。オプション。
選択するオプション。<select>にmultiple属性がある場合、一致するすべてのオプションが選択されます。それ以外の場合は、渡されたオプションのいずれかに一致する最初のオプションのみが選択されます。文字列値は、値とラベルの両方に一致します。指定されたすべてのプロパティが一致する場合、オプションは一致すると見なされます。
options Object (オプション)
- force boolean (オプション)追加: v1.13#
  
  アクション可能性チェックをバイパスするかどうか。デフォルトは false です。
- noWaitAfter 真偽値 (オプション)#
  
  非推奨
  このオプションは効果がありません。
  
  このオプションは効果がありません。
- strict boolean (オプション)追加: v1.14#
  
  true の場合、この呼び出しでは、セレクターが単一の要素に解決される必要があります。指定されたセレクターが複数の要素に解決される場合、呼び出しは例外をスローします。
- timeout 数値 (オプション)#
  
  最大時間 (ミリ秒単位)。デフォルトは 0 - タイムアウトなし。デフォルト値は、構成の actionTimeout オプションを使用するか、browserContext.setDefaultTimeout() または page.setDefaultTimeout() メソッドを使用して変更できます。

戻り値

Promise<Array<文字列>>#

setChecked

追加: v1.15

page.setChecked

非推奨

代わりにロケーターベースのlocator.setChecked()を使用してください。ロケーターの詳細をお読みください。

このメソッドは、次の手順を実行して、selectorに一致する要素をチェックまたはチェック解除します。

selectorに一致する要素を見つけます。存在しない場合は、一致する要素がDOMにアタッチされるまで待ちます。
一致した要素がチェックボックスまたはラジオ入力であることを確認します。そうでない場合、このメソッドは例外をスローします。
要素がすでに正しいチェック状態になっている場合、このメソッドはすぐに戻ります。
操作性チェックがforceオプションが設定されていない限り、一致した要素に対して実行されるのを待ちます。チェック中に要素がデタッチされた場合、アクション全体が再試行されます。
必要に応じて、要素をビューにスクロールします。
page.mouse を使用して、要素の中央をクリックします。
要素がチェックまたはチェック解除されたことを確認します。そうでない場合、このメソッドは例外をスローします。

指定されたtimeout中にすべての手順が完了しなかった場合、このメソッドはTimeoutErrorをスローします。タイムアウトをゼロにすると、これは無効になります。

使用法

await page.setChecked(selector, checked);
await page.setChecked(selector, checked, options);

引数

selector 文字列 #

要素を検索するためのセレクター。セレクターに一致する要素が複数ある場合は、最初の要素が使用されます。
checked 真偽値 #

チェックボックスをチェックするかチェック解除するか。
options Object (オプション)
- force 真偽値 (オプション)#
  
  アクション可能性チェックをバイパスするかどうか。デフォルトは false です。
- noWaitAfter 真偽値 (オプション)#
  
  非推奨
  このオプションは効果がありません。
  
  このオプションは効果がありません。
- position Object (オプション)#
  - x number
  - y number
  要素のパディングボックスの左上隅を基準に使用するポイント。指定しない場合は、要素の可視点の一部を使用します。
- strict 真偽値 (オプション)#
  
  true の場合、この呼び出しでは、セレクターが単一の要素に解決される必要があります。指定されたセレクターが複数の要素に解決される場合、呼び出しは例外をスローします。
- timeout 数値 (オプション)#
  
  最大時間 (ミリ秒単位)。デフォルトは 0 - タイムアウトなし。デフォルト値は、構成の actionTimeout オプションを使用するか、browserContext.setDefaultTimeout() または page.setDefaultTimeout() メソッドを使用して変更できます。
- trial 真偽値 (オプション)#
  
  設定すると、このメソッドはアクション可能性チェックのみを実行し、アクションをスキップします。デフォルトは false です。アクションを実行せずに、要素がアクションの準備ができるまで待機するのに役立ちます。

戻り値

Promise<void>#

setInputFiles

v1.9 で追加

page.setInputFiles

非推奨

代わりにロケーターベースのlocator.setInputFiles()を使用してください。ロケーターの詳細をお読みください。

ファイル入力の値をこれらのファイルパスまたはファイルに設定します。filePathsの一部が相対パスである場合、それらは現在の作業ディレクトリを基準に解決されます。空の配列の場合、選択されたファイルをクリアします。[webkitdirectory]属性を持つ入力の場合、単一のディレクトリパスのみがサポートされます。

このメソッドは、selectorがinput要素を指すことを期待しています。ただし、要素が、関連付けられたcontrolを持つ<label>要素内にある場合、代わりにcontrolをターゲットにします。

使用法

await page.setInputFiles(selector, files);
await page.setInputFiles(selector, files, options);

引数

selector 文字列 #

要素を検索するためのセレクター。セレクターに一致する要素が複数ある場合は、最初の要素が使用されます。
files 文字列 | Array<文字列> | Object | Array<Object>#
- name 文字列
  
  ファイル名
- mimeType 文字列
  
  ファイルタイプ
- buffer Buffer
  
  ファイルコンテンツ
options Object (オプション)
- noWaitAfter 真偽値 (オプション)#
  
  非推奨
  このオプションは効果がありません。
  
  このオプションは効果がありません。
- strict boolean (オプション)追加: v1.14#
  
  true の場合、この呼び出しでは、セレクターが単一の要素に解決される必要があります。指定されたセレクターが複数の要素に解決される場合、呼び出しは例外をスローします。
- timeout 数値 (オプション)#
  
  最大時間 (ミリ秒単位)。デフォルトは 0 - タイムアウトなし。デフォルト値は、構成の actionTimeout オプションを使用するか、browserContext.setDefaultTimeout() または page.setDefaultTimeout() メソッドを使用して変更できます。

戻り値

Promise<void>#

tap

v1.9 で追加

page.tap

非推奨

代わりにロケーターベースのlocator.tap()を使用してください。ロケーターの詳細をお読みください。

このメソッドは、次の手順を実行して、selectorに一致する要素をタップします。

selectorに一致する要素を見つけます。存在しない場合は、一致する要素がDOMにアタッチされるまで待ちます。
操作性チェックがforceオプションが設定されていない限り、一致した要素に対して実行されるのを待ちます。チェック中に要素がデタッチされた場合、アクション全体が再試行されます。
必要に応じて、要素をビューにスクロールします。
page.touchscreenを使用して、要素の中央、または指定されたpositionをタップします。

注

page.tap()メソッドは、ブラウザコンテキストのhasTouchオプションがfalseの場合、例外をスローします。

使用法

await page.tap(selector);
await page.tap(selector, options);

引数

selector 文字列 #

要素を検索するためのセレクター。セレクターに一致する要素が複数ある場合は、最初の要素が使用されます。
options Object (オプション)
- force 真偽値 (オプション)#
  
  アクション可能性チェックをバイパスするかどうか。デフォルトは false です。
- modifiers Array<"Alt" | "Control" | "ControlOrMeta" | "Meta" | "Shift"> (オプション)#
  
  押す修飾キー。操作中にこれらの修飾キーのみが押されていることを確認し、その後、現在の修飾キーを復元します。指定しない場合、現在押されている修飾キーが使用されます。"ControlOrMeta" は、Windows および Linux では "Control" に、macOS では "Meta" に解決されます。
- noWaitAfter 真偽値 (オプション)#
  
  非推奨
  このオプションは効果がありません。
  
  このオプションは効果がありません。
- position Object (オプション)#
  - x number
  - y number
  要素のパディングボックスの左上隅を基準に使用するポイント。指定しない場合は、要素の可視点の一部を使用します。
- strict boolean (オプション)追加: v1.14#
  
  true の場合、この呼び出しでは、セレクターが単一の要素に解決される必要があります。指定されたセレクターが複数の要素に解決される場合、呼び出しは例外をスローします。
- timeout 数値 (オプション)#
  
  最大時間 (ミリ秒単位)。デフォルトは 0 - タイムアウトなし。デフォルト値は、構成の actionTimeout オプションを使用するか、browserContext.setDefaultTimeout() または page.setDefaultTimeout() メソッドを使用して変更できます。
- trial boolean (オプション)追加: v1.11#
  
  設定すると、このメソッドは actionability チェックのみを実行し、アクションをスキップします。デフォルトは false です。要素がアクションを実行する準備ができるまで待機する場合に便利です。キーボード modifiers は、それらのキーが押されたときにのみ表示される要素をテストできるように、trial に関係なく押されることに注意してください。

戻り値

Promise<void>#

textContent

v1.9 で追加

page.textContent

非推奨

代わりにロケーターベースのlocator.textContent()を使用してください。ロケーターの詳細をお読みください。

element.textContentを返します。

使用法

await page.textContent(selector);
await page.textContent(selector, options);

引数

selector 文字列 #

要素を検索するためのセレクター。セレクターに一致する要素が複数ある場合は、最初の要素が使用されます。
options Object (オプション)
- strict boolean (オプション)追加: v1.14#
  
  true の場合、この呼び出しでは、セレクターが単一の要素に解決される必要があります。指定されたセレクターが複数の要素に解決される場合、呼び出しは例外をスローします。
- timeout 数値 (オプション)#
  
  最大時間 (ミリ秒単位)。デフォルトは 0 - タイムアウトなし。デフォルト値は、構成の actionTimeout オプションを使用するか、browserContext.setDefaultTimeout() または page.setDefaultTimeout() メソッドを使用して変更できます。

戻り値

Promise<null | 文字列>#

type

v1.9 で追加

page.type

非推奨

ほとんどの場合、代わりにlocator.fill()を使用する必要があります。ページに特別なキーボード処理がある場合にのみ、キーを1つずつ押す必要があります。この場合は、locator.pressSequentially()を使用してください。

テキスト内の各文字に対して、keydown、keypress/input、およびkeyupイベントを送信します。page.typeは、きめ細かいキーボードイベントを送信するために使用できます。フォームフィールドに値を入力するには、page.fill()を使用してください。

ControlやArrowDownのような特殊キーを押すには、keyboard.press()を使用してください。

使用法

引数

selector 文字列 #

要素を検索するためのセレクター。セレクターに一致する要素が複数ある場合は、最初の要素が使用されます。
text 文字列 #

フォーカスされた要素に入力するテキスト。
options Object (オプション)
- delay 数値 (オプション)#
  
  キーを押す間隔（ミリ秒単位）。デフォルトは0です。
- noWaitAfter 真偽値 (オプション)#
  
  非推奨
  このオプションは効果がありません。
  
  このオプションは効果がありません。
- strict boolean (オプション)追加: v1.14#
  
  true の場合、この呼び出しでは、セレクターが単一の要素に解決される必要があります。指定されたセレクターが複数の要素に解決される場合、呼び出しは例外をスローします。
- timeout 数値 (オプション)#
  
  最大時間 (ミリ秒単位)。デフォルトは 0 - タイムアウトなし。デフォルト値は、構成の actionTimeout オプションを使用するか、browserContext.setDefaultTimeout() または page.setDefaultTimeout() メソッドを使用して変更できます。

戻り値

Promise<void>#

uncheck

v1.9 で追加

page.uncheck

非推奨

代わりにロケーターベースのlocator.uncheck()を使用してください。ロケーターの詳細をお読みください。

このメソッドは、次の手順を実行して、selectorに一致する要素をチェック解除します。

selectorに一致する要素を見つけます。存在しない場合は、一致する要素がDOMにアタッチされるまで待ちます。
一致した要素がチェックボックスまたはラジオ入力であることを確認します。そうでない場合、このメソッドは例外をスローします。要素がすでにチェック解除されている場合、このメソッドはすぐに戻ります。
操作性チェックがforceオプションが設定されていない限り、一致した要素に対して実行されるのを待ちます。チェック中に要素がデタッチされた場合、アクション全体が再試行されます。
必要に応じて、要素をビューにスクロールします。
page.mouse を使用して、要素の中央をクリックします。
要素がチェック解除されたことを確認します。そうでない場合、このメソッドは例外をスローします。

使用法

await page.uncheck(selector);
await page.uncheck(selector, options);

引数

selector 文字列 #

要素を検索するためのセレクター。セレクターに一致する要素が複数ある場合は、最初の要素が使用されます。
options Object (オプション)
- force 真偽値 (オプション)#
  
  アクション可能性チェックをバイパスするかどうか。デフォルトは false です。
- noWaitAfter 真偽値 (オプション)#
  
  非推奨
  このオプションは効果がありません。
  
  このオプションは効果がありません。
- position Object (オプション)追加: v1.11#
  - x number
  - y number
  要素のパディングボックスの左上隅を基準に使用するポイント。指定しない場合は、要素の可視点の一部を使用します。
- strict boolean (オプション)追加: v1.14#
  
  true の場合、この呼び出しでは、セレクターが単一の要素に解決される必要があります。指定されたセレクターが複数の要素に解決される場合、呼び出しは例外をスローします。
- timeout 数値 (オプション)#
  
  最大時間 (ミリ秒単位)。デフォルトは 0 - タイムアウトなし。デフォルト値は、構成の actionTimeout オプションを使用するか、browserContext.setDefaultTimeout() または page.setDefaultTimeout() メソッドを使用して変更できます。
- trial boolean (オプション)追加: v1.11#
  
  設定すると、このメソッドはアクション可能性チェックのみを実行し、アクションをスキップします。デフォルトは false です。アクションを実行せずに、要素がアクションの準備ができるまで待機するのに役立ちます。

戻り値

Promise<void>#

v1.9 で追加

page.waitForNavigation

非推奨

このメソッドは本質的に競合状態が発生しやすいため、代わりにpage.waitForURL()を使用してください。

メインフレームのナビゲーションを待ち、メインリソースのレスポンスを返します。複数のリダイレクトが発生した場合、ナビゲーションは最後のリダイレクトのレスポンスで解決されます。異なるアンカーへのナビゲーションやHistory APIの使用によるナビゲーションの場合、ナビゲーションはnullで解決されます。

使用法

これは、ページが新しいURLにナビゲートするか、リロードされるときに解決されます。これは、ページを間接的にナビゲートさせるコードを実行する場合に役立ちます。例：クリックターゲットには、setTimeoutからナビゲーションをトリガーするonclickハンドラーがあります。次の例を検討してください。

// Start waiting for navigation before clicking. Note no await.
const navigationPromise = page.waitForNavigation();
await page.getByText('Navigate after timeout').click();
await navigationPromise;

注

History APIを使用してURLを変更することは、ナビゲーションと見なされます。

引数

options Object (オプション)
- timeout 数値 (オプション)#
  
  操作の最大時間（ミリ秒単位）。デフォルトは 0 - タイムアウトなし。デフォルト値は、構成の navigationTimeout オプション、または browserContext.setDefaultNavigationTimeout()、browserContext.setDefaultTimeout()、page.setDefaultNavigationTimeout() または page.setDefaultTimeout() メソッドを使用して変更できます。
- url 文字列 | RegExp | 関数(URL):真偽値 (オプション)#
  
  ナビゲーションを待機中にマッチさせる glob パターン、正規表現パターン、または URL を受け取る述語。パラメーターがワイルドカード文字を含まない文字列の場合、メソッドは文字列と完全に一致する URL へのナビゲーションを待機することに注意してください。
- waitUntil "load" | "domcontentloaded" | "networkidle" | "commit" (オプション)#
  
  操作が成功したと見なすタイミング、デフォルトは load です。イベントは次のいずれかになります
  - 'domcontentloaded' - DOMContentLoaded イベントが発生したときに操作が完了したと見なします。
  - 'load' - load イベントが発生したときに操作が完了したと見なします。
  - 'networkidle' - 非推奨 ネットワーク接続が少なくとも 500 ms なくなったときに操作が完了したと見なします。このメソッドをテストに使用しないでください。代わりに、Web アサーションに依存して準備状態を評価してください。
  - 'commit' - ネットワークレスポンスが受信され、ドキュメントのロードが開始されたときに操作が完了したと見なします。

戻り値

Promise<null | Response>#

waitForSelector

v1.9 で追加

page.waitForSelector

非推奨

代わりに、可視性をアサートするウェブアサーションまたはロケーターベースのlocator.waitFor()を使用してください。ロケーターの詳細をお読みください。

selectorで指定された要素がstateオプションを満たすと戻ります。hiddenまたはdetachedを待機している場合はnullを返します。

注

Playwrightは、アクションを実行する前に要素が準備完了になるのを自動的に待ちます。Locatorオブジェクトとweb-firstアサーションを使用すると、コードはwait-for-selectorフリーになります。

selectorがstateオプション（DOMに表示/非表示になるか、可視/非表示になるか）を満たすのを待ちます。メソッドを呼び出した時点でselectorがすでに条件を満たしている場合、メソッドはすぐに戻ります。セレクターがtimeoutミリ秒の間、条件を満たさない場合、関数は例外をスローします。

使用法

このメソッドはナビゲーションをまたいで動作します。

const { chromium } = require('playwright');  // Or 'firefox' or 'webkit'.

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  for (const currentURL of ['https://google.com', 'https://bbc.com']) {
    await page.goto(currentURL);
    const element = await page.waitForSelector('img');
    console.log('Loaded image: ' + await element.getAttribute('src'));
  }
  await browser.close();
})();

引数

selector 文字列 #

クエリするセレクター。
options Object (オプション)
- state "attached" | "detached" | "visible" | "hidden" (オプション)#
  
  デフォルトは'visible'です。次のいずれかになります。
  - 'attached' - 要素がDOMに存在するのを待ちます。
  - 'detached' - 要素がDOMに存在しなくなるのを待ちます。
  - 'visible' - 要素に空でないバウンディングボックスがあり、visibility:hiddenがないのを待ちます。コンテンツがない要素やdisplay:noneの要素は空のバウンディングボックスを持ち、可視とは見なされないことに注意してください。
  - 'hidden' - 要素がDOMからデタッチされるか、空のバウンディングボックスを持つか、visibility:hiddenになるのを待ちます。これは'visible'オプションの反対です。
- strict boolean (オプション)追加: v1.14#
  
  true の場合、この呼び出しでは、セレクターが単一の要素に解決される必要があります。指定されたセレクターが複数の要素に解決される場合、呼び出しは例外をスローします。
- timeout 数値 (オプション)#
  
  最大時間 (ミリ秒単位)。デフォルトは 0 - タイムアウトなし。デフォルト値は、構成の actionTimeout オプションを使用するか、browserContext.setDefaultTimeout() または page.setDefaultTimeout() メソッドを使用して変更できます。

戻り値

Promise<null | ElementHandle>#

waitForTimeout

v1.9 で追加

page.waitForTimeout

非推奨

本番環境でタイムアウトを待つことは絶対にしないでください。時間を待つテストは本質的に不安定です。自動的に待機するLocatorアクションとウェブアサーションを使用してください。

指定されたtimeout（ミリ秒単位）を待ちます。

page.waitForTimeout() はデバッグ目的でのみ使用するようにしてください。実稼働環境でタイマーを使用するテストは不安定になる可能性があります。代わりに、ネットワークイベントやセレクターの可視化などのシグナルを使用してください。

使用法

// wait for 1 second
await page.waitForTimeout(1000);

引数

timeout number #

待機するタイムアウト

戻り値

Promise<void>#

メソッド​

addInitScript​

addLocatorHandler​

addScriptTag​

addStyleTag​

bringToFront​

close​

content​

context​

dragAndDrop​

emulateMedia​

evaluate​

evaluateHandle​

exposeBinding​

exposeFunction​

frame​

frameLocator​

frames​

getByAltText​

getByLabel​

getByPlaceholder​

getByRole​

getByTestId​

getByText​

getByTitle​

goBack​

goForward​

goto​

isClosed​

locator​

mainFrame​

opener​

pause​

pdf​

reload​

removeAllListeners​

removeLocatorHandler​

requestGC​

route​

routeFromHAR​

routeWebSocket​

screenshot​

setContent​

setDefaultNavigationTimeout​

setDefaultTimeout​

setExtraHTTPHeaders​

setViewportSize​

title​

unroute​

unrouteAll​

url​

video​

viewportSize​

waitForEvent​

waitForFunction​

waitForLoadState​

waitForRequest​

waitForResponse​

waitForURL​

workers​

プロパティ​

clock​

coverage​

keyboard​

mouse​

request​

touchscreen​

イベント​

on('close')​

on('console')​

on('crash')​

on('dialog')​

on('domcontentloaded')​

on('download')​

on('filechooser')​

on('frameattached')​

on('framedetached')​

on('framenavigated')​

on('load')​

on('pageerror')​

メソッド

addInitScript

addLocatorHandler

addScriptTag

addStyleTag

bringToFront

close

content

context

dragAndDrop

emulateMedia

evaluate

evaluateHandle

exposeBinding

exposeFunction

frame

frameLocator

frames

getByAltText

getByLabel

getByPlaceholder

getByRole

getByTestId

getByText

getByTitle

goBack

goForward

goto

isClosed

locator

mainFrame

opener

pause

pdf

reload

removeAllListeners

removeLocatorHandler

requestGC

route

routeFromHAR

routeWebSocket

screenshot

setContent

setDefaultNavigationTimeout

setDefaultTimeout

setExtraHTTPHeaders

setViewportSize

title

unroute

unrouteAll

url

video

viewportSize

waitForEvent

waitForFunction

waitForLoadState

waitForRequest

waitForResponse

waitForURL

workers

プロパティ

clock

coverage

keyboard

mouse

request

touchscreen

イベント

on('close')

on('console')

on('crash')

on('dialog')

on('domcontentloaded')

on('download')

on('filechooser')

on('frameattached')

on('framedetached')

on('framenavigated')

on('load')

on('pageerror')