Opzioni del Servizio

Le opzioni del servizio sono le opzioni che possono essere impostate quando il servizio viene istanziato e saranno utilizzate per ogni chiamata di metodo.

// wdio.conf.(js|ts)
export const config = {
    // ...
    // =====
    // Setup
    // =====
    services: [
        [
            "visual",
            {
                // The options
            },
        ],
    ],
    // ...
};

Opzioni Predefinite

`addressBarShadowPadding`

Tipo: number
Obbligatorio: No
Predefinito: 6
Supportato: Web

Il padding che deve essere aggiunto alla barra degli indirizzi su iOS e Android per fare un ritaglio corretto della viewport.

`autoElementScroll`

Tipo: boolean
Obbligatorio: No
Predefinito: true
Supportato: Web, Hybrid App (Webview)

Questa opzione ti permette di disabilitare lo scorrimento automatico dell'elemento nella vista quando viene creato uno screenshot dell'elemento.

`addIOSBezelCorners`

Tipo: boolean
Obbligatorio: No
Predefinito: false
Supportato: Web, Hybrid App (Webview), Native App

Aggiunge angoli del bezzel e notch/dynamic island allo screenshot per i dispositivi iOS.

NOTA

Questo può essere fatto solo quando il nome del dispositivo PUÒ essere determinato automaticamente e corrisponde al seguente elenco di nomi di dispositivi normalizzati. La normalizzazione sarà effettuata da questo modulo. iPhone:

iPhone X: iphonex
iPhone XS: iphonexs
iPhone XS Max: iphonexsmax
iPhone XR: iphonexr
iPhone 11: iphone11
iPhone 11 Pro: iphone11pro
iPhone 11 Pro Max: iphone11promax
iPhone 12: iphone12
iPhone 12 Mini: iphone12mini
iPhone 12 Pro: iphone12pro
iPhone 12 Pro Max: iphone12promax
iPhone 13: iphone13
iPhone 13 Mini: iphone13mini
iPhone 13 Pro: iphone13pro
iPhone 13 Pro Max: iphone13promax
iPhone 14: iphone14
iPhone 14 Plus: iphone14plus
iPhone 14 Pro: iphone14pro
iPhone 14 Pro Max: iphone14promax iPads:
iPad Mini 6th Generation: ipadmini
iPad Air 4th Generation: ipadair
iPad Air 5th Generation: ipadair
iPad Pro (11-inch) 1st Generation: ipadpro11
iPad Pro (11-inch) 2nd Generation: ipadpro11
iPad Pro (11-inch) 3rd Generation: ipadpro11
iPad Pro (12.9-inch) 3rd Generation: ipadpro129
iPad Pro (12.9-inch) 4th Generation: ipadpro129
iPad Pro (12.9-inch) 5th Generation: ipadpro129

`autoSaveBaseline`

Tipo: boolean
Obbligatorio: No
Predefinito: true
Supportato: Web, Hybrid App (Webview), Native App

Se non viene trovata un'immagine di riferimento durante il confronto, l'immagine viene automaticamente copiata nella cartella di riferimento.

`baselineFolder`

Tipo: string|()=> string
Obbligatorio: No
Predefinito: .path/to/testfile/__snapshots__/
Supportato: Web, Hybrid App (Webview), Native App

La directory che conterrà tutte le immagini di riferimento utilizzate durante il confronto. Se non impostato, verrà utilizzato il valore predefinito che memorizzerà i file in una cartella __snapshots__/ accanto alla specifica che esegue i test visivi. È possibile utilizzare anche una funzione che restituisce una string per impostare il valore di baselineFolder:

{
    baselineFolder: path.join(process.cwd(), 'foo', 'bar', 'baseline')
},
// OPPURE
{
    baselineFolder: () => {
        // Fai qualche magia qui
        return path.join(process.cwd(), 'foo', 'bar', 'baseline');
    }
}

`clearRuntimeFolder`

Tipo: boolean
Obbligatorio: No
Predefinito: false
Supportato: Web, Hybrid App (Webview), Native App

Elimina la cartella di runtime (actual & diff) all'inizializzazione

NOTA

Questo funzionerà solo quando screenshotPath è impostato attraverso le opzioni del plugin, e NON FUNZIONERÀ quando imposti le cartelle nei metodi

