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のネイティブ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 関数 | 文字列 | オブジェクト #
- path 文字列 (オプション)
  
  JavaScriptファイルへのパス。pathが相対パスの場合、現在の作業ディレクトリからの相対パスとして解決されます。オプションです。
- content 文字列 (オプション)
  
  生のスクリプトコンテンツ。オプションです。
ページで評価されるスクリプト。
arg シリアライズ可能 (オプション)#

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 関数(Locator):Promise<オブジェクト>#

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

戻り値

Promise<void>#

addScriptTag

v1.9より前に追加

page.addScriptTag

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

使い方

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

引数

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

戻り値

Promise<ElementHandle>#

bringToFront

v1.9より前に追加

page.bringToFront

ページを前面に表示します（タブをアクティブ化します）。

使い方

await page.bringToFront();

戻り値

Promise<void>#

close

v1.9より前に追加

page.close

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

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

注

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

使い方

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

引数

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

戻り値

Promise<void>#

content

v1.9より前に追加

page.content

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

使い方

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 オブジェクト (オプション)
- 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 - タイムアウトなし。デフォルト値は、configのactionTimeoutオプションを使用するか、browserContext.setDefaultTimeout()またはpage.setDefaultTimeout()メソッドを使用して変更できます。
- trial boolean (オプション)#
  
  設定すると、このメソッドは実行可能性チェックのみを実行し、アクションをスキップします。デフォルトは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 オブジェクト (オプション)
- 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()に渡された関数がシリアライズ可能な値以外を返す場合、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を返す場合、それは待機されます。

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 オブジェクト (オプション)
- handle boolean (オプション)#
  
  非推奨
  このオプションは将来削除されます。
  
  引数を値渡しではなく、ハンドルとして渡すかどうか。ハンドルを渡す場合は、1つの引数のみがサポートされます。値渡しをする場合は、複数の引数がサポートされます。

戻り値

Promise<void>#

exposeFunction

v1.9より前に追加

page.exposeFunction

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

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 (オプション)
  
  iframeのname属性で指定されたフレーム名。省略可能です。
- url 文字列 | RegExp | 関数(URL):真偽値 （オプション）
  
  フレームの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 文字列 #

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

戻り値

FrameLocator #

frames

v1.9より前に追加

page.frames

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

使い方

page.frames();

戻り値

配列<Frame>#

getByAltText

追加: v1.27

page.getByAltText

altテキストで要素を検索できます。

使い方

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

<img alt='Playwright logo'>

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

引数

text 文字列 | RegExp #

要素を検索するテキスト。
options オブジェクト (オプション)
- exact 真偽値 （オプション）#
  
  完全一致を検索するかどうか: 大文字と小文字を区別し、文字列全体。デフォルトは 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 文字列 | RegExp #

要素を検索するテキスト。
options オブジェクト (オプション)
- exact 真偽値 （オプション）#
  
  完全一致を検索するかどうか: 大文字と小文字を区別し、文字列全体。デフォルトは 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 文字列 | RegExp #

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

要素を検索するテキスト。
options オブジェクト (オプション)
- exact 真偽値 （オプション）#
  
  完全一致を検索するかどうか: 大文字と小文字を区別し、文字列全体。デフォルトは 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 文字列 | RegExp #

要素を検索するテキスト。
options オブジェクト (オプション)
- exact 真偽値 （オプション）#
  
  完全一致を検索するかどうか: 大文字と小文字を区別し、文字列全体。デフォルトは false です。正規表現で検索する場合は無視されます。完全一致でも空白はトリムされることに注意してください。

戻り値

Locator #

goBack

v1.9より前に追加

page.goBack

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

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

使い方

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

引数

options オブジェクト (オプション)
- timeout 数値 （オプション）#
  
  操作の最大時間（ミリ秒単位）。デフォルトは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>#

goForward

v1.9より前に追加

page.goForward

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

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

使い方

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

引数

options オブジェクト (オプション)
- 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>#

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 オブジェクト (オプション)
- referer string (オプション)#
  
  Refererヘッダーの値。指定された場合、page.setExtraHTTPHeaders()によって設定されたRefererヘッダーの値よりも優先されます。
