Hoppa till huvudinnehåll

Visuell testning

Vad kan det göra?​

WebdriverIO tillhandahåller bildjämförelser på skärmar, element eller hela sidor för

  • 🖥️ Skrivbordswebbläsare (Chrome / Firefox / Safari / Microsoft Edge)
  • 📱 Mobil- / surfplattewebbläsare (Chrome på Android-emulatorer / Safari på iOS-simulatorer / Simulatorer / verkliga enheter) via Appium
  • 📱 Nativa appar (Android-emulatorer / iOS-simulatorer / verkliga enheter) via Appium (🌟 NY 🌟)
  • 📳 Hybridappar via Appium

genom @wdio/visual-service som är en lättviktig WebdriverIO-tjänst.

Detta gör att du kan:

  • spara eller jämföra skärmar/element/helsidesbilder mot en baslinje
  • automatiskt skapa en baslinje när ingen baslinje finns
  • blockera anpassade regioner och till och med automatiskt exkludera status- och/eller verktygsfält (endast mobil) under en jämförelse
  • öka elementdimensionerna för skärmbilder
  • dölja text under webbplatsjämförelse för att:
    • förbättra stabiliteten och förhindra flakighet i teckensnittsrendering
    • endast fokusera på layouten av en webbplats
  • använda olika jämförelsemetoder och en uppsättning ytterligare matchare för mer läsbara tester
  • verifiera hur din webbplats kommer att stödja tabnavigering med ditt tangentbord, se även Tabba genom en webbplats
  • och mycket mer, se tjänst och metod alternativ

Tjänsten är en lättviktsmodul för att hämta nödvändig data och skärmbilder för alla webbläsare/enheter. Jämförelsekraften kommer från ResembleJS. Om du vill jämföra bilder online kan du kolla in onlineverktyget.

NOTERA För nativa/hybridappar

Metoderna saveScreen, saveElement, checkScreen, checkElement och matcharna toMatchScreenSnapshot och toMatchElementSnapshot kan användas för nativa appar/kontext.

Använd egenskapen isHybridApp:true i dina tjänstinställningar när du vill använda den för hybridappar.

Installation​

Det enklaste sättet är att behålla @wdio/visual-service som en utvecklingsberoende i din package.json, via:

npm install --save-dev @wdio/visual-service

Användning​

@wdio/visual-service kan användas som en normal tjänst. Du kan ställa in den i din konfigurationsfil med följande:

import path from "node:path";

// wdio.conf.ts
export const config = {
    // ...
    // =====
    // Setup
    // =====
    services: [
        [
            "visual",
            {
                // Några alternativ, se dokumentationen för mer
                baselineFolder: path.join(process.cwd(), "tests", "baseline"),
                formatImageName: "{tag}-{logName}-{width}x{height}",
                screenshotPath: path.join(process.cwd(), "tmp"),
                savePerInstance: true,
                // ... fler alternativ
            },
        ],
    ],
    // ...
};

Fler tjänstalternativ finns här.

När det är konfigurerat i din WebdriverIO-konfiguration kan du lägga till visuella tester till dina tester.

Kapaciteter​

För att använda modulen för visuell testning behöver du inte lägga till några extra alternativ till dina kapaciteter. I vissa fall kan du dock vilja lägga till ytterligare metadata till dina visuella tester, som ett logName.

logName låter dig tilldela ett anpassat namn till varje kapacitet, som sedan kan inkluderas i bildfilnamnen. Detta är särskilt användbart för att skilja mellan skärmbilder tagna över olika webbläsare, enheter eller konfigurationer.

För att aktivera detta kan du definiera logName i avsnittet capabilities och se till att alternativet formatImageName i Visual Testing-tjänsten refererar till det. Så här kan du ställa in det:

import path from "node:path";

// wdio.conf.ts
export const config = {
    // ...
    // =====
    // Setup
    // =====
    capabilities: [
        {
            browserName: 'chrome',
            'wdio-ics:options': {
                logName: 'chrome-mac-15', // Anpassat loggnamn för Chrome
            },
        }
        {
            browserName: 'firefox',
            'wdio-ics:options': {
                logName: 'firefox-mac-15', // Anpassat loggnamn för Firefox
            },
        }
    ],
    services: [
        [
            "visual",
            {
                // Några alternativ, se dokumentationen för mer
                baselineFolder: path.join(process.cwd(), "tests", "baseline"),
                screenshotPath: path.join(process.cwd(), "tmp"),
                // Formatet nedan kommer att använda `logName` från kapaciteter
                formatImageName: "{tag}-{logName}-{width}x{height}",
                // ... fler alternativ
            },
        ],
    ],
    // ...
};