`createJsonReportFiles` (NUOVO)

Tipo: boolean
Obbligatorio: No
Predefinito: false

Ora hai l'opzione di esportare i risultati di confronto in un file di report JSON. Fornendo l'opzione createJsonReportFiles: true, ogni immagine confrontata creerà un report archiviato nella cartella actual, accanto a ciascun risultato dell'immagine actual. L'output sarà simile a questo:

{
    "parent": "check methods",
    "test": "should fail comparing with a baseline",
    "tag": "examplePageFail",
    "instanceData": {
        "browser": {
            "name": "chrome-headless-shell",
            "version": "126.0.6478.183"
        },
        "platform": {
            "name": "mac",
            "version": "not-known"
        }
    },
    "commandName": "checkScreen",
    "boundingBoxes": {
        "diffBoundingBoxes": [
            {
                "left": 1088,
                "top": 717,
                "right": 1186,
                "bottom": 730
            }
            //....
        ],
        "ignoredBoxes": [
            {
                "left": 159,
                "top": 652,
                "right": 356,
                "bottom": 703
            }
            //...
        ]
    },
    "fileData": {
        "actualFilePath": "/Users/wdio/visual-testing/.tmp/actual/desktop_chrome-headless-shellexamplePageFail-local-chrome-latest-1366x768.png",
        "baselineFilePath": "/Users/wdio/visual-testing/localBaseline/desktop_chrome-headless-shellexamplePageFail-local-chrome-latest-1366x768.png",
        "diffFilePath": "/Users/wdio/visual-testing/.tmp/diff/desktop_chrome-headless-shell/examplePageFail-local-chrome-latest-1366x768png",
        "fileName": "examplePageFail-local-chrome-latest-1366x768.png",
        "size": {
            "actual": {
                "height": 768,
                "width": 1366
            },
            "baseline": {
                "height": 768,
                "width": 1366
            },
            "diff": {
                "height": 768,
                "width": 1366
            }
        }
    },
    "misMatchPercentage": "12.90",
    "rawMisMatchPercentage": 12.900729014153246
}

Quando tutti i test sono stati eseguiti, verrà generato un nuovo file JSON con la raccolta dei confronti che si troverà nella radice della cartella actual. I dati sono raggruppati per:

describe per Jasmine/Mocha o Feature per CucumberJS
it per Jasmine/Mocha o Scenario per CucumberJS e poi ordinati per:
commandName, che sono i nomi dei metodi di confronto utilizzati per confrontare le immagini
instanceData, prima il browser, poi il dispositivo, poi la piattaforma avrà un aspetto simile a questo

[
    {
        "description": "check methods",
        "data": [
            {
                "test": "should fail comparing with a baseline",
                "data": [
                    {
                        "tag": "examplePageFail",
                        "instanceData": {},
                        "commandName": "checkScreen",
                        "framework": "mocha",
                        "boundingBoxes": {
                            "diffBoundingBoxes": [],
                            "ignoredBoxes": []
                        },
                        "fileData": {},
                        "misMatchPercentage": "14.34",
                        "rawMisMatchPercentage": 14.335403703025868
                    },
                    {
                        "tag": "exampleElementFail",
                        "instanceData": {},
                        "commandName": "checkElement",
                        "framework": "mocha",
                        "boundingBoxes": {
                            "diffBoundingBoxes": [],
                            "ignoredBoxes": []
                        },
                        "fileData": {},
                        "misMatchPercentage": "1.34",
                        "rawMisMatchPercentage": 1.335403703025868
                    }
                ]
            }
        ]
    }
]

I dati del report ti daranno l'opportunità di costruire il tuo report visivo senza dover fare tutta la magia e la raccolta dei dati da solo.

NOTA

È necessario utilizzare @wdio/visual-testing versione 5.2.0 o superiore

`disableBlinkingCursor`

Tipo: boolean
Obbligatorio: No
Predefinito: false
Supportato: Web, Hybrid App (Webview)

Abilita/Disabilita il "lampeggiamento" del cursore in tutti gli elementi input, textarea, [contenteditable] nell'applicazione. Se impostato su true, il cursore sarà impostato su transparent prima di scattare uno screenshot e ripristinato al termine