- 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>#

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 オブジェクト (オプション)
- has Locator (オプション)#
  
  この相対ロケーターに一致する要素を含むものに、メソッドの結果を絞り込みます。たとえば、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 (オプション)#
  
  指定されたテキストを内部、おそらく子要素または子孫要素に含む要素に一致します。stringが渡された場合、マッチングは大文字と小文字を区別せず、部分文字列を検索します。たとえば、"Playwright"は、<article><div>Playwright</div></article>に一致します。

戻り値

Locator #

mainFrame

v1.9より前に追加

page.mainFrame

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

使い方

page.mainFrame();

戻り値

Frame #

opener

v1.9より前に追加

page.opener

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

使い方

await page.opener();

戻り値

Promise<null | Page>#

pause

追加: v1.9

page.pause

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

一時停止中にセレクターを調べたり、手動でステップを実行したりできます。再開すると、一時停止した場所から元のスクリプトの実行が継続されます。

注

このメソッドでは、headlessオプションがfalseである、ヘッダーモードでPlaywrightを開始する必要があります。

使い方

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.5in x 11in
Legal：8.5in x 14in
Tabloid：11in x 17in
Ledger：17in x 11in
A0：33.1in x 46.8in
A1：23.4in x 33.1in
A2：16.54in x 23.4in
A3：11.7in x 16.54in
A4：8.27in x 11.7in
A5：5.83in x 8.27in
A6：4.13in x 5.83in

注

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

引数

options オブジェクト (オプション)
- 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 (オプション)#
  
  Webページのレンダリングのスケール。デフォルトは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 オブジェクト (オプション)
- 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 オブジェクト (オプション)
- 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によってインターセプトされたリクエストをインターセプトしません。この問題を参照してください。リクエストインターセプトを使用する場合は、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();

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

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 オブジェクト (オプション)
- times 数値 (オプション)追加: v1.15#
  
  ルートを使用する頻度。デフォルトでは毎回使用されます。

戻り値

Promise<void>#

routeFromHAR

追加: v1.23

page.routeFromHAR

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

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

使い方

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

引数

har string #

事前記録されたネットワークデータを含むHARファイルへのパス。pathが相対パスの場合、現在の作業ディレクトリからの相対パスとして解決されます。
options オブジェクト (オプション)
- 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 オブジェクト (オプション)
- 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 オブジェクト (オプション)
- 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()は、ページのサイズを変更します。多くのWebサイトは、電話のサイズが変わることを想定していないため、ページに移動する前にビューポートサイズを設定する必要があります。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 オブジェクト (オプション)
- 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

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

使い方

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

戻り値

Promise<Object>#

waitForFunction

v1.9より前に追加

page.waitForFunction

pageFunction が真の値を返すと戻ります。真の値の JSHandle に解決されます。

使い方

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

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 オブジェクト (オプション)
- 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 ms の間、ネットワーク接続がなくなるまで待ちます。このメソッドをテストに使用しないで、代わりに Web アサーションに依存して準備状態を評価してください。
options オブジェクト (オプション)
- 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 オブジェクト (オプション)
- 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 オブジェクト (オプション)
- 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 オブジェクト (オプション)
- 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 でのみ利用可能です。

ブラウザ固有のカバレッジ実装。詳細はカバレッジを参照してください。

使い方

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 などの console 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')

JavaScriptのダイアログ（alert、prompt、confirm、またはbeforeunloadなど）が表示されたときに発生します。リスナーは、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 オブジェクト (オプション)
- 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ヘルパーメソッド、またはウェブファーストアサーションを代わりに使用してください。

このメソッドは、ページ内で指定されたセレクターに一致する要素を検索し、その要素を最初の引数として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 オブジェクト (オプション)
- strict boolean (オプション)追加: v1.14#
  
  trueの場合、呼び出しでは、セレクターが単一の要素に解決される必要があります。指定されたセレクターが複数の要素に解決される場合、呼び出しは例外をスローします。

戻り値

Promise<Serializable>#

$$eval

追加: v1.9

page.$$eval

推奨されません

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

