Storybook Runner är fortfarande i BETA, dokumentationen kommer senare att flyttas till WebdriverIO dokumentationssidor.
Denna modul stöder nu Storybook med en ny Visual Runner. Denna runner skannar automatiskt efter en lokal/fjärr Storybook-instans och kommer att skapa elementskärmbilder av varje komponent. Detta kan göras genom att lägga till
export const config: WebdriverIO.Config = {
services: ["visual"],
};
till dina services och köra npx wdio tests/configs/wdio.local.desktop.storybook.conf.ts --storybook via kommandoraden.
Den kommer att använda Chrome i headless-läge som standardwebbläsare.
[!NOTE]
- De flesta av Visual Testing-alternativen fungerar också för Storybook Runner, se WebdriverIO dokumentationen.
- Storybook Runner kommer att skriva över alla dina capabilities och kan endast köras på de webbläsare som den stöder, se
--browsers.
- Storybook Runner stöder inte en befintlig konfiguration som använder Multiremote capabilities och kommer att kasta ett fel.
- Storybook Runner stöder endast Desktop Web, inte Mobile Web.
Storybook Runner Service Options
Servicealternativ kan tillhandahållas så här
export const config: WebdriverIO.Config = {
services: [
[
'visual',
{
baselineFolder: join(process.cwd(), './__snapshots__/'),
debug: true,
storybook: {
additionalSearchParams: new URLSearchParams({foo: 'bar', abc: 'def'}),
clip: false,
clipSelector: ''#some-id,
numShards: 4,
skipStories: ['example-button--secondary', 'example-button--small'],
url: 'https://www.bbc.co.uk/iplayer/storybook/',
version: 6,
getStoriesBaselinePath: (category, component) => `path__${category}__${component}`,
},
},
],
],
}
Storybook Runner CLI options
--additionalSearchParams
- Type:
string
- Mandatory: No
- Default: ''
- Example:
npx wdio tests/configs/wdio.local.desktop.storybook.conf.ts --storybook --additionalSearchParams="foo=bar&abc=def"
Det kommer att lägga till ytterligare sökparametrar till Storybook URL.
Se URLSearchParams dokumentationen för mer information. Strängen måste vara en giltig URLSearchParams-sträng.
[!NOTE]
Dubbla citattecken behövs för att förhindra att & tolkas som en kommandoseparator.
Till exempel med --additionalSearchParams="foo=bar&abc=def" kommer det att generera följande Storybook URL för stories-test: http://storybook.url/iframe.html?id=story-id&foo=bar&abc=def.
--browsers
- Type:
string
- Mandatory: No
- Default:
chrome, du kan välja bland chrome|firefox|edge|safari
- Example:
npx wdio tests/configs/wdio.local.desktop.storybook.conf.ts --storybook --browsers=chrome,firefox,edge,safari
- NOTE: Endast tillgängligt via CLI
Det kommer att använda de angivna webbläsarna för att ta komponentskärmbilder
[!NOTE]
Se till att du har de webbläsare du vill köra installerade på din lokala maskin
--clip
- Type:
boolean
- Mandatory: No
- Default:
true
- Example:
npx wdio tests/configs/wdio.local.desktop.storybook.conf.ts --storybook --clip=false
När det är inaktiverat kommer det att skapa en viewport-skärmbild. När det är aktiverat kommer det att skapa elementskärmbilder baserat på --clipSelector vilket kommer att minska mängden tomt utrymme runt komponentskärmbilden och minska skärmbildens storlek.
--clipSelector
- Type:
string
- Mandatory: No
- Default:
#storybook-root > :first-child för Storybook V7 och #root > :first-child:not(script):not(style) för Storybook V6, se även --version
- Example:
npx wdio tests/configs/wdio.local.desktop.storybook.conf.ts --storybook --clipSelector="#some-id"
Detta är selektorn som kommer att användas:
- för att välja elementet att ta skärmbild av
- för elementet att vänta på att bli synligt innan en skärmbild tas
--devices
- Type:
string
- Mandatory: No
- Default: Du kan välja från
deviceDescriptors.ts
- Example:
npx wdio tests/configs/wdio.local.desktop.storybook.conf.ts --storybook --devices="iPhone 14 Pro Max","Pixel 3 XL"
- NOTE: Endast tillgängligt via CLI
Det kommer att använda de angivna enheterna som matchar deviceDescriptors.ts för att ta komponentskärmbilder
[!NOTE]
- Om du saknar en enhetskonfiguration, skicka gärna in en Feature request
- Detta fungerar endast med Chrome:
- om du anger
--devices kommer alla Chrome-instanser att köras i Mobile Emulation-läge
- om du också anger andra webbläsare än Chrome, som
--devices --browsers=firefox,safari,edge läggs Chrome automatiskt till i Mobile emulation-läge
- Storybook Runner kommer som standard att skapa element-snapshots, om du vill se hela mobilemulerade skärmbilden, ange
--clip=false via kommandoraden
- Filnamnet kommer till exempel att se ut som
__snapshots__/example/button/desktop_chrome/example-button--large-local-chrome-iPhone-14-Pro-Max-430x932-dpr-3.png
- SRC: Att testa en mobilwebbplats på en desktop med hjälp av mobilemulering kan vara användbart, men testare bör vara medvetna om att det finns många subtila skillnader såsom:
- helt annan GPU, vilket kan leda till stora prestandaförändringar;
- mobil UI emuleras inte (särskilt döljs url-fältet vilket påverkar sidhöjden);
- disambigueringspopup (där du väljer ett av flera touchmål) stöds inte;
- många maskinvaru-API:er (till exempel orientationchange-händelse) är otillgängliga.
--headless
- Type:
boolean
- Mandatory: No
- Default:
true
- Example:
npx wdio tests/configs/wdio.local.desktop.storybook.conf.ts --storybook --headless=false
- NOTE: Endast tillgängligt via CLI
Detta kommer att köra testerna som standard i headless-läge (när webbläsaren stöder det) eller kan inaktiveras
--numShards
- Type:
number
- Mandatory: No
- Default:
true
- Example:
npx wdio tests/configs/wdio.local.desktop.storybook.conf.ts --storybook --numShards=10
Detta kommer att vara antalet parallella instanser som kommer att användas för att köra berättelserna. Detta kommer att begränsas av maxInstances i din wdio.conf-fil.
[!IMPORTANT]
När du kör i headless-läge, öka inte antalet till mer än 20 för att förhindra instabilitet på grund av resursbegränsningar
--skipStories
- Type:
string|regex
- Mandatory: No
- Default: null
- Example:
npx wdio tests/configs/wdio.local.desktop.storybook.conf.ts --storybook --skipStories="/.*button.*/gm"
Detta kan vara:
- en sträng (
example-button--secondary,example-button--small)
- eller ett reguljärt uttryck (
"/.*button.*/gm")
för att hoppa över vissa berättelser. Använd id för berättelsen som finns i URL för berättelsen. Till exempel är id i denna URL http://localhost:6006/?path=/story/example-page--logged-out example-page--logged-out
--url
- Type:
string
- Mandatory: No
- Default:
http://127.0.0.1:6006
- Example:
npx wdio tests/configs/wdio.local.desktop.storybook.conf.ts --storybook --url="https://example.com"
URL där din Storybook-instans är värd.
--version
- Type:
number
- Mandatory: No
- Default: 7
- Example:
npx wdio tests/configs/wdio.local.desktop.storybook.conf.ts --storybook --version=6
Detta är versionen av Storybook, standardvärdet är 7. Detta behövs för att veta om V6 clipSelector behöver användas.
Storybook Interaction Testing
Storybook Interaction Testing låter dig interagera med din komponent genom att skapa anpassade skript med WDIO-kommandon för att sätta en komponent i ett visst tillstånd. Till exempel, se kodavsnittet nedan:
import { browser, expect } from "@wdio/globals";
describe("Storybook Interaction", () => {
it("should create screenshots for the logged in state when it logs out", async () => {
const componentId = "example-page--logged-in";
await browser.waitForStorybookComponentToBeLoaded({ id: componentId });
await expect($("header")).toMatchElementSnapshot(
`${componentId}-logged-in-state`
);
await $("button=Log out").click();
await expect($("header")).toMatchElementSnapshot(
`${componentId}-logged-out-state`
);
});
it("should create screenshots for the logged out state when it logs in", async () => {
const componentId = "example-page--logged-out";
await browser.waitForStorybookComponentToBeLoaded({ id: componentId });
await expect($("header")).toMatchElementSnapshot(
`${componentId}-logged-out-state`
);
await $("button=Log in").click();
await expect($("header")).toMatchElementSnapshot(
`${componentId}-logged-in-state`
);
});
});
Två tester på två olika komponenter utförs. Varje test sätter först ett tillstånd och tar sedan en skärmbild. Du kommer också att märka att ett nytt anpassat kommando har införts, som kan hittas här.
Specifikationsfilen ovan kan sparas i en mapp och läggas till i kommandoraden med följande kommando:
pnpm run test.local.desktop.storybook.localhost -- --spec='tests/specs/storybook-interaction/*.ts'
Storybook-runnern kommer först att automatiskt skanna din Storybook-instans och sedan lägga till dina tester i de berättelser som behöver jämföras. Om du inte vill att komponenterna som du använder för interaktionstestning ska jämföras två gånger, kan du lägga till ett filter för att ta bort "standard"-berättelserna från skanningen genom att ange --skipStories-filtret. Detta skulle se ut så här:
pnpm run test.local.desktop.storybook.localhost -- --skipStories="/example-page.*/gm" --spec='tests/specs/storybook-interaction/*.ts'
New Custom Command
Ett nytt anpassat kommando som kallas browser.waitForStorybookComponentToBeLoaded({ id: 'componentId' }) kommer att läggas till i browser/driver-objektet som automatiskt laddar komponenten och väntar på att den ska bli klar, så du behöver inte använda browser.url('url.com')-metoden. Det kan användas så här
import { browser, expect } from "@wdio/globals";
describe("Storybook Interaction", () => {
it("should create screenshots for the logged in state when it logs out", async () => {
const componentId = "example-page--logged-in";
await browser.waitForStorybookComponentToBeLoaded({ id: componentId });
await expect($("header")).toMatchElementSnapshot(
`${componentId}-logged-in-state`
);
await $("button=Log out").click();
await expect($("header")).toMatchElementSnapshot(
`${componentId}-logged-out-state`
);
});
it("should create screenshots for the logged out state when it logs in", async () => {
const componentId = "example-page--logged-out";
await browser.waitForStorybookComponentToBeLoaded({ id: componentId });
await expect($("header")).toMatchElementSnapshot(
`${componentId}-logged-out-state`
);
await $("button=Log in").click();
await expect($("header")).toMatchElementSnapshot(
`${componentId}-logged-in-state`
);
});
});
Alternativen är:
additionalSearchParams
- Type:
URLSearchParams
- Mandatory: No
- Default:
new URLSearchParams()
- Example:
await browser.waitForStorybookComponentToBeLoaded({
additionalSearchParams: new URLSearchParams({ foo: "bar", abc: "def" }),
id: "componentId",
});
Detta kommer att lägga till ytterligare sökparametrar till Storybook URL, i exemplet ovan blir URL http://storybook.url/iframe.html?id=story-id&foo=bar&abc=def.
Se URLSearchParams-dokumentationen för mer information.
clipSelector
- Type:
string
- Mandatory: No
- Default:
#storybook-root > :first-child för Storybook V7 och #root > :first-child:not(script):not(style) för Storybook V6
- Example:
await browser.waitForStorybookComponentToBeLoaded({
clipSelector: "#your-selector",
id: "componentId",
});
Detta är selektorn som kommer att användas:
- för att välja elementet att ta skärmbild av
- för elementet att vänta på att bli synligt innan en skärmbild tas
- Type:
string
- Mandatory: yes
- Example:
await browser.waitForStorybookComponentToBeLoaded({ '#your-selector', id: 'componentId' })
Använd id för berättelsen som finns i URL för berättelsen. Till exempel är id i denna URL http://localhost:6006/?path=/story/example-page--logged-out example-page--logged-out
timeout
- Type:
number
- Mandatory: No
- Default: 1100 milliseconds
- Example:
await browser.waitForStorybookComponentToBeLoaded({
id: "componentId",
timeout: 20000,
});
Den maximala timeout vi vill vänta på att en komponent ska bli synlig efter att ha laddats på sidan
url
- Type:
string
- Mandatory: No
- Default:
http://127.0.0.1:6006
- Example:
await browser.waitForStorybookComponentToBeLoaded({
id: "componentId",
url: "https://your.url",
});
URL där din Storybook-instans är värd.