`disableCSSAnimation`

Tipo: boolean
Obbligatorio: No
Predefinito: false
Supportato: Web, Hybrid App (Webview)

Abilita/Disabilita tutte le animazioni CSS nell'applicazione. Se impostato su true, tutte le animazioni saranno disabilitate prima di scattare uno screenshot e ripristinate al termine

`enableLayoutTesting`

Tipo: boolean
Obbligatorio: No
Predefinito: false
Supportato: Web

Questo nasconderà tutto il testo in una pagina in modo che solo il layout venga utilizzato per il confronto. Il nascondimento sarà fatto aggiungendo lo stile 'color': 'transparent !important' a ciascun elemento.

Per l'output vedi Test Output

info

Utilizzando questo flag, ogni elemento che contiene testo (quindi non solo p, h1, h2, h3, h4, h5, h6, span, a, li, ma anche div|button|..) riceverà questa proprietà. Non esiste un'opzione per personalizzare questo comportamento.

`formatImageName`

Tipo: string
Obbligatorio: No
Predefinito: {tag}-{browserName}-{width}x{height}-dpr-{dpr}
Supportato: Web, Hybrid App (Webview), Native App

Il nome delle immagini salvate può essere personalizzato passando il parametro formatImageName con una stringa di formato come:

{tag}-{browserName}-{width}x{height}-dpr-{dpr}

Le seguenti variabili possono essere passate per formattare la stringa e verranno automaticamente lette dalle capacità dell'istanza. Se non possono essere determinate, verranno utilizzati i valori predefiniti.

browserName: Il nome del browser nelle capacità fornite
browserVersion: La versione del browser fornita nelle capacità
deviceName: Il nome del dispositivo dalle capacità
dpr: Il rapporto di pixel del dispositivo
height: L'altezza dello schermo
logName: Il logName dalle capacità
mobile: Questo aggiungerà _app, o il nome del browser dopo il deviceName per distinguere gli screenshot dell'app dagli screenshot del browser
platformName: Il nome della piattaforma nelle capacità fornite
platformVersion: La versione della piattaforma fornita nelle capacità
tag: Il tag fornito nei metodi che vengono chiamati
width: La larghezza dello schermo

info

Non è possibile fornire percorsi/cartelle personalizzati nel formatImageName. Se vuoi cambiare il percorso, controlla la modifica delle seguenti opzioni:

`fullPageScrollTimeout`

Tipo: number
Obbligatorio: No
Predefinito: 1500
Supportato: Web

Il timeout in millisecondi da attendere dopo uno scorrimento. Questo potrebbe aiutare a identificare pagine con caricamento lazy.

info

Questo funzionerà solo quando l'opzione del servizio/metodo userBasedFullPageScreenshot è impostata su true, vedi anche userBasedFullPageScreenshot

`hideScrollBars`

Tipo: boolean
Obbligatorio: No
Predefinito: true
Supportato: Web, Hybrid App (Webview)

Nasconde le barre di scorrimento nell'applicazione. Se impostato su true, tutte le barre di scorrimento saranno disabilitate prima di scattare uno screenshot. Questo è impostato di default su true per prevenire problemi extra.

`logLevel`

Tipo: string
Obbligatorio: No
Predefinito: info
Supportato: Web, Hybrid App (Webview), Native App

Aggiunge log extra, le opzioni sono debug | info | warn | silent

Gli errori vengono sempre registrati nella console.

`savePerInstance`

Tipo: boolean
Predefinito: false
Obbligatorio: no
Supportato: Web, Hybrid App (Webview), Native App

Salva le immagini per istanza in una cartella separata, quindi ad esempio tutti gli screenshot di Chrome saranno salvati in una cartella Chrome come desktop_chrome.

`screenshotPath`

Tipo: string | () => string
Predefinito: .tmp/
Obbligatorio: no
Supportato: Web, Hybrid App (Webview), Native App

La directory che conterrà tutti gli screenshot effettivi/differenti. Se non impostato, verrà utilizzato il valore predefinito. Una funzione che restituisce una stringa può anche essere utilizzata per impostare il valore screenshotPath:

