Page

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

この例では、ページを作成し、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クラスは、on、once、removeListenerなどのNodeのネイティブなEventEmitterメソッドを使用して処理できるさまざまなイベント（以下に説明）を発行します。

この例では、単一ページの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 (optional)
  
  JavaScriptファイルへのパス。path が相対パスの場合、現在の作業ディレクトリを基準に解決されます。オプションです。
- content string (optional)
  
  スクリプトの生のコンテンツ。オプションです。
ページで評価されるスクリプト。
arg Serializable (optional)#

スクリプトに渡すオプションの引数（関数を渡す場合にのみサポートされます）。

戻り値

Promise<void>#

addLocatorHandler

追加されたバージョン: v1.42

page.addLocatorHandler

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

このメソッドを使用すると、オーバーレイが表示されていることを検出したときにアクティブになる、ハンドラーと呼ばれる特別な関数を設定できます。ハンドラーの役割はオーバーレイを削除し、オーバーレイがないかのようにテストを続行できるようにすることです。

留意すべき点

オーバーレイが予測可能に表示される場合は、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>#

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

戻り値

Promise<void>#

addScriptTag

v1.9より前に追加

page.addScriptTag

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

使用法

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

引数

options Object (optional)
- content string (optional)#
  
  フレームに挿入される生のJavaScriptコンテンツ。
- path string (optional)#
  
  フレームに挿入されるJavaScriptファイルへのパス。pathが相対パスの場合、現在の作業ディレクトリを基準に解決されます。
- type string (optional)#
  
  スクリプトの種類。JavaScript ES6モジュールをロードするには、「module」を使用します。詳細については、scriptを参照してください。
- url string (optional)#
  
  追加するスクリプトの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 (optional)
- content string (optional)#
  
  フレームに挿入される生のCSSコンテンツ。
- path string (optional)#
  
  フレームに挿入されるCSSファイルへのパス。pathが相対パスの場合、現在の作業ディレクトリを基準に解決されます。
- url string (optional)#
  
  <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 (optional)
- reason string (optional)追加されたバージョン: v1.40#
  
  ページの閉鎖によって中断された操作に報告される理由。
- runBeforeUnload boolean (optional)#
  
  デフォルトは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 (optional)
- force boolean (optional)#
  
  アクション可能チェックをバイパスするかどうか。デフォルトはfalseです。
- noWaitAfter boolean (optional)#
  
  非推奨
  このオプションは効果がありません。
  
  このオプションは効果がありません。
- sourcePosition Object (optional)追加されたバージョン: v1.14#
  - x number
  - y number
  要素のパディングボックスの左上隅を基準としたこの点でソース要素をクリックします。指定しない場合、要素のいくつかの可視点が使用されます。
- strict boolean (optional)追加されたバージョン: v1.14#
  
  trueの場合、呼び出しはセレクターが単一の要素に解決されることを必要とします。指定されたセレクターが複数の要素に解決される場合、呼び出しは例外をスローします。
- targetPosition Object (optional)追加されたバージョン: v1.14#
  - x number
  - y number
  要素のパディングボックスの左上隅を基準としたこの点でターゲット要素にドロップします。指定しない場合、要素のいくつかの可視点が使用されます。
- timeout number (optional)#
  
  最大ミリ秒。デフォルトは0で、タイムアウトなし。デフォルト値は、configのactionTimeoutオプション、またはbrowserContext.setDefaultTimeout()またはpage.setDefaultTimeout()メソッドを使用して変更できます。
- trial boolean (optional)#
  
  設定されている場合、このメソッドはアクション可能性チェックのみを実行し、アクションはスキップします。デフォルトはfalseです。要素がアクションを実行する準備ができるまで、実行せずに待機するのに便利です。

戻り値

Promise<void>#

emulateMedia

v1.9より前に追加

page.emulateMedia

このメソッドは、media引数によってCSS media typeを、および/または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 (optional)
- colorScheme null | "light" | "dark" | "no-preference" (optional)追加バージョン: v1.9#
  
  prefers-colors-schemeメディア機能をエミュレートします。サポートされる値は'light'と'dark'です。nullを渡すと、カラースキームのエミュレーションが無効になります。'no-preference'は非推奨です。