このメソッドは、ページ内で指定されたセレクターに一致するすべての要素を検索し、一致する要素の配列を最初の引数として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>#

accessibility

v1.9より前に追加

page.accessibility

非推奨

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

使い方

page.accessibility

型

アクセシビリティ

check

v1.9より前に追加

page.check

推奨されません

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

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

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

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

使い方

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

引数

selector string #

要素を検索するセレクター。セレクターを満たす要素が複数ある場合は、最初の要素が使用されます。
options オブジェクト (オプション)
- force boolean （オプション）#
  
  実行可能性のチェックをバイパスするかどうか。デフォルトはfalseです。
- noWaitAfter boolean （オプション）#
  
  非推奨
  このオプションは効果がありません。
  
  このオプションは効果がありません。
- position Object （オプション）追加: v1.11#
  - x number
  - y number
  要素のパディングボックスの左上隅を基準とした相対的なポイント。指定しない場合は、要素の可視ポイントが使用されます。
- strict boolean (オプション)追加: 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()を代わりに使用してください。ロケーターの詳細をご覧ください。

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

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

使い方

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

引数

selector string #

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

戻り値

Promise<void>#

dblclick

v1.9より前に追加

page.dblclick

推奨されません

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

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

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

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

注

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

使い方

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

引数

selector 文字列 #

要素を検索するセレクター。セレクターを満たす要素が複数ある場合は、最初の要素が使用されます。
options オブジェクト (オプション)
- button "left" | "right" | "middle" （オプション）#
  
  デフォルトはleftです。
- delay 数値 （オプション）#
  
  mousedownとmouseupの間の待ち時間（ミリ秒）。デフォルトは0です。
- force 真偽値 （オプション）#
  
  実行可能性のチェックをバイパスするかどうか。デフォルトはfalseです。
- modifiers 配列<"Alt" | "Control" | "ControlOrMeta" | "Meta" | "Shift"> （オプション）#
  
  押すモディファイアキー。操作中はこれらのモディファイアのみが押されるようにし、現在のモディファイアを元に戻します。指定しない場合、現在押されているモディファイアが使用されます。"ControlOrMeta"は、WindowsおよびLinuxでは"Control"、macOSでは"Meta"に解決されます。
- noWaitAfter 真偽値 （オプション）#
  
  非推奨
  このオプションは効果がありません。
  
  このオプションは効果がありません。
- position オブジェクト （オプション）#
  - x number
  - y number
  要素のパディングボックスの左上隅を基準とした相対的なポイント。指定しない場合は、要素の可視ポイントが使用されます。
- strict boolean (オプション)追加: v1.14#
  
  trueの場合、呼び出しでは、セレクターが単一の要素に解決される必要があります。指定されたセレクターが複数の要素に解決される場合、呼び出しは例外をスローします。
- timeout 数値 （オプション）#
  
  最大操作時間（ミリ秒）。デフォルトは0 - タイムアウトなし。デフォルト値は、configのactionTimeoutオプションを使用するか、browserContext.setDefaultTimeout()またはpage.setDefaultTimeout()メソッドを使用して変更できます。
- trial boolean （オプション）追加: v1.11#
  
  設定すると、このメソッドは操作可能性のチェックのみを実行し、アクションをスキップします。デフォルトは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 文字列 #

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

DOMイベントタイプ："click"、"dragstart"など。
eventInit 評価引数 （オプション）#

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

戻り値

Promise<void>#

fill

v1.9より前に追加

page.fill

推奨されません

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

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

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

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

使い方

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

引数

selector 文字列 #

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

<input>、<textarea>、または[contenteditable]要素に入力する値。
options オブジェクト (オプション)
- force 真偽値 （オプション）追加: v1.13#
  
  実行可能性のチェックをバイパスするかどうか。デフォルトはfalseです。
- noWaitAfter 真偽値 （オプション）#
  
  非推奨
  このオプションは効果がありません。
  
  このオプションは効果がありません。
- strict boolean (オプション)追加: v1.14#
  
  trueの場合、呼び出しでは、セレクターが単一の要素に解決される必要があります。指定されたセレクターが複数の要素に解決される場合、呼び出しは例外をスローします。