{
    screenshotPath: path.join(process.cwd(), 'foo', 'bar', 'screenshotPath')
},
// OPPURE
{
    screenshotPath: () => {
        // Fai qualche magia qui
        return path.join(process.cwd(), 'foo', 'bar', 'screenshotPath');
    }
}

`toolBarShadowPadding`

Tipo: number
Obbligatorio: No
Predefinito: 6 per Android e 15 per iOS (6 di default e 9 verrà aggiunto automaticamente per la possibile barra home su iPhone con notch o iPad che hanno una barra home)
Supportato: Web

Il padding che deve essere aggiunto alla barra degli strumenti su iOS e Android per fare un ritaglio corretto della viewport.

`userBasedFullPageScreenshot`

Tipo: boolean
Obbligatorio: No
Predefinito: false
Supportato: Web, Hybrid App (Webview) Introdotto in visual-service@7.0.0

Per impostazione predefinita, gli screenshot a pagina intera sul web desktop vengono acquisiti utilizzando il protocollo WebDriver BiDi, che consente screenshot veloci, stabili e coerenti senza scorrimento. Quando userBasedFullPageScreenshot è impostato su true, il processo di screenshot simula un utente reale: scorrendo la pagina, acquisendo screenshot di dimensioni viewport e unendoli insieme. Questo metodo è utile per pagine con contenuto caricato lazy o rendering dinamico che dipende dalla posizione di scorrimento.

Usa questa opzione se la tua pagina si basa sul caricamento del contenuto durante lo scorrimento o se vuoi preservare il comportamento dei metodi di screenshot più vecchi.

`waitForFontsLoaded`

Tipo: boolean
Obbligatorio: No
Predefinito: true
Supportato: Web, Hybrid App (Webview)

I font, inclusi i font di terze parti, possono essere caricati in modo sincrono o asincrono. Il caricamento asincrono significa che i font potrebbero caricarsi dopo che WebdriverIO ha determinato che una pagina è stata completamente caricata. Per prevenire problemi di rendering dei font, questo modulo, per impostazione predefinita, attenderà che tutti i font siano caricati prima di scattare uno screenshot.

Opzioni Tabbable

NOTA

Questo modulo supporta anche il disegno del modo in cui un utente utilizzerebbe la tastiera per navigare con tab attraverso il sito web disegnando linee e punti da elemento tabbable a elemento tabbable.
Il lavoro è ispirato al post del blog di Viv Richards su "AUTOMATING PAGE TABABILITY (IS THAT A WORD?) WITH VISUAL TESTING".
Il modo in cui vengono selezionati gli elementi tabbable si basa sul modulo tabbable. Se ci sono problemi riguardanti il tabbing, controlla il README.md e in particolare la sezione More details.

`tabbableOptions`

Tipo: object
Obbligatorio: No
Predefinito: Vedi qui per tutti i valori predefiniti
Supportato: Web

Le opzioni che possono essere modificate per le linee e i punti se usi i metodi {save|check}Tabbable. Le opzioni sono spiegate di seguito.

`tabbableOptions.circle`

Tipo: object
Obbligatorio: No
Predefinito: Vedi qui per tutti i valori predefiniti
Supportato: Web

Le opzioni per modificare il cerchio.

`tabbableOptions.circle.backgroundColor`

Tipo: string
Obbligatorio: No
Predefinito: Vedi qui per tutti i valori predefiniti
Supportato: Web

Il colore di sfondo del cerchio.

`tabbableOptions.circle.borderColor`

Tipo: string
Obbligatorio: No
Predefinito: Vedi qui per tutti i valori predefiniti
Supportato: Web

Il colore del bordo del cerchio.

`tabbableOptions.circle.borderWidth`

Tipo: number
Obbligatorio: No
Predefinito: Vedi qui per tutti i valori predefiniti
Supportato: Web

La larghezza del bordo del cerchio.

`tabbableOptions.circle.fontColor`

Tipo: string
Obbligatorio: No
Predefinito: Vedi qui per tutti i valori predefiniti
Supportato: Web

Il colore del font del testo nel cerchio. Questo verrà mostrato solo se showNumber è impostato su true.

`tabbableOptions.circle.fontFamily`

