Opzioni del Servizio

Le opzioni del servizio sono quelle 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",
            {
                // Le opzioni
            },
        ],
    ],
    // ...
};

Opzioni Predefinite

`addressBarShadowPadding`

Tipo: number
Obbligatorio: No
Predefinito: 6
Contesti di Applicazione Supportati: Web

Il padding che deve essere aggiunto alla barra degli indirizzi su iOS e Android per ritagliare correttamente il viewport.

`autoElementScroll`

Tipo: boolean
Obbligatorio: No
Predefinito: true
Contesti di Applicazione Supportati: Web, App Ibrida (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
Contesti di Applicazione Supportati: Web, App Ibrida (Webview), App Nativa

Aggiunge gli angoli della cornice e notch/isola dinamica 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à eseguita 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
Contesti di Applicazione Supportati: Web, App Ibrida (Webview), App Nativa

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

`baselineFolder`

Tipo: string|()=> string
Obbligatorio: No
Predefinito: .path/to/testfile/__snapshots__/
Contesti di Applicazione Supportati: Web, App Ibrida (Webview), App Nativa

La directory che conterrà tutte le immagini di base utilizzate durante il confronto. Se non impostato, verrà utilizzato il valore predefinito che memorizzerà i file in una cartella __snapshots__/ accanto alla spec che esegue i test visivi. Può essere utilizzata anche una funzione che restituisce una string per impostare il valore di baselineFolder:

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

`clearRuntimeFolder`

Tipo: boolean
Obbligatorio: No
Predefinito: false
Contesti di Applicazione Supportati: Web, App Ibrida (Webview), App Nativa

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

NOTA

Questo funzionerà solo quando screenshotPath è impostato tramite 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 del confronto in un file di report JSON. Fornendo l'opzione createJsonReportFiles: true, per ogni immagine confrontata verrà creato un report memorizzato 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 vengono eseguiti, verrà generato un nuovo file JSON con la raccolta dei confronti che potrà essere trovato nella root 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, browser prima, poi dispositivo, poi 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 la versione @wdio/visual-testing 5.2.0 o superiore

`disableBlinkingCursor`

Tipo: boolean
Obbligatorio: No
Predefinito: false
Contesti di Applicazione Supportati: Web, App Ibrida (Webview)

Attiva/Disattiva il "lampeggiamento" del cursore di tutti i 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
Contesti di Applicazione Supportati: Web, App Ibrida (Webview)

Attiva/Disattiva 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
Contesti di Applicazione Supportati: Web

Questo nasconderà tutto il testo in una pagina in modo che solo il layout verrà utilizzato per il confronto. Il nascondimento sarà fatto aggiungendo lo stile 'color': 'transparent !important' a ogni 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|..) otterrà questa proprietà. Non c'è nessuna opzione per personalizzarlo.

`formatImageName`

Tipo: string
Obbligatorio: No
Predefinito: {tag}-{browserName}-{width}x{height}-dpr-{dpr}
Contesti di Applicazione Supportati: Web, App Ibrida (Webview), App Nativa

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 saranno automaticamente lette dalle capabilities dell'istanza. Se non possono essere determinate, verranno utilizzati i valori predefiniti.

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

info

Non puoi fornire percorsi/cartelle personalizzate nel formatImageName. Se vuoi cambiare il percorso, controlla le seguenti opzioni:

`fullPageScrollTimeout`

Tipo: number
Obbligatorio: No
Predefinito: 1500
Contesti di Applicazione Supportati: Web

Il timeout in millisecondi da attendere dopo uno scorrimento. Questo potrebbe aiutare a identificare le 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
Contesti di Applicazione Supportati: Web, App Ibrida (Webview)

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

`logLevel`

Tipo: string
Obbligatorio: No
Predefinito: info
Contesti di Applicazione Supportati: Web, App Ibrida (Webview), App Nativa

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

Gli errori vengono sempre registrati nella console.

`savePerInstance`