- contrast null | "no-preference" | "more" (optional)追加バージョン: v1.51#
  
  'prefers-contrast'メディア機能をエミュレートします。サポートされる値は'no-preference'、'more'です。nullを渡すと、コントラストエミュレーションが無効になります。
- forcedColors null | "active" | "none" (optional)追加されたバージョン: v1.15#
  
  'forced-colors'メディア機能をエミュレートします。サポートされる値は'active'と'none'です。nullを渡すと、強制色エミュレーションが無効になります。
- media null | "screen" | "print" (optional)追加バージョン: v1.9#
  
  ページのCSSメディアタイプを変更します。許可される値は'screen'、'print'、およびnullのみです。nullを渡すと、CSSメディアエミュレーションが無効になります。
- reducedMotion null | "reduce" | "no-preference" (optional)追加日: 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 (optional)#

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 (optional)#

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

戻り値

Promise<JSHandle>#

exposeBinding

v1.9より前に追加

page.exposeBinding

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

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 #

ウィンドウオブジェクト上の関数の名前。
callback function #

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

戻り値

Promise<void>#

exposeFunction

v1.9より前に追加

page.exposeFunction

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

callbackがPromiseを返す場合、それが待機されます。

コンテキスト全体の公開関数については、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内の要素を選択できるフレームロケーターを作成できます。

使用法

次のスニペットは、IDがmy-frameのiframeにあるテキスト「Submit」を持つ要素を検索します（例: <iframe id="my-frame">）。

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 (optional)
- 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 (optional)
- 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 (optional)
- exact boolean (optional)#
  
  完全一致（大文字小文字を区別し、文字列全体）を見つけるかどうか。デフォルトはfalse。正規表現で特定する場合は無視されます。正確な一致でも空白はトリムされることに注意してください。

戻り値

Locator #

getByRole

追加バージョン: v1.27

page.getByRole

要素をそのARIAロール、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 (optional)
- checked boolean (optional)#
  
  通常、aria-checkedまたはネイティブの<input type=checkbox>コントロールによって設定される属性。
  
  aria-checkedの詳細。
- disabled boolean (optional)#
  
  通常、aria-disabledまたはdisabledによって設定される属性。
  
  注
  他のほとんどの属性とは異なり、disabledはDOM階層を介して継承されます。aria-disabledの詳細。
- exact boolean (オプション)追加バージョン: 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として使用されます。必要に応じて、selectors.setTestIdAttribute()を使用して別のテストID属性を設定できます。

// 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 (optional)
- exact boolean (optional)#
  
  完全一致（大文字小文字を区別し、文字列全体）を見つけるかどうか。デフォルトはfalse。正規表現で特定する場合は無視されます。正確な一致でも空白はトリムされることに注意してください。

戻り値

Locator #

詳細

テキストによる一致は、厳密な一致であっても常に空白を正規化します。例えば、複数のスペースを1つにまとめ、改行をスペースに変換し、先頭と末尾の空白を無視します。

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

getByTitle

追加バージョン: v1.27

page.getByTitle

要素をそのタイトル属性で特定できます。

使用法

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

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

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

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

引数

text string | RegExp #

要素を特定するためのテキスト。
options Object (optional)
- exact boolean (optional)#
  
  完全一致（大文字小文字を区別し、文字列全体）を見つけるかどうか。デフォルトはfalse。正規表現で特定する場合は無視されます。正確な一致でも空白はトリムされることに注意してください。

戻り値

Locator #

goBack

v1.9より前に追加

page.goBack

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

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

使用法

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

引数

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

戻り値

Promise<null | Response>#

goForward

v1.9より前に追加

page.goForward

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

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

使用法

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

引数

options Object (optional)
- timeout number (optional)#
  
  最大操作時間（ミリ秒）。デフォルトは0で、タイムアウトなし。デフォルト値は、configのnavigationTimeoutオプション、またはbrowserContext.setDefaultNavigationTimeout()、browserContext.setDefaultTimeout()、page.setDefaultNavigationTimeout()、またはpage.setDefaultTimeout()メソッドを使用して変更できます。