- timeout 数値 （オプション）#
  
  最大操作時間（ミリ秒）。デフォルトは0 - タイムアウトなし。デフォルト値は、configの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 文字列 #

要素を検索するセレクター。セレクターを満たす要素が複数ある場合は、最初の要素が使用されます。
options オブジェクト (オプション)
- strict boolean (オプション)追加: v1.14#
  
  trueの場合、呼び出しでは、セレクターが単一の要素に解決される必要があります。指定されたセレクターが複数の要素に解決される場合、呼び出しは例外をスローします。
- timeout 数値 （オプション）#
  
  最大操作時間（ミリ秒）。デフォルトは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 文字列 #

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

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

戻り値

Promise<null | 文字列>#

hover

v1.9より前に追加

page.hover

推奨されません

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

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

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

使い方

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

引数

selector 文字列 #

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

戻り値

Promise<void>#

innerHTML

v1.9より前に追加

page.innerHTML

推奨されません

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

element.innerHTMLを返します。

使い方

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

引数

selector 文字列 #

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

戻り値

Promise<boolean>#

isDisabled

v1.9より前に追加

page.isDisabled

推奨されません

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

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

使い方

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

引数

selector string #

要素を検索するセレクター。セレクターを満たす要素が複数ある場合は、最初の要素が使用されます。
options オブジェクト (オプション)
- strict boolean (オプション)追加: 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 オブジェクト (オプション)
- strict boolean (オプション)追加: 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 オブジェクト (オプション)
- strict boolean (オプション)追加: 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 オブジェクト (オプション)
- 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 string #

要素を検索するセレクター。セレクターを満たす要素が複数ある場合は、最初の要素が使用されます。
options オブジェクト (オプション)
- 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, etc.

次の修飾キーショートカットもサポートされています：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 文字列 #

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

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

戻り値

Promise<void>#

selectOption

v1.9より前に追加

page.selectOption

推奨されません

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

このメソッドは、selectorに一致する要素を待機し、操作性チェックを待機し、指定されたすべてのオプションが<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 文字列 #

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

戻り値

Promise<配列<文字列>>#

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

戻り値

Promise<void>#

setInputFiles

v1.9より前に追加

page.setInputFiles

推奨されません

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

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

このメソッドは、selectorがinput要素を指すことを想定しています。ただし、要素が関連するコントロールを持つ<label>要素内にある場合は、代わりにコントロールをターゲットにします。

使い方

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

引数

selector 文字列 #

要素を検索するセレクター。セレクターを満たす要素が複数ある場合は、最初の要素が使用されます。
files 文字列 | 配列<文字列> | オブジェクト | 配列<オブジェクト>#
- name 文字列
  
  ファイル名
- mimeType 文字列
  
  ファイルタイプ
- buffer Buffer
  
  ファイルの内容
options オブジェクト (オプション)
- noWaitAfter 真偽値 (省略可能)#
  
  非推奨
  このオプションは効果がありません。
  
  このオプションは効果がありません。
- strict boolean (オプション)追加: v1.14#
  
  trueの場合、呼び出しでは、セレクターが単一の要素に解決される必要があります。指定されたセレクターが複数の要素に解決される場合、呼び出しは例外をスローします。
- timeout 数値 (省略可能)#
  
  最大操作時間（ミリ秒）。デフォルトは0 - タイムアウトなし。デフォルト値は、configの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 オブジェクト (オプション)
- force 真偽値 (省略可能)#
  
  実行可能性のチェックをバイパスするかどうか。デフォルトはfalseです。
- modifiers 配列<"Alt" | "Control" | "ControlOrMeta" | "Meta" | "Shift"> (省略可能)#
  
  押すモディファイアキー。操作中はこれらのモディファイアのみが押されるようにし、現在のモディファイアを元に戻します。指定しない場合、現在押されているモディファイアが使用されます。"ControlOrMeta"は、WindowsおよびLinuxでは"Control"、macOSでは"Meta"に解決されます。
- noWaitAfter 真偽値 (省略可能)#
  
  非推奨
  このオプションは効果がありません。
  
  このオプションは効果がありません。