Tipo: boolean
Predefinito: false
Obbligatorio: no
Contesti di Applicazione Supportati: Web, App Ibrida (Webview), App Nativa

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
Contesti di Applicazione Supportati: Web, App Ibrida (Webview), App Nativa

La directory che conterrà tutti gli screenshot attuali/diversi. 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 un po' di magia qui
        return path.join(process.cwd(), 'foo', 'bar', 'screenshotPath');
    }
}

`toolBarShadowPadding`

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

Il padding che deve essere aggiunto alla barra degli strumenti su iOS e Android per ritagliare correttamente il viewport.

`userBasedFullPageScreenshot`

Tipo: boolean
Obbligatorio: No
Predefinito: false
Contesti di Applicazione Supportati: Web, App Ibrida (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: scorre attraverso la pagina, cattura screenshot di dimensioni del viewport e li unisce. Questo metodo è utile per pagine con contenuto a caricamento lazy o rendering dinamico che dipende dalla posizione di scorrimento.

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

`waitForFontsLoaded`

Tipo: boolean
Obbligatorio: No
Predefinito: true
Contesti di Applicazione Supportati: Web, App Ibrida (Webview)

I font, inclusi quelli 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 è 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 sua tastiera per tab attraverso il sito web disegnando linee e punti da un elemento tabbable all'altro.
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 gli elementi tabbable vengono selezionati si basa sul modulo tabbable. In caso di problemi relativi al 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
Contesti di Applicazione Supportati: Web

Le opzioni che possono essere modificate per le linee e i punti se utilizzi 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
Contesti di Applicazione Supportati: Web

Le opzioni per modificare il cerchio.

`tabbableOptions.circle.backgroundColor`

Tipo: string
Obbligatorio: No
Predefinito: Vedi qui per tutti i valori predefiniti
Contesti di Applicazione Supportati: Web

Il colore di sfondo del cerchio.

`tabbableOptions.circle.borderColor`

Tipo: string
Obbligatorio: No
Predefinito: Vedi qui per tutti i valori predefiniti
Contesti di Applicazione Supportati: Web

Il colore del bordo del cerchio.

`tabbableOptions.circle.borderWidth`

Tipo: number
Obbligatorio: No
Predefinito: Vedi qui per tutti i valori predefiniti
Contesti di Applicazione Supportati: Web

La larghezza del bordo del cerchio.

`tabbableOptions.circle.fontColor`

Tipo: string
Obbligatorio: No
Predefinito: Vedi qui per tutti i valori predefiniti
Contesti di Applicazione Supportati: Web

Il colore del carattere 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
Contesti di Applicazione Supportati: Web

La famiglia del carattere 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
Contesti di Applicazione Supportati: Web

La dimensione del carattere 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
Contesti di Applicazione Supportati: Web

La dimensione del cerchio.

`tabbableOptions.circle.showNumber`

Tipo: showNumber
Obbligatorio: No
Predefinito: Vedi qui per tutti i valori predefiniti
Contesti di Applicazione Supportati: Web

Mostra il numero della sequenza di tab nel cerchio.

`tabbableOptions.line`

Tipo: object
Obbligatorio: No
Predefinito: Vedi qui per tutti i valori predefiniti
Contesti di Applicazione Supportati: Web

Le opzioni per modificare la linea.

`tabbableOptions.line.color`

Tipo: string
Obbligatorio: No
Predefinito: Vedi qui per tutti i valori predefiniti
Contesti di Applicazione Supportati: Web

Il colore della linea.

`tabbableOptions.line.width`

Tipo: number
Obbligatorio: No
Predefinito: Vedi qui per tutti i valori predefiniti
Contesti di Applicazione Supportati: Web

La larghezza della linea.

Opzioni di confronto

`compareOptions`

Tipo: object
Obbligatorio: No
Predefinito: Vedi qui per tutti i valori predefiniti
Contesti di Applicazione Supportati: Web, App Ibrida (Webview), App Nativa (Vedi Opzioni di confronto dei metodi per maggiori informazioni)

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

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`