- waitUntil "load" | "domcontentloaded" | "networkidle" | "commit" (optional)#
  
  操作が成功したと見なすタイミング。デフォルトはloadです。イベントは次のいずれかです。
  - 'domcontentloaded' - DOMContentLoadedイベントが発火したときに操作が終了したと見なします。
  - 'load' - loadイベントが発火したときに操作が終了したと見なします。
  - 'networkidle' - 推奨されません 少なくとも500ミリ秒間ネットワーク接続がないときに操作が終了したと見なします。テストにはこのメソッドを使用せず、代わりに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 (optional)
- referer string (optional)#
  
  Refererヘッダー値。提供された場合、page.setExtraHTTPHeaders()によって設定されたrefererヘッダー値よりも優先されます。
- timeout number (optional)#
  
  最大操作時間（ミリ秒）。デフォルトは0で、タイムアウトなし。デフォルト値は、configのnavigationTimeoutオプション、またはbrowserContext.setDefaultNavigationTimeout()、browserContext.setDefaultTimeout()、page.setDefaultNavigationTimeout()、またはpage.setDefaultTimeout()メソッドを使用して変更できます。
- waitUntil "load" | "domcontentloaded" | "networkidle" | "commit" (optional)#
  
  操作が成功したと見なすタイミング。デフォルトはloadです。イベントは次のいずれかです。
  - 'domcontentloaded' - DOMContentLoadedイベントが発火したときに操作が終了したと見なします。
  - 'load' - loadイベントが発火したときに操作が終了したと見なします。
  - 'networkidle' - 推奨されません 少なくとも500ミリ秒間ネットワーク接続がないときに操作が終了したと見なします。テストにはこのメソッドを使用せず、代わりに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 (optional)
- 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 (オプション)追加バージョン: v1.33#
  
  内部ロケーターに一致する要素を含まない要素に一致します。内部ロケーターは外部ロケーターに対してクエリされます。例えば、divを持たないarticleは<article><span>Playwright</span></article>に一致します。
  
  外部ロケーターと内部ロケーターは同じフレームに属している必要があります。内部ロケーターにはFrameLocatorを含めることはできません。
- hasNotText string | RegExp (オプション)追加バージョン: 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はスクリプトの実行を停止し、ユーザーがページオーバーレイの「Resume」ボタンを押すか、DevToolsコンソールでplaywright.resume()を呼び出すのを待ちます。

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

注

このメソッドは、Playwrightがヘッドレスオプションを偽の値に設定したヘッドモードで起動されている必要があります。

使用法

await page.pause();

戻り値

Promise<void>#

pdf

v1.9より前に追加

page.pdf

PDFバッファを返します。

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

戻り値

Promise<Buffer>#

reload

v1.9より前に追加

page.reload

このメソッドは、ユーザーがブラウザの更新をトリガーしたかのように、現在のページをリロードします。メインリソース応答を返します。複数のリダイレクトの場合、ナビゲーションは最後のリダイレクトの応答で解決されます。

使用法

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

引数

options Object (optional)
- timeout number (optional)#
  
  最大操作時間（ミリ秒）。デフォルトは0で、タイムアウトなし。デフォルト値は、configのnavigationTimeoutオプション、またはbrowserContext.setDefaultNavigationTimeout()、browserContext.setDefaultTimeout()、page.setDefaultNavigationTimeout()、またはpage.setDefaultTimeout()メソッドを使用して変更できます。
- waitUntil "load" | "domcontentloaded" | "networkidle" | "commit" (optional)#
  
  操作が成功したと見なすタイミング。デフォルトはloadです。イベントは次のいずれかです。
  - 'domcontentloaded' - DOMContentLoadedイベントが発火したときに操作が終了したと見なします。
  - 'load' - loadイベントが発火したときに操作が終了したと見なします。
  - 'networkidle' - 推奨されません 少なくとも500ミリ秒間ネットワーク接続がないときに操作が終了したと見なします。テストにはこのメソッドを使用せず、代わりに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 (optional)