- position オブジェクト (省略可能)#
  - x number
  - y number
  要素のパディングボックスの左上隅を基準とした相対的なポイント。指定しない場合は、要素の可視ポイントが使用されます。
- strict boolean (オプション)追加: v1.14#
  
  trueの場合、呼び出しでは、セレクターが単一の要素に解決される必要があります。指定されたセレクターが複数の要素に解決される場合、呼び出しは例外をスローします。
- timeout 数値 (省略可能)#
  
  最大操作時間（ミリ秒）。デフォルトは0 - タイムアウトなし。デフォルト値は、configのactionTimeoutオプションを使用するか、browserContext.setDefaultTimeout()またはpage.setDefaultTimeout()メソッドを使用して変更できます。
- trial boolean （オプション）追加: v1.11#
  
  設定すると、このメソッドは操作可能性のチェックのみを実行し、アクションをスキップします。デフォルトは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 オブジェクト (オプション)
- strict boolean (オプション)追加: v1.14#
  
  trueの場合、呼び出しでは、セレクターが単一の要素に解決される必要があります。指定されたセレクターが複数の要素に解決される場合、呼び出しは例外をスローします。
- timeout 数値 (省略可能)#
  
  最大操作時間（ミリ秒）。デフォルトは0 - タイムアウトなし。デフォルト値は、configの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 オブジェクト (オプション)
- delay 数値 (省略可能)#
  
  キーを押す間隔をミリ秒単位で指定します。デフォルトは0です。
- noWaitAfter 真偽値 (省略可能)#
  
  非推奨
  このオプションは効果がありません。
  
  このオプションは効果がありません。
- strict boolean (オプション)追加: v1.14#
  
  trueの場合、呼び出しでは、セレクターが単一の要素に解決される必要があります。指定されたセレクターが複数の要素に解決される場合、呼び出しは例外をスローします。
- timeout 数値 (省略可能)#
  
  最大操作時間（ミリ秒）。デフォルトは0 - タイムアウトなし。デフォルト値は、configのactionTimeoutオプションを使用するか、browserContext.setDefaultTimeout()またはpage.setDefaultTimeout()メソッドを使用して変更できます。

戻り値

Promise<void>#

uncheck

v1.9より前に追加

page.uncheck

推奨されません

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

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

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

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

使い方

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

引数

selector 文字列 #

要素を検索するセレクター。セレクターを満たす要素が複数ある場合は、最初の要素が使用されます。
options オブジェクト (オプション)
- force 真偽値 (省略可能)#
  
  実行可能性のチェックをバイパスするかどうか。デフォルトはfalseです。
- noWaitAfter 真偽値 (省略可能)#
  
  非推奨
  このオプションは効果がありません。
  
  このオプションは効果がありません。
- position Object （オプション）追加: v1.11#
  - x number
  - y number
  要素のパディングボックスの左上隅を基準とした相対的なポイント。指定しない場合は、要素の可視ポイントが使用されます。
- strict boolean (オプション)追加: v1.14#
  
  trueの場合、呼び出しでは、セレクターが単一の要素に解決される必要があります。指定されたセレクターが複数の要素に解決される場合、呼び出しは例外をスローします。
- timeout 数値 (省略可能)#
  
  最大操作時間（ミリ秒）。デフォルトは0 - タイムアウトなし。デフォルト値は、configの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 オブジェクト (オプション)
- timeout 数値 (省略可能)#
  
  操作の最大時間（ミリ秒単位）。デフォルトは0 - タイムアウトなし。デフォルト値は、コンフィグのnavigationTimeoutオプション、またはbrowserContext.setDefaultNavigationTimeout()、browserContext.setDefaultTimeout()、page.setDefaultNavigationTimeout()、page.setDefaultTimeout()メソッドを使用して変更できます。
- url 文字列 | RegExp | 関数(URL):真偽値 (省略可能)#
  
  ナビゲーションを待機中に一致させるためのグロブパターン、正規表現パターン、または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 オブジェクト (オプション)
- 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 - タイムアウトなし。デフォルト値は、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 数値 #

待機するタイムアウト

戻り値

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