Hoppa till huvudinnehåll

Tjänstalternativ

Service options är de alternativ som kan ställas in när tjänsten initieras och kommer att användas för varje metodanrop.

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

Standardalternativ​

addressBarShadowPadding​

  • Typ: number
  • Obligatoriskt: Nej
  • Standard: 6
  • Stödda applikationskontexter: Webb

Det utfyllnad som behöver läggas till adressfältet på iOS och Android för att göra en korrekt urklippning av visningsområdet.

autoElementScroll​

  • Typ: boolean
  • Obligatoriskt: Nej
  • Standard: true
  • Stödda applikationskontexter: Webb, Hybrid App (Webview)

Detta alternativ låter dig inaktivera automatisk rullning av elementet till vyn när en elementskärmdump skapas.

addIOSBezelCorners​

  • Typ: boolean
  • Obligatoriskt: Nej
  • Standard: false
  • Stödda applikationskontexter: Webb, Hybrid App (Webview), Native App

Lägg till ramkanter och notch/dynamic island till skärmdumpen för iOS-enheter.

NOTERA

Detta kan endast göras när enhetsnamnet KAN fastställas automatiskt och matchar följande lista över normaliserade enhetsnamn. Normalisering kommer att göras av denna modul. 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​

  • Typ: boolean
  • Obligatoriskt: Nej
  • Standard: true
  • Stödda applikationskontexter: Webb, Hybrid App (Webview), Native App

Om ingen utgångsbild hittas under jämförelsen kopieras bilden automatiskt till utgångsmappen.

baselineFolder​

  • Typ: string|()=> string
  • Obligatoriskt: Nej
  • Standard: .path/to/testfile/__snapshots__/
  • Stödda applikationskontexter: Webb, Hybrid App (Webview), Native App

Katalogen som kommer att innehålla alla utgångsbilder som används under jämförelsen. Om den inte är inställd kommer standardvärdet att användas, vilket lagrar filerna i en __snapshots__/-mapp bredvid specifikationen som utför de visuella testerna. En funktion som returnerar en string kan också användas för att ställa in värdet för baselineFolder:

{
    baselineFolder: path.join(process.cwd(), 'foo', 'bar', 'baseline')
},
// ELLER
{
    baselineFolder: () => {
        // Gör lite magi här
        return path.join(process.cwd(), 'foo', 'bar', 'baseline');
    }
}

clearRuntimeFolder​

  • Typ: boolean
  • Obligatoriskt: Nej
  • Standard: false
  • Stödda applikationskontexter: Webb, Hybrid App (Webview), Native App

Ta bort runtime-mappen (actual & `diff) vid initialisering

NOTERA

Detta fungerar endast när screenshotPath är inställt genom plugin-alternativ, och KOMMER INTE FUNGERA när du ställer in mapparna i metoderna

createJsonReportFiles (NYTT)​

  • Typ: boolean
  • Obligatoriskt: Nej
  • Standard: false

Du har nu möjlighet att exportera jämförelseresultaten till en JSON-rapportfil. Genom att tillhandahålla alternativet createJsonReportFiles: true kommer varje bild som jämförs att skapa en rapport som lagras i mappen actual, bredvid varje actual-bildresultat. Utdata kommer att se ut så här:

{
    "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
}

När alla tester har körts kommer en ny JSON-fil med samlingen av jämförelserna att genereras och kan hittas i roten av din mapp actual. Data grupperas efter:

  • describe för Jasmine/Mocha eller Feature för CucumberJS
  • it för Jasmine/Mocha eller Scenario för CucumberJS och sorteras sedan efter:
  • commandName, som är jämförelsemetodnamnen som används för att jämföra bilderna
  • instanceData, webbläsare först, sedan enhet, sedan plattform det kommer att se ut så här
[
    {
        "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
                    }
                ]
            }
        ]
    }
]

Rapportdata ger dig möjlighet att bygga din egen visuella rapport utan att behöva göra all magi och datainsamling själv.

NOTERA

Du behöver använda @wdio/visual-testing version 5.2.0 eller högre

disableBlinkingCursor​

  • Typ: boolean
  • Obligatoriskt: Nej
  • Standard: false
  • Stödda applikationskontexter: Webb, Hybrid App (Webview)

Aktivera/inaktivera alla input, textarea, [contenteditable] markörers "blinkande" i applikationen. Om det är inställt på true kommer markören att sättas till transparent innan en skärmdump tas och återställas när den är klar

disableCSSAnimation​

  • Typ: boolean
  • Obligatoriskt: Nej
  • Standard: false
  • Stödda applikationskontexter: Webb, Hybrid App (Webview)

Aktivera/inaktivera alla CSS-animationer i applikationen. Om det är inställt på true kommer alla animationer att inaktiveras innan en skärmdump tas och återställas när den är klar

enableLayoutTesting​

  • Typ: boolean
  • Obligatoriskt: Nej
  • Standard: false
  • Stödda applikationskontexter: Webb

Detta kommer att dölja all text på en sida så att endast layouten används för jämförelse. Döljandet görs genom att lägga till stilen 'color': 'transparent !important' till varje element.

För utdata, se Test Output

info

Genom att använda denna flagga kommer varje element som innehåller text (så inte bara p, h1, h2, h3, h4, h5, h6, span, a, li, utan även div|button|..) att få denna egenskap. Det finns inget alternativ för att skräddarsy detta.

formatImageName​

  • Typ: string
  • Obligatoriskt: Nej
  • Standard: {tag}-{browserName}-{width}x{height}-dpr-{dpr}
  • Stödda applikationskontexter: Webb, Hybrid App (Webview), Native App

Namnet på de sparade bilderna kan anpassas genom att skicka parametern formatImageName med en formaterad sträng som:

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

Följande variabler kan skickas för att formatera strängen och kommer automatiskt att läsas från instansens funktioner. Om de inte kan bestämmas kommer standardinställningarna att användas.

  • browserName: Namnet på webbläsaren i de tillhandahållna funktionerna
  • browserVersion: Versionen av webbläsaren som tillhandahålls i funktionerna
  • deviceName: Enhetsnamnet från funktionerna
  • dpr: Enhetens pixelförhållande
  • height: Höjden på skärmen
  • logName: LogName från funktionerna
  • mobile: Detta kommer att lägga till _app, eller webbläsarens namn efter deviceName för att skilja app-skärmdumpar från webbläsar-skärmdumpar
  • platformName: Namnet på plattformen i de tillhandahållna funktionerna
  • platformVersion: Versionen av plattformen som tillhandahålls i funktionerna
  • tag: Taggen som tillhandahålls i metoderna som anropas
  • width: Bredden på skärmen
info

Du kan inte tillhandahålla anpassade sökvägar/mappar i formatImageName. Om du vill ändra sökvägen, vänligen kontrollera ändring av följande alternativ:

fullPageScrollTimeout​

  • Typ: number
  • Obligatoriskt: Nej
  • Standard: 1500
  • Stödda applikationskontexter: Webb

Tidsgränsen i millisekunder att vänta efter en rullning. Detta kan hjälpa till att identifiera sidor med lat inläsning.

info

Detta fungerar endast när tjänst-/metod-alternativet userBasedFullPageScreenshot är inställt på true, se även userBasedFullPageScreenshot

hideScrollBars​

  • Typ: boolean
  • Obligatoriskt: Nej
  • Standard: true
  • Stödda applikationskontexter: Webb, Hybrid App (Webview)

Dölj rullningslister i applikationen. Om det är inställt på true kommer alla rullningslister att inaktiveras innan en skärmdump tas. Detta är inställt som standard true för att förhindra extra problem.

logLevel​

  • Typ: string
  • Obligatoriskt: Nej
  • Standard: info
  • Stödda applikationskontexter: Webb, Hybrid App (Webview), Native App

Lägger till extra loggar, alternativen är debug | info | warn | silent

Fel loggas alltid till konsolen.

savePerInstance​

  • Typ: boolean
  • Standard: false
  • Obligatoriskt: nej
  • Stödda applikationskontexter: Webb, Hybrid App (Webview), Native App

Spara bilderna per instans i en separat mapp så till exempel kommer alla Chrome-skärmdumpar att sparas i en Chrome-mapp som desktop_chrome.

screenshotPath​

  • Typ: string | () => string
  • Standard: .tmp/
  • Obligatoriskt: nej
  • Stödda applikationskontexter: Webb, Hybrid App (Webview), Native App

Katalogen som kommer att innehålla alla faktiska/olika skärmdumpar. Om den inte är inställd kommer standardvärdet att användas. En funktion som returnerar en sträng kan också användas för att ställa in screenshotPath-värdet:

{
    screenshotPath: path.join(process.cwd(), 'foo', 'bar', 'screenshotPath')
},
// ELLER
{
    screenshotPath: () => {
        // Gör lite magi här
        return path.join(process.cwd(), 'foo', 'bar', 'screenshotPath');
    }
}

toolBarShadowPadding​

  • Typ: number
  • Obligatoriskt: Nej
  • Standard: 6 för Android och 15 för iOS (6 som standard och 9 kommer att läggas till automatiskt för den möjliga hemknappen på iPhones med en notch eller iPads som har en hemknapp)
  • Stödda applikationskontexter: Webb

Den utfyllnad som behöver läggas till verktygsfältet på iOS och Android för att göra en korrekt urklippning av visningsområdet.

userBasedFullPageScreenshot​

  • Typ: boolean
  • Obligatoriskt: Nej
  • Standard: false
  • Stödda applikationskontexter: Webb, Hybrid App (Webview) Introducerad i visual-service@7.0.0

Som standard tas fullsidesskärmdumpar på skrivbordswebb med hjälp av WebDriver BiDi-protokollet, vilket möjliggör snabba, stabila och konsekventa skärmdumpar utan rullning. När userBasedFullPageScreenshot är inställt på true simulerar skärmdumpsprocessen en verklig användare: den rullar genom sidan, fångar skärmdumpar i visningsområdets storlek och syr ihop dem. Denna metod är användbar för sidor med lat-laddat innehåll eller dynamisk rendering som beror på rullningsposition.

Använd detta alternativ om din sida är beroende av innehåll som laddas medan du rullar eller om du vill bevara beteendet hos äldre skärmdumpsmetoder.

waitForFontsLoaded​

  • Typ: boolean
  • Obligatoriskt: Nej
  • Standard: true
  • Stödda applikationskontexter: Webb, Hybrid App (Webview)

Typsnitt, inklusive tredjepartstypsnitt, kan laddas synkront eller asynkront. Asynkron laddning innebär att typsnitt kan laddas efter att WebdriverIO har bestämt att en sida har laddats fullständigt. För att förhindra problem med typsnittåtergivning kommer denna modul som standard att vänta på att alla typsnitt laddas innan den tar en skärmdump.

Tabbable-alternativ​

NOTERA

Denna modul stödjer också ritning av hur en användare skulle använda sitt tangentbord för att tabba genom webbplatsen genom att rita linjer och punkter från tabbable-element till tabbable-element.
Arbetet är inspirerat av Viv Richards hans blogginlägg om "AUTOMATING PAGE TABABILITY (IS THAT A WORD?) WITH VISUAL TESTING".
Sättet tabbable-element väljs baseras på modulen tabbable. Om det finns några problem angående tabbning, vänligen kontrollera README.md och särskilt More details section.

tabbableOptions​

  • Typ: object
  • Obligatoriskt: Nej
  • Standard: Se här för alla standardvärden
  • Stödda applikationskontexter: Webb

Alternativen som kan ändras för linjerna och punkterna om du använder {save|check}Tabbable-metoderna. Alternativen förklaras nedan.

tabbableOptions.circle​

  • Typ: object
  • Obligatoriskt: Nej
  • Standard: Se här för alla standardvärden
  • Stödda applikationskontexter: Webb

Alternativen för att ändra cirkeln.

tabbableOptions.circle.backgroundColor​
  • Typ: string
  • Obligatoriskt: Nej
  • Standard: Se här för alla standardvärden
  • Stödda applikationskontexter: Webb

Bakgrundsfärgen på cirkeln.

tabbableOptions.circle.borderColor​
  • Typ: string
  • Obligatoriskt: Nej
  • Standard: Se här för alla standardvärden
  • Stödda applikationskontexter: Webb

Kantfärgen på cirkeln.

tabbableOptions.circle.borderWidth​
  • Typ: number
  • Obligatoriskt: Nej
  • Standard: Se här för alla standardvärden
  • Stödda applikationskontexter: Webb

Kantbredden på cirkeln.

tabbableOptions.circle.fontColor​
  • Typ: string
  • Obligatoriskt: Nej
  • Standard: Se här för alla standardvärden
  • Stödda applikationskontexter: Webb

Färgen på texten i cirkeln. Detta kommer endast att visas om showNumber är inställt på true.

tabbableOptions.circle.fontFamily​
  • Typ: string
  • Obligatoriskt: Nej
  • Standard: Se här för alla standardvärden
  • Stödda applikationskontexter: Webb

Typsnittsnamnet för texten i cirkeln. Detta kommer endast att visas om showNumber är inställt på true.

Se till att ställa in typsnitt som stöds av webbläsarna.

tabbableOptions.circle.fontSize​
  • Typ: number
  • Obligatoriskt: Nej
  • Standard: Se här för alla standardvärden
  • Stödda applikationskontexter: Webb

Storleken på texten i cirkeln. Detta kommer endast att visas om showNumber är inställt på true.

tabbableOptions.circle.size​
  • Typ: number
  • Obligatoriskt: Nej
  • Standard: Se här för alla standardvärden
  • Stödda applikationskontexter: Webb

Storleken på cirkeln.

tabbableOptions.circle.showNumber​
  • Typ: showNumber
  • Obligatoriskt: Nej
  • Standard: Se här för alla standardvärden
  • Stödda applikationskontexter: Webb

Visa tabsekvens-numret i cirkeln.

tabbableOptions.line​

  • Typ: object
  • Obligatoriskt: Nej
  • Standard: Se här för alla standardvärden
  • Stödda applikationskontexter: Webb

Alternativen för att ändra linjen.

tabbableOptions.line.color​
  • Typ: string
  • Obligatoriskt: Nej
  • Standard: Se här för alla standardvärden
  • Stödda applikationskontexter: Webb

Färgen på linjen.

tabbableOptions.line.width​
  • Typ: number
  • Obligatoriskt: Nej
  • Standard: Se här för alla standardvärden
  • Stödda applikationskontexter: Webb

Bredden på linjen.

Jämförelsealternativ​

compareOptions​

  • Typ: object
  • Obligatoriskt: Nej
  • Standard: Se här för alla standardvärden
  • Stödda applikationskontexter: Webb, Hybrid App (Webview), Native App (Se Method Compare options för mer information)

Jämförelsealternativen kan också ställas in som tjänstalternativ, de beskrivs i Method Compare options

Welcome! How can I help?

WebdriverIO AI Copilot