アクション
`action` コマンドは、ウェブブラウザに仮想デバイス入力アクションを提供するための低レベルインターフェースです。
`scrollIntoView` や `doubleClick` などの高レベルコマンドに加えて、Actions API は、指定された入力デバイスが何をするかを正確に制御できます。WebdriverIO は、3 種類の入力ソースのインターフェースを提供します。
- キーボードデバイスのキー入力
- マウス、ペン、またはタッチデバイスのポインター入力
- スクロールホイールデバイスのホイール入力
すべてのアクションコマンドのチェーンは、アクションセットをトリガーするために `perform` を呼び出して完了する必要があります。これにより、アクションが解放され、イベントが発生します。 `true` を渡すことでこれをスキップできます(例: `browser.actions(...).perform(true)`)。
キー入力ソース
キー入力ソースは、キーボードタイプのデバイスに関連付けられた入力ソースです。 `key` タイプのパラメータを使用してトリガーできます。例:
browser.action('key')
以下のアクションをサポートする `KeyAction` オブジェクトを返します。
- `down(value: string)`: キーダウンアクションを生成します。
- `up(value: string)`: キーアップアクションを生成します。
- `pause(ms: number)`: 特定のティックの間、入力ソースが何もしないことを示します。
特殊文字
`Control`、`Page Up`、`Shift` などの特殊文字を使用する場合は、`webdriverio` パッケージから `Key` オブジェクトをインポートしてください。次のようにします。
import { Key } from 'webdriverio'
このオブジェクトを使用すると、目的の特殊文字のユニコード表現にアクセスできます。
ポインター入力ソース
ポインター入力ソースは、ポインタータイプの入力デバイスに関連付けられた入力ソースです。 `action` コマンドを呼び出すときにタイプを指定できます。例:
browser.action('pointer', {
parameters: { pointerType: 'mouse' } // "mouse" is default value, also possible: "pen" or "touch"
})
以下のアクションをサポートする `PointerAction` オブジェクトを返します。
- `down (button: 'left' | 'middle' | 'right')`: 単一のキーを押すアクションを作成します。
- `down (params: PointerActionParams)`: 詳細なパラメータを使用して単一のキーを押すアクションを作成します。
- `move (x: number, y: number)`: ポインターをビューポートから `x` および `y` ピクセル移動させるアクションを作成します。
- `move (params: PointerActionMoveParams)`: 指定された `origin` からポインターを `x` および `y` ピクセル移動させるアクションを作成します。 `origin` は、ポインターの現在の位置(例:「ポインター」)、ビューポート(例:「ビューポート」)、または特定の要素の中心として定義できます。
- `up (button: 'left' | 'middle' | 'right')`: 単一のキーを離すアクションを作成します。
- `up (params: PointerActionUpParams)`: 詳細なパラメータを使用して単一のキーを離すアクションを作成します。
- `cancel()`: このポインターの現在の入力をキャンセルするアクション。
- `pause(ms: number)`: 特定のティックの間、入力ソースが何もしないことを示します。
プロジェクトの型定義に、 `PointerActionParams` 、 `PointerActionMoveParams` 、 `PointerActionUpParams` パラメータタイプの詳細情報があります。
ホイール入力ソース
ホイール入力ソースは、ホイールタイプの入力デバイスに関連付けられた入力ソースです。
browser.action('wheel')
以下のアクションをサポートする `WheelAction` オブジェクトを返します。
- `scroll (params: ScrollParams)`: 指定された座標または起点にページをスクロールします。
- `pause(ms: number)`: 特定のティックの間、入力ソースが何もしないことを示します。
プロジェクトの型定義に、 `ScrollParams` パラメータタイプの詳細情報があります。
使用方法
browser.action()
例
it('drag and drop using pointer action command', async () => {
const origin = await $('#source')
const targetOrigin = await $('#target')
return browser.action('pointer')
.move({ duration: 0, origin, x: 0, y: 0 })
.down({ button: 0 }) // left button
.pause(10)
.move({ duration: 0, origin: targetOrigin })
.up({ button: 0 })
.perform()
});
import { Key } from 'webdriverio'
it('should emit key events using key action commands', async () => {
const elem = await $('input')
await elem.click() // make element active
await browser.action('key')
.down('f')
.down('o')
.down('o')
.up('f')
.up('o')
.up('o')
.perform()
console.log(await elem.getValue()) // returns "foo"
// copy value out of input element
await browser.action('key')
.down(Key.Ctrl).down('c')
.pause(10)
.up(Key.Ctrl).up('c')
.perform()
})
it('should scroll using wheel action commands', async () => {
console.log(await browser.execute(() => window.scrollY)) // returns 0
await browser.action('wheel').scroll({
deltaX: 0,
deltaY: 500,
duration: 200
}).perform()
console.log(await browser.execute(() => window.scrollY)) // returns 500
})