action

Il comando action è un'interfaccia di basso livello per fornire azioni di input virtualizzate al browser web.

Oltre ai comandi di alto livello come scrollIntoView, doubleClick, l'API Actions fornisce un controllo granulare su esattamente ciò che i dispositivi di input designati possono fare. WebdriverIO fornisce un'interfaccia per 3 tipi di fonti di input:

• un input da tastiera per dispositivi di tipo tastiera
• un input puntatore per dispositivi mouse, penna o touch
• e input della rotella di scorrimento per dispositivi con rotella di scorrimento

Ogni catena di comandi di azione deve essere completata chiamando perform per attivare l'insieme di azioni. Questo fa sì che le azioni vengano rilasciate e gli eventi vengano generati. Puoi saltare questo passaggio passando true (ad esempio browser.actions(...).perform(true)).

informazione

Il supporto per questo comando e azioni specifiche può variare in base all'ambiente. I progressi dello sviluppo possono essere seguiti su wpt.fyi. Per i dispositivi mobili potresti voler utilizzare i comandi gestuali specifici di Appium su iOS e Android.

Fonte di input da tastiera

Una fonte di input da tastiera è una fonte di input associata a un dispositivo di tipo tastiera. Può essere attivata utilizzando il parametro di tipo key. Ad esempio:

browser.action('key')

Restituisce un oggetto KeyAction che supporta le seguenti azioni:

• down(value: string): genera un'azione di pressione del tasto
• up(value: string): genera un'azione di rilascio del tasto
• pause(ms: number): indica che una fonte di input non fa nulla durante un particolare tick

Caratteri speciali

Se desideri utilizzare caratteri speciali come ad esempio Control, Page Up o Shift, assicurati di importare l'oggetto Key dal pacchetto webdriverio in questo modo:

import { Key } from 'webdriverio'

L'oggetto ti consente di accedere alla rappresentazione unicode del carattere speciale desiderato.

Fonte di input puntatore

Una fonte di input puntatore è una fonte di input associata a un dispositivo di tipo puntatore. Il tipo può essere specificato quando si invoca il comando action, ad esempio:

browser.action('pointer', {
    parameters: { pointerType: 'mouse' } // "mouse" è il valore predefinito, possibili anche: "pen" o "touch"
})

Restituisce un oggetto PointerAction che supporta le seguenti azioni:

• down (button: 'left' | 'middle' | 'right'): crea un'azione per premere un singolo tasto
• down (params: PointerActionParams): crea un'azione per premere un singolo tasto con parametri dettagliati
• move (x: number, y: number): crea un'azione per spostare il puntatore di x e y pixel dal viewport
• move (params: PointerActionMoveParams): crea un'azione per spostare il puntatore di x e y pixel dall' origin specificata. L'origin può essere definita come la posizione corrente del puntatore (es. "pointer"), il viewport (es. "viewport") o il centro di un elemento specifico.
• up (button: 'left' | 'middle' | 'right'): crea un'azione per rilasciare un singolo tasto
• up (params: PointerActionUpParams): crea un'azione per rilasciare un singolo tasto con parametri dettagliati
• cancel(): un'azione che annulla l'input corrente di questo puntatore.
• pause(ms: number): indica che una fonte di input non fa nulla durante un particolare tick

Puoi trovare informazioni dettagliate sui tipi di parametro PointerActionParams, PointerActionMoveParams e PointerActionUpParams nella definizione dei tipi del progetto.

Fonte di input rotella

Una fonte di input rotella è una fonte di input associata a un dispositivo di tipo rotella.

browser.action('wheel')

Restituisce un oggetto WheelAction che supporta le seguenti azioni:

• scroll (params: ScrollParams): scorre una pagina verso coordinate o origine date
• pause(ms: number): indica che una fonte di input non fa nulla durante un particolare tick

Puoi trovare informazioni dettagliate sul tipo di parametro ScrollParams nella definizione dei tipi del progetto.

Utilizzo

browser.action()

Esempi

pointer-action.js

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()
});

key-action.js

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()
})

wheel-action.js

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