Tipo: string
Obbligatorio: No
Predefinito: Vedi qui per tutti i valori predefiniti
Supportato: Web

La famiglia del font del testo nel cerchio. Questo verrà mostrato solo se showNumber è impostato su true.

Assicurati di impostare font supportati dai browser.

`tabbableOptions.circle.fontSize`

Tipo: number
Obbligatorio: No
Predefinito: Vedi qui per tutti i valori predefiniti
Supportato: Web

La dimensione del font del testo nel cerchio. Questo verrà mostrato solo se showNumber è impostato su true.

`tabbableOptions.circle.size`

Tipo: number
Obbligatorio: No
Predefinito: Vedi qui per tutti i valori predefiniti
Supportato: Web

La dimensione del cerchio.

`tabbableOptions.circle.showNumber`

Tipo: showNumber
Obbligatorio: No
Predefinito: Vedi qui per tutti i valori predefiniti
Supportato: Web

Mostra il numero della sequenza di tab nel cerchio.

`tabbableOptions.line`

Tipo: object
Obbligatorio: No
Predefinito: Vedi qui per tutti i valori predefiniti
Supportato: Web

Le opzioni per modificare la linea.

`tabbableOptions.line.color`

Tipo: string
Obbligatorio: No
Predefinito: Vedi qui per tutti i valori predefiniti
Supportato: Web

Il colore della linea.

`tabbableOptions.line.width`

Tipo: number
Obbligatorio: No
Predefinito: Vedi qui per tutti i valori predefiniti
Supportato: Web

La larghezza della linea.

Opzioni di confronto

`compareOptions`

Tipo: object
Obbligatorio: No
Predefinito: Vedi qui per tutti i valori predefiniti
Supportato: Web, Hybrid App (Webview), Native App (Vedi Opzioni di confronto del metodo per maggiori informazioni)

Le opzioni di confronto possono anche essere impostate come opzioni del servizio, sono descritte nelle Opzioni di confronto del metodo

Opzioni Predefinite​

addressBarShadowPadding​

autoElementScroll​

addIOSBezelCorners​

autoSaveBaseline​

baselineFolder​

clearRuntimeFolder​

createJsonReportFiles (NUOVO)​

disableBlinkingCursor​

disableCSSAnimation​

enableLayoutTesting​

formatImageName​

fullPageScrollTimeout​

hideScrollBars​

logLevel​

savePerInstance​

screenshotPath​

toolBarShadowPadding​

userBasedFullPageScreenshot​

waitForFontsLoaded​

Opzioni Tabbable​

tabbableOptions​

tabbableOptions.circle​

tabbableOptions.circle.backgroundColor​

tabbableOptions.circle.borderColor​

tabbableOptions.circle.borderWidth​

tabbableOptions.circle.fontColor​

tabbableOptions.circle.fontFamily​

tabbableOptions.circle.fontSize​

tabbableOptions.circle.size​

tabbableOptions.circle.showNumber​

tabbableOptions.line​

tabbableOptions.line.color​

tabbableOptions.line.width​

Opzioni di confronto​

compareOptions​

Opzioni Predefinite

`addressBarShadowPadding`

`autoElementScroll`

`addIOSBezelCorners`

`autoSaveBaseline`

`baselineFolder`

`clearRuntimeFolder`

`createJsonReportFiles` (NUOVO)

`disableBlinkingCursor`

`disableCSSAnimation`

`enableLayoutTesting`

`formatImageName`

`fullPageScrollTimeout`

`hideScrollBars`

`logLevel`

`savePerInstance`

`screenshotPath`

`toolBarShadowPadding`

`userBasedFullPageScreenshot`

`waitForFontsLoaded`

Opzioni Tabbable

`tabbableOptions`

`tabbableOptions.circle`

`tabbableOptions.circle.backgroundColor`

`tabbableOptions.circle.borderColor`

`tabbableOptions.circle.borderWidth`

`tabbableOptions.circle.fontColor`

`tabbableOptions.circle.fontFamily`

`tabbableOptions.circle.fontSize`

`tabbableOptions.circle.size`

`tabbableOptions.circle.showNumber`

`tabbableOptions.line`

`tabbableOptions.line.color`

`tabbableOptions.line.width`

Opzioni di confronto

`compareOptions`