Hur det fungerar​

  1. Ställa in logName:

    • I avsnittet capabilities, tilldela ett unikt logName till varje webbläsare eller enhet. Till exempel identifierar chrome-mac-15 tester som körs på Chrome på macOS version 15.

  2. Anpassad bildnamngivning:

    • Alternativet formatImageName integrerar logName i skärmbildsfilnamnen. Om till exempel tag är hemsida och upplösningen är 1920x1080 kan det resulterande filnamnet se ut så här:

      homepage-chrome-mac-15-1920x1080.png

  3. Fördelar med anpassad namngivning:

    • Det blir mycket enklare att skilja mellan skärmbilder från olika webbläsare eller enheter, särskilt vid hantering av baslinjer och felsökning av avvikelser.

  4. Notera om standardvärden:

    -Om logName inte är inställt i kapaciteterna kommer alternativet formatImageName att visa det som en tom sträng i filnamnen (homepage--15-1920x1080.png)

WebdriverIO MultiRemote​

Vi stöder även MultiRemote. För att detta ska fungera ordentligt, se till att du lägger till wdio-ics:options till dina kapaciteter som du kan se nedan. Detta säkerställer att varje skärmbild får ett eget unikt namn.

Att skriva dina tester kommer inte att vara annorlunda jämfört med att använda testrunner

// wdio.conf.js
export const config = {
    capabilities: {
        chromeBrowserOne: {
            capabilities: {
                browserName: "chrome",
                "goog:chromeOptions": {
                    args: ["disable-infobars"],
                },
                // DETTA!!!
                "wdio-ics:options": {
                    logName: "chrome-latest-one",
                },
            },
        },
        chromeBrowserTwo: {
            capabilities: {
                browserName: "chrome",
                "goog:chromeOptions": {
                    args: ["disable-infobars"],
                },
                // DETTA!!!
                "wdio-ics:options": {
                    logName: "chrome-latest-two",
                },
            },
        },
    },
};

Köra programmatiskt​

Här är ett minimalt exempel på hur man använder @wdio/visual-service via remote-alternativ:

import { remote } from "webdriverio";
import VisualService from "@wdio/visual-service";

let visualService = new VisualService({
    autoSaveBaseline: true,
});

const browser = await remote({
    logLevel: "silent",
    capabilities: {
        browserName: "chrome",
    },
});

// "Starta" tjänsten för att lägga till anpassade kommandon till `browser`
visualService.remoteSetup(browser);

await browser.url("https://webdriver.io/");

// eller använd detta för att ENDAST spara en skärmbild
await browser.saveFullPageScreen("examplePaged", {});

// eller använd detta för validering. Båda metoderna behöver inte kombineras, se FAQ
await browser.checkFullPageScreen("examplePaged", {});

await browser.deleteSession();

Tabba genom en webbplats​

Du kan kontrollera om en webbplats är tillgänglig genom att använda tangentbordsknappen TAB. Att testa denna del av tillgänglighet har alltid varit ett tidskrävande (manuellt) jobb och ganska svårt att göra genom automatisering. Med metoderna saveTabbablePage och checkTabbablePage kan du nu rita linjer och punkter på din webbplats för att verifiera tabordningen.

Var medveten om att detta bara är användbart för skrivbordswebbläsare och INTE** för mobila enheter. Alla skrivbordswebbläsare stöder denna funktion.

notera

Arbetet är inspirerat av Viv Richards blogginlägg om "AUTOMATING PAGE TABABILITY (IS THAT A WORD?) WITH VISUAL TESTING".

Sättet tabbara element väljs baseras på modulen tabbable. Om det finns några problem gällande tabbning, kolla README.md och särskilt avsnittet More Details.

Hur fungerar det​

Båda metoderna skapar ett canvas-element på din webbplats och ritar linjer och punkter för att visa dig var din TAB skulle gå om en slutanvändare skulle använda den. Efter det skapas en helsidesbildskärmbild för att ge dig en bra översikt över flödet.

important

**Använd saveTabbablePage endast när du behöver skapa en skärmbild och INTE vill jämföra den **med en baslinje-bild.****

När du vill jämföra tabbningsflödet med en baslinje kan du använda metoden checkTabbablePage. Du behöver INTE använda de två metoderna tillsammans. Om det redan finns en baslinjebild, vilket automatiskt kan göras genom att ange autoSaveBaseline: true när du instansierar tjänsten, kommer checkTabbablePage först att skapa den aktuella bilden och sedan jämföra den med baslinjen.

Alternativ​

Båda metoderna använder samma alternativ som saveFullPageScreen eller compareFullPageScreen.

Exempel​

Detta är ett exempel på hur tabbning fungerar på vår guinea pig-webbplats:

WDIO tabbing example

Automatiskt uppdatera misslyckade visuella ögonblicksbilder​

Uppdatera baslinjebilderna via kommandoraden genom att lägga till argumentet --update-visual-baseline. Detta kommer att

  • automatiskt kopiera den faktiska skärmbilden och lägga den i baslinjen-mappen
  • om det finns skillnader kommer det att låta testet passera eftersom baslinjen har uppdaterats

Användning:

npm run test.local.desktop  --update-visual-baseline

När du kör loggar i info/felsökningsläge ser du följande loggar läggas till

[0-0] ..............
[0-0] #####################################################################################
[0-0]  INFO:
[0-0]  Updated the actual image to
[0-0]  /Users/wswebcreation/Git/wdio/visual-testing/localBaseline/chromel/demo-chrome-1366x768.png
[0-0] #####################################################################################
[0-0] ..........

Typescript-stöd​

Denna modul inkluderar TypeScript-stöd, vilket gör att du kan dra nytta av automatisk komplettering, typsäkerhet och förbättrad utvecklarupplevelse när du använder Visual Testing-tjänsten.

Steg 1: Lägg till typdefinitioner​

För att säkerställa att TypeScript känner igen modultyperna, lägg till följande post i typfältet i din tsconfig.json:

{
    "compilerOptions": {
        "types": ["@wdio/visual-service"]
    }
}

Steg 2: Aktivera typsäkerhet för tjänstalternativ​

För att tvinga typkontroll på tjänstalternativen, uppdatera din WebdriverIO-konfiguration:

// wdio.conf.ts
import { join } from 'node:path';
// Importera typdefinitionen
import type { VisualServiceOptions } from '@wdio/visual-service';

export const config = {
    // ...
    // =====
    // Setup
    // =====
    services: [
        [
            "visual",
            {
                // Tjänstalternativ
                baselineFolder: join(process.cwd(), './__snapshots__/'),
                formatImageName: '{tag}-{logName}-{width}x{height}',
                screenshotPath: join(process.cwd(), '.tmp/'),
            } satisfies VisualServiceOptions, // Säkerställer typsäkerhet
        ],
    ],
    // ...
};

Systemkrav​

Version 5 och uppåt​

För version 5 och uppåt är denna modul en rent JavaScript-baserad modul utan ytterligare systemberoenden utöver de allmänna projektkraven. Den använder Jimp som är ett bildbehandlingsbibliotek för Node skrivet helt i JavaScript, utan några systemspecifika beroenden.

Version 4 och lägre​

För version 4 och lägre förlitar sig denna modul på Canvas, en canvas-implementation för Node.js. Canvas beror på Cairo.

Installationsdetaljer​

Som standard kommer binärfiler för macOS, Linux och Windows att laddas ned under ditt projekts npm install. Om du inte har ett operativsystem eller en processorarkitektur som stöds kommer modulen att kompileras på ditt system. Detta kräver flera beroenden, inklusive Cairo och Pango.

För detaljerad installationsinformation, se node-canvas wiki. Nedan finns installationsinstruktioner på en rad för vanliga operativsystem. Observera att libgif/giflib, librsvg och libjpeg är valfria och endast behövs för stöd för GIF, SVG respektive JPEG. Cairo v1.10.0 eller senare krävs.

Med Homebrew:

brew install pkg-config cairo pango libpng jpeg giflib librsvg pixman

Mac OS X v10.11+: Om du nyligen har uppdaterat till Mac OS X v10.11+ och upplever problem vid kompilering, kör följande kommando: xcode-select --install. Läs mer om problemet på Stack Overflow. Om du har Xcode 10.0 eller högre installerat behöver du NPM 6.4.1 eller högre för att bygga från källkod.

Welcome! How can I help?

WebdriverIO AI Copilot