- 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() は、サービスワーカーによってインターセプトされたリクエストをインターセプトしません。この issue を参照してください。リクエストインターセプトを使用する際には、serviceWorkers を 'block' に設定してサービスワーカーを無効にすることをお勧めします。

注

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 (optional)
- times number (optional)追加されたバージョン: v1.15#
  
  ルートが使用される頻度。デフォルトでは毎回使用されます。

戻り値

Promise<void>#

routeFromHAR

追加日: v1.23

page.routeFromHAR

指定されている場合、ページで行われるネットワークリクエストはHARファイルから提供されます。HARからの再生について詳しくはこちらをご覧ください。

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

使用法

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

引数

har string #

事前に記録されたネットワークデータを含む HAR ファイルへのパス。path が相対パスの場合、現在の作業ディレクトリに対して解決されます。
options Object (optional)
- 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 からリプレイするときに使用されないサイズ、タイミング、ページ、クッキー、セキュリティ、およびその他の種類の 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 (optional)
- 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で、タイムアウトなし。デフォルト値は、configの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 (optional)
- timeout number (オプション)#
  
  最大操作時間（ミリ秒）。デフォルトは0で、タイムアウトなし。デフォルト値は、configのnavigationTimeoutオプション、またはbrowserContext.setDefaultNavigationTimeout()、browserContext.setDefaultTimeout()、page.setDefaultNavigationTimeout()、またはpage.setDefaultTimeout()メソッドを使用して変更できます。
- waitUntil "load" | "domcontentloaded" | "networkidle" | "commit" (オプション)#
  
  操作が成功したと見なすタイミング。デフォルトはloadです。イベントは次のいずれかです。
  - 'domcontentloaded' - DOMContentLoadedイベントが発火したときに操作が終了したと見なします。
  - 'load' - loadイベントが発火したときに操作が終了したと見なします。
  - 'networkidle' - 推奨されません 少なくとも500ミリ秒間ネットワーク接続がないときに操作が終了したと見なします。テストにはこのメソッドを使用せず、代わりに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 #

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

戻り値

Promise<void>#

url

v1.9より前に追加

page.url

使用法

page.url();

戻り値

string #

video

v1.9より前に追加

page.video

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

使用法

page.video();

戻り値

null | Video #

viewportSize

v1.9より前に追加

page.viewportSize

使用法

page.viewportSize();

戻り値

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

waitForEvent

v1.9より前に追加

page.waitForEvent

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

使用法

// 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
  
  イベントデータを受け取り、待機が解決されるべきときに真の値を返します。
- timeout number (optional)
  
  ミリ秒単位で待機する最大時間。デフォルトは 0 (タイムアウトなし) です。デフォルト値は、設定の actionTimeout オプション、または browserContext.setDefaultTimeout() または page.setDefaultTimeout() メソッドを使用して変更できます。
イベントを受け取る述語、またはオプションオブジェクトのいずれか。オプションです。
options Object (optional)
- predicate function (オプション)#
  
  イベントデータを受け取り、待機が解決されるべきときに真の値を返します。

戻り値

Promise<Object>#

waitForFunction

v1.9より前に追加

page.waitForFunction

pageFunction が真の値を返すと解決します。真の値の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 (optional)
- polling number | "raf" (オプション)#
  
  polling が 'raf' の場合、pageFunction は requestAnimationFrame コールバックで常に実行されます。polling が数値の場合、関数が実行されるミリ秒単位の間隔として扱われます。デフォルトは raf です。
- timeout number (オプション)#
  
  ミリ秒単位で待機する最大時間。デフォルトは 0 (タイムアウトなし) です。デフォルト値は、設定の 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 (optional)
- timeout number (オプション)#
  
  最大操作時間（ミリ秒）。デフォルトは0で、タイムアウトなし。デフォルト値は、configの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 (optional)
- 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 (optional)
- 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 #

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

戻り値

Promise<void>#

workers

v1.9より前に追加

page.workers

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

注

これにはサービスワーカーは含まれません

使用法

page.workers();

戻り値

Array<Worker>#

プロパティ

clock

追加されたバージョン: v1.45

page.clock

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

使用法

page.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」へのネットワークリクエストが完了し、そのレスポンスがポップアップで読み込みを開始したときに発生します。このネットワークリクエストをルーティング/リッスンしたい場合は、Page の同様のメソッドの代わりに、それぞれ browserContext.route() と browserContext.on('request') を使用してください。

// 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')

リクエストのレスポンスステータスとヘッダーが受信されたときに発行されます。成功したレスポンスの場合、イベントのシーケンスは 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 (optional)
- strict boolean (optional)追加されたバージョン: 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 ヘルパーメソッド、またはウェブファーストアサーションを使用してください。

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

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

使用法

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 (optional)
- strict boolean (optional)追加されたバージョン: v1.14#
  
  trueの場合、呼び出しはセレクターが単一の要素に解決されることを必要とします。指定されたセレクターが複数の要素に解決される場合、呼び出しは例外をスローします。

戻り値

Promise<Serializable>#

$$eval

追加バージョン: v1.9

page.$$eval

推奨されません

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

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

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

使用法

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

引数

selector string #

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

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

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

戻り値

Promise<Serializable>#

accessibility

v1.9より前に追加

page.accessibility

非推奨

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

使用法

page.accessibility

タイプ

Accessibility

check

v1.9より前に追加

page.check

推奨されません

代わりにロケーターベースの locator.check() を使用してください。ロケーターについて詳しくはこちらをご覧ください。

このメソッドは、以下の手順を実行してセレクターに一致する要素をチェックします。

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

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

使用法

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

引数

selector string #

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

戻り値

Promise<void>#

click

v1.9より前に追加

page.click

推奨されません

代わりに、ロケーターベースのlocator.click()を使用してください。ロケーターの詳細については、こちらをご覧ください。

このメソッドは、以下の手順を実行することで、セレクターに一致する要素をクリックします。

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

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

使用法

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

引数

selector string #

要素を検索するセレクター。セレクターを満たす要素が複数ある場合、最初のものが使用されます。
options Object (optional)
- 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 (optional)追加されたバージョン: v1.14#
  
  trueの場合、呼び出しはセレクターが単一の要素に解決されることを必要とします。指定されたセレクターが複数の要素に解決される場合、呼び出しは例外をスローします。
- timeout number (任意)#
  
  最大ミリ秒。デフォルトは0で、タイムアウトなし。デフォルト値は、configのactionTimeoutオプション、またはbrowserContext.setDefaultTimeout()またはpage.setDefaultTimeout()メソッドを使用して変更できます。
- trial boolean (オプション)追加されたバージョン: v1.11#
  
  設定すると、このメソッドはアクション実行可能性チェックのみを実行し、アクションはスキップします。デフォルトはfalseです。アクションを実行せずに要素がアクションの準備が整うまで待機するのに便利です。キーボードの修飾子は、それらのキーが押されたときにのみ表示される要素をテストできるように、trialに関係なく押されます。

戻り値

Promise<void>#

dblclick

v1.9より前に追加

page.dblclick

推奨されません

代わりに、ロケーターベースのlocator.dblclick()を使用してください。ロケーターの詳細については、こちらをご覧ください。

このメソッドは、以下の手順を実行することで、セレクターに一致する要素をダブルクリックします。

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

注

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

使用法

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

引数

selector string #

要素を検索するセレクター。セレクターを満たす要素が複数ある場合、最初のものが使用されます。
options Object (optional)
- 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 (optional)追加されたバージョン: v1.14#
  
  trueの場合、呼び出しはセレクターが単一の要素に解決されることを必要とします。指定されたセレクターが複数の要素に解決される場合、呼び出しは例外をスローします。
- timeout number (任意)#
  
  最大ミリ秒。デフォルトは0で、タイムアウトなし。デフォルト値は、configのactionTimeoutオプション、またはbrowserContext.setDefaultTimeout()またはpage.setDefaultTimeout()メソッドを使用して変更できます。
- trial boolean (オプション)追加されたバージョン: v1.11#
  
  設定すると、このメソッドはアクション実行可能性チェックのみを実行し、アクションはスキップします。デフォルトはfalseです。アクションを実行せずに要素がアクションの準備が整うまで待機するのに便利です。キーボードの修飾子は、それらのキーが押されたときにのみ表示される要素をテストできるように、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 (optional)
- strict boolean (optional)追加されたバージョン: v1.14#
  
  trueの場合、呼び出しはセレクターが単一の要素に解決されることを必要とします。指定されたセレクターが複数の要素に解決される場合、呼び出しは例外をスローします。
- timeout number (任意)#
  
  最大ミリ秒。デフォルトは0で、タイムアウトなし。デフォルト値は、configのactionTimeoutオプション、またはbrowserContext.setDefaultTimeout()またはpage.setDefaultTimeout()メソッドを使用して変更できます。

戻り値

Promise<void>#

fill

v1.9より前に追加

page.fill

推奨されません

代わりに、ロケーターベースのlocator.fill()を使用してください。ロケーターの詳細については、こちらをご覧ください。

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

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

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

使用法

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

引数

selector string #

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

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

戻り値

Promise<void>#

focus

v1.9より前に追加

page.focus

推奨されません

代わりに、ロケーターベースのlocator.focus()を使用してください。ロケーターの詳細については、こちらをご覧ください。

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

使用法

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

引数

selector string #

要素を検索するセレクター。セレクターを満たす要素が複数ある場合、最初のものが使用されます。
options Object (optional)
- strict boolean (optional)追加されたバージョン: v1.14#
  
  trueの場合、呼び出しはセレクターが単一の要素に解決されることを必要とします。指定されたセレクターが複数の要素に解決される場合、呼び出しは例外をスローします。
- timeout number (任意)#
  
  最大ミリ秒。デフォルトは0で、タイムアウトなし。デフォルト値は、configの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 (optional)
- strict boolean (optional)追加されたバージョン: v1.14#
  
  trueの場合、呼び出しはセレクターが単一の要素に解決されることを必要とします。指定されたセレクターが複数の要素に解決される場合、呼び出しは例外をスローします。
- timeout number (任意)#
  
  最大ミリ秒。デフォルトは0で、タイムアウトなし。デフォルト値は、configのactionTimeoutオプション、またはbrowserContext.setDefaultTimeout()またはpage.setDefaultTimeout()メソッドを使用して変更できます。

戻り値

Promise<null | string>#

hover

v1.9より前に追加

page.hover

推奨されません

代わりに、ロケーターベースのlocator.hover()を使用してください。ロケーターの詳細については、こちらをご覧ください。

このメソッドは、以下の手順を実行することで、セレクターに一致する要素にカーソルを合わせます。

セレクターに一致する要素を見つけます。一致する要素がない場合は、一致する要素がDOMにアタッチされるまで待機します。
forceオプションが設定されていない限り、一致した要素に対してアクション実行可能性チェックを待機します。チェック中に要素がデタッチされた場合、アクション全体が再試行されます。
必要に応じて要素を表示するためにスクロールします。
要素の中心、または指定されたpositionにカーソルを合わせるためにpage.mouseを使用します。

使用法

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

引数

selector string #

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

戻り値

Promise<string>#

inputValue

追加バージョン: v1.13

page.inputValue

推奨されません

代わりに、ロケーターベースのlocator.inputValue()を使用してください。ロケーターの詳細については、こちらをご覧ください。

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

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

使用法

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

引数

selector string #

要素を検索するセレクター。セレクターを満たす要素が複数ある場合、最初のものが使用されます。
options Object (optional)
- strict boolean (optional)追加されたバージョン: v1.14#
  
  trueの場合、呼び出しはセレクターが単一の要素に解決されることを必要とします。指定されたセレクターが複数の要素に解決される場合、呼び出しは例外をスローします。
- timeout number (任意)#
  
  最大ミリ秒。デフォルトは0で、タイムアウトなし。デフォルト値は、configの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 (optional)
- strict boolean (optional)追加されたバージョン: v1.14#
  
  trueの場合、呼び出しはセレクターが単一の要素に解決されることを必要とします。指定されたセレクターが複数の要素に解決される場合、呼び出しは例外をスローします。
- timeout number (任意)#
  
  最大ミリ秒。デフォルトは0で、タイムアウトなし。デフォルト値は、configの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 (optional)
- strict boolean (optional)追加されたバージョン: v1.14#
  
  trueの場合、呼び出しはセレクターが単一の要素に解決されることを必要とします。指定されたセレクターが複数の要素に解決される場合、呼び出しは例外をスローします。
- timeout number (任意)#
  
  最大ミリ秒。デフォルトは0で、タイムアウトなし。デフォルト値は、configのactionTimeoutオプション、またはbrowserContext.setDefaultTimeout()またはpage.setDefaultTimeout()メソッドを使用して変更できます。

戻り値

Promise<boolean>#

isEditable

v1.9より前に追加

page.isEditable

推奨されません

代わりに、ロケーターベースのlocator.isEditable()を使用してください。ロケーターの詳細については、こちらをご覧ください。

要素が編集可能かどうかを返します。

使用法

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

引数

selector string #

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

戻り値

Promise<boolean>#

isEnabled

v1.9より前に追加

page.isEnabled

推奨されません

代わりに、ロケーターベースのlocator.isEnabled()を使用してください。ロケーターの詳細については、こちらをご覧ください。

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

使用法

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

引数

selector string #

要素を検索するセレクター。セレクターを満たす要素が複数ある場合、最初のものが使用されます。
options Object (optional)
- strict boolean (optional)追加されたバージョン: v1.14#
  
  trueの場合、呼び出しはセレクターが単一の要素に解決されることを必要とします。指定されたセレクターが複数の要素に解決される場合、呼び出しは例外をスローします。
- timeout number (任意)#
  
  最大ミリ秒。デフォルトは0で、タイムアウトなし。デフォルト値は、configの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 (optional)
- strict boolean (optional)追加されたバージョン: 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 string #

要素を検索するセレクター。セレクターを満たす要素が複数ある場合、最初のものが使用されます。
options Object (optional)
- strict boolean (optional)追加されたバージョン: v1.14#
  
  trueの場合、呼び出しはセレクターが単一の要素に解決されることを必要とします。指定されたセレクターが複数の要素に解決される場合、呼び出しは例外をスローします。
- timeout number (任意)#
  
  非推奨
  このオプションは無視されます。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が一文字の場合、大文字と小文字を区別するため、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 string #

要素を検索するセレクター。セレクターを満たす要素が複数ある場合、最初のものが使用されます。
key string #

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

戻り値

Promise<void>#

selectOption

v1.9より前に追加

page.selectOption

推奨されません

代わりに、ロケーターベースのlocator.selectOption()を使用してください。ロケーターの詳細については、こちらをご覧ください。

このメソッドは、セレクターに一致する要素を待機し、アクション実行可能性チェックを待機し、指定されたすべてのオプションが<select>要素に存在し、それらのオプションを選択します。

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

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

提供されたすべてのオプションが選択されると、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 string #

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

戻り値

Promise<Array<string>>#

setChecked

追加されたバージョン: v1.15

page.setChecked

推奨されません

代わりに、ロケーターベースのlocator.setChecked()を使用してください。ロケーターの詳細については、こちらをご覧ください。

このメソッドは、以下の手順を実行することで、セレクターに一致する要素をチェックまたはアンチェックします。

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

使用法

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

引数

selector string #

要素を検索するセレクター。セレクターを満たす要素が複数ある場合、最初のものが使用されます。
checked boolean #

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

戻り値

Promise<void>#

setInputFiles

v1.9より前に追加

page.setInputFiles

推奨されません

代わりに、ロケーターベースのlocator.setInputFiles()を使用してください。ロケーターの詳細については、こちらをご覧ください。

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

このメソッドは、セレクターが入力要素を指すことを期待します。ただし、要素が関連付けられたコントロールを持つ<label>要素内にある場合は、代わりにコントロールをターゲットにします。

使用法

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

引数

selector string #

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

戻り値

Promise<void>#

tap

v1.9より前に追加

page.tap

推奨されません

代わりに、ロケーターベースのlocator.tap()を使用してください。ロケーターの詳細については、こちらをご覧ください。

このメソッドは、以下の手順を実行することで、セレクターに一致する要素をタップします。

セレクターに一致する要素を見つけます。一致する要素がない場合は、一致する要素がDOMにアタッチされるまで待機します。
forceオプションが設定されていない限り、一致した要素に対してアクション実行可能性チェックを待機します。チェック中に要素がデタッチされた場合、アクション全体が再試行されます。
必要に応じて要素を表示するためにスクロールします。
要素の中心、または指定されたpositionをタップするためにpage.touchscreenを使用します。

注

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

使用法

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

引数

selector string #

要素を検索するセレクター。セレクターを満たす要素が複数ある場合、最初のものが使用されます。
options Object (optional)
- 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 (optional)追加されたバージョン: v1.14#
  
  trueの場合、呼び出しはセレクターが単一の要素に解決されることを必要とします。指定されたセレクターが複数の要素に解決される場合、呼び出しは例外をスローします。
- timeout number (任意)#
  
  最大ミリ秒。デフォルトは0で、タイムアウトなし。デフォルト値は、configのactionTimeoutオプション、またはbrowserContext.setDefaultTimeout()またはpage.setDefaultTimeout()メソッドを使用して変更できます。
- trial boolean (オプション)追加されたバージョン: v1.11#
  
  設定すると、このメソッドはアクション実行可能性チェックのみを実行し、アクションはスキップします。デフォルトはfalseです。アクションを実行せずに要素がアクションの準備が整うまで待機するのに便利です。キーボードの修飾子は、それらのキーが押されたときにのみ表示される要素をテストできるように、trialに関係なく押されます。

戻り値

Promise<void>#

textContent

v1.9より前に追加

page.textContent

推奨されません

代わりに、ロケーターベースのlocator.textContent()を使用してください。ロケーターの詳細については、こちらをご覧ください。

element.textContentを返します。

使用法

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

引数

selector string #

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

戻り値

Promise<null | string>#

type

v1.9より前に追加

page.type

非推奨

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

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

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

使用法

引数

selector string #

要素を検索するセレクター。セレクターを満たす要素が複数ある場合、最初のものが使用されます。
text string #

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

戻り値

Promise<void>#

uncheck

v1.9より前に追加

page.uncheck

推奨されません

代わりに、ロケーターベースのlocator.uncheck()を使用してください。ロケーターの詳細については、こちらをご覧ください。

このメソッドは、以下の手順を実行することで、セレクターに一致する要素のチェックを外します。

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

使用法

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

引数

selector string #

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

戻り値

Promise<void>#

v1.9より前に追加

page.waitForNavigation

非推奨

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

メインフレームのナビゲーションを待機し、メインリソースのレスポンスを返します。複数のリダイレクトが発生した場合、ナビゲーションは最後のRリダイレクトのレスポンスで解決されます。異なるアンカーへのナビゲーションや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;

注

URLを変更するためのHistory APIの使用はナビゲーションと見なされます。

引数

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

戻り値

Promise<null | Response>#

waitForSelector

v1.9より前に追加

page.waitForSelector

推奨されません

代わりに、可視性をアサートするWebアサーションまたはロケーターベースのlocator.waitFor()を使用してください。ロケーターの詳細については、こちらをご覧ください。

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

注

Playwrightは、アクションを実行する前に要素が準備完了状態になるのを自動的に待機します。LocatorオブジェクトとWebファーストのアサーションを使用すると、コードでセレクターの待機が不要になります。

セレクターがstateオプションを満たすまで（DOMに表示/非表示になるか、可視/非表示になるまで）待機します。メソッド呼び出しの時点でセレクターがすでに条件を満たしている場合、メソッドはすぐに返します。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 string #

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

戻り値

Promise<null | ElementHandle>#

waitForTimeout

v1.9より前に追加

page.waitForTimeout

推奨されません

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

指定されたミリ秒単位の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')