El Ejecutor de Storybook aún está en BETA, la documentación se trasladará posteriormente a las páginas de documentación de WebdriverIO.
Este módulo ahora soporta Storybook con un nuevo Ejecutor Visual. Este ejecutor automáticamente escanea una instancia local/remota de storybook y creará capturas de pantalla de elementos de cada componente. Esto se puede hacer agregando
export const config: WebdriverIO.Config = {
services: ["visual"],
};
a sus services y ejecutando npx wdio tests/configs/wdio.local.desktop.storybook.conf.ts --storybook a través de la línea de comandos.
Utilizará Chrome en modo headless como navegador predeterminado.
[!NOTE]
- La mayoría de las opciones de Pruebas Visuales también funcionarán para el Ejecutor de Storybook, consulte la documentación de WebdriverIO.
- El Ejecutor de Storybook sobrescribirá todas sus capacidades y solo puede ejecutarse en los navegadores que admite, consulte
--browsers.
- El Ejecutor de Storybook no admite una configuración existente que utilice capacidades Multiremote y arrojará un error.
- El Ejecutor de Storybook solo admite Web de Escritorio, no Web Móvil.
Opciones de Servicio del Ejecutor de Storybook
Las opciones de servicio se pueden proporcionar así
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}`,
},
},
],
],
}
Opciones CLI del Ejecutor de Storybook
--additionalSearchParams
- Tipo:
string
- Obligatorio: No
- Predeterminado: ''
- Ejemplo:
npx wdio tests/configs/wdio.local.desktop.storybook.conf.ts --storybook --additionalSearchParams="foo=bar&abc=def"
Agregará parámetros de búsqueda adicionales a la URL de Storybook.
Consulte la documentación de URLSearchParams para más información. La cadena debe ser una cadena válida de URLSearchParams.
[!NOTE]
Las comillas dobles son necesarias para evitar que el & se interprete como un separador de comandos.
Por ejemplo, con --additionalSearchParams="foo=bar&abc=def" generará la siguiente URL de Storybook para pruebas de historias: http://storybook.url/iframe.html?id=story-id&foo=bar&abc=def.
--browsers
- Tipo:
string
- Obligatorio: No
- Predeterminado:
chrome, puede seleccionar entre chrome|firefox|edge|safari
- Ejemplo:
npx wdio tests/configs/wdio.local.desktop.storybook.conf.ts --storybook --browsers=chrome,firefox,edge,safari
- NOTA: Solo disponible a través de la CLI
Utilizará los navegadores proporcionados para tomar capturas de pantalla de componentes
[!NOTE]
Asegúrese de tener instalados en su máquina local los navegadores en los que desea ejecutar
--clip
- Tipo:
boolean
- Obligatorio: No
- Predeterminado:
true
- Ejemplo:
npx wdio tests/configs/wdio.local.desktop.storybook.conf.ts --storybook --clip=false
Cuando está desactivado creará una captura de pantalla de la vista completa. Cuando está activado creará capturas de pantalla de elementos basadas en el --clipSelector que reducirá la cantidad de espacio en blanco alrededor de la captura de pantalla del componente y reducirá el tamaño de la captura.
--clipSelector
- Tipo:
string
- Obligatorio: No
- Predeterminado:
#storybook-root > :first-child para Storybook V7 y #root > :first-child:not(script):not(style) para Storybook V6, ver también --version
- Ejemplo:
npx wdio tests/configs/wdio.local.desktop.storybook.conf.ts --storybook --clipSelector="#some-id"
Este es el selector que se utilizará:
- para seleccionar el elemento del que se tomará la captura de pantalla
- para el elemento que debe esperar a ser visible antes de tomar una captura de pantalla
--devices
- Tipo:
string
- Obligatorio: No
- Predeterminado: Puede seleccionar de los
deviceDescriptors.ts
- Ejemplo:
npx wdio tests/configs/wdio.local.desktop.storybook.conf.ts --storybook --devices="iPhone 14 Pro Max","Pixel 3 XL"
- NOTA: Solo disponible a través de la CLI
Utilizará los dispositivos proporcionados que coincidan con los deviceDescriptors.ts para tomar capturas de pantalla de componentes
[!NOTE]
- Si falta una configuración de dispositivo, no dude en enviar una solicitud de función
- Esto solo funcionará con Chrome:
- si proporciona
--devices, todas las instancias de Chrome se ejecutarán en modo de emulación móvil
- si también proporciona otros navegadores además de Chrome, como
--devices --browsers=firefox,safari,edge, agregará automáticamente Chrome en modo de emulación móvil
- El Ejecutor de Storybook creará por defecto capturas de elementos, si desea ver la captura completa de Emulación Móvil, proporcione
--clip=false a través de la línea de comandos
- El nombre del archivo se verá, por ejemplo, como
__snapshots__/example/button/desktop_chrome/example-button--large-local-chrome-iPhone-14-Pro-Max-430x932-dpr-3.png
- SRC: Probar un sitio web móvil en un escritorio usando emulación móvil puede ser útil, pero los probadores deben saber que hay muchas diferencias sutiles como:
- GPU completamente diferente, lo que puede llevar a grandes cambios de rendimiento;
- la interfaz de usuario móvil no se emula (en particular, la barra de URL oculta afecta la altura de la página);
- el popup de desambiguación (donde selecciona uno de varios objetivos táctiles) no es compatible;
- muchas API de hardware (por ejemplo, el evento orientationchange) no están disponibles.
--headless
- Tipo:
boolean
- Obligatorio: No
- Predeterminado:
true
- Ejemplo:
npx wdio tests/configs/wdio.local.desktop.storybook.conf.ts --storybook --headless=false
- NOTA: Solo disponible a través de la CLI
Ejecutará las pruebas de forma predeterminada en modo headless (cuando el navegador lo admita) o se puede desactivar
--numShards
- Tipo:
number
- Obligatorio: No
- Predeterminado:
true
- Ejemplo:
npx wdio tests/configs/wdio.local.desktop.storybook.conf.ts --storybook --numShards=10
Este será el número de instancias paralelas que se utilizarán para ejecutar las historias. Esto estará limitado por el maxInstances en su archivo wdio.conf.
[!IMPORTANT]
Cuando se ejecuta en modo headless, no aumente el número a más de 20 para evitar inestabilidad debido a restricciones de recursos
--skipStories
- Tipo:
string|regex
- Obligatorio: No
- Predeterminado: null
- Ejemplo:
npx wdio tests/configs/wdio.local.desktop.storybook.conf.ts --storybook --skipStories="/.*button.*/gm"
Esto puede ser:
- una cadena (
example-button--secondary,example-button--small)
- o una expresión regular (
"/.*button.*/gm")
para omitir ciertas historias. Use el id de la historia que se puede encontrar en la URL de la historia. Por ejemplo, el id en esta URL http://localhost:6006/?path=/story/example-page--logged-out es example-page--logged-out
--url
- Tipo:
string
- Obligatorio: No
- Predeterminado:
http://127.0.0.1:6006
- Ejemplo:
npx wdio tests/configs/wdio.local.desktop.storybook.conf.ts --storybook --url="https://example.com"
La URL donde está alojada su instancia de Storybook.
--version
- Tipo:
number
- Obligatorio: No
- Predeterminado: 7
- Ejemplo:
npx wdio tests/configs/wdio.local.desktop.storybook.conf.ts --storybook --version=6
Esta es la versión de Storybook, el valor predeterminado es 7. Esto es necesario para saber si se debe usar el clipSelector de la V6.
Pruebas de Interacción con Storybook
Las Pruebas de Interacción con Storybook le permiten interactuar con su componente creando scripts personalizados con comandos WDIO para establecer un componente en un estado determinado. Por ejemplo, vea el siguiente fragmento de código:
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`
);
});
});
Se ejecutan dos pruebas en dos componentes diferentes. Cada prueba primero establece un estado y luego toma una captura de pantalla. También notará que se ha introducido un nuevo comando personalizado, que se puede encontrar aquí.
El archivo de especificación anterior se puede guardar en una carpeta y agregarse a la línea de comandos con el siguiente comando:
pnpm run test.local.desktop.storybook.localhost -- --spec='tests/specs/storybook-interaction/*.ts'
El ejecutor de Storybook primero escaneará automáticamente su instancia de Storybook y luego agregará sus pruebas a las historias que deben compararse. Si no desea que los componentes que utiliza para las pruebas de interacción se comparen dos veces, puede agregar un filtro para eliminar las historias "predeterminadas" del escaneo proporcionando el filtro --skipStories. Esto se vería así:
pnpm run test.local.desktop.storybook.localhost -- --skipStories="/example-page.*/gm" --spec='tests/specs/storybook-interaction/*.ts'
Nuevo Comando Personalizado
Se agregará un nuevo comando personalizado llamado browser.waitForStorybookComponentToBeLoaded({ id: 'componentId' }) al objeto browser/driver que cargará automáticamente el componente y esperará a que termine, por lo que no necesita usar el método browser.url('url.com'). Se puede usar así
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`
);
});
});
Las opciones son:
additionalSearchParams
- Tipo:
URLSearchParams
- Obligatorio: No
- Predeterminado:
new URLSearchParams()
- Ejemplo:
await browser.waitForStorybookComponentToBeLoaded({
additionalSearchParams: new URLSearchParams({ foo: "bar", abc: "def" }),
id: "componentId",
});
Esto agregará parámetros de búsqueda adicionales a la URL de Storybook, en el ejemplo anterior la URL será http://storybook.url/iframe.html?id=story-id&foo=bar&abc=def.
Consulte la documentación de URLSearchParams para más información.
clipSelector
- Tipo:
string
- Obligatorio: No
- Predeterminado:
#storybook-root > :first-child para Storybook V7 y #root > :first-child:not(script):not(style) para Storybook V6
- Ejemplo:
await browser.waitForStorybookComponentToBeLoaded({
clipSelector: "#your-selector",
id: "componentId",
});
Este es el selector que se utilizará:
- para seleccionar el elemento del que se tomará la captura de pantalla
- para el elemento que debe esperar a ser visible antes de tomar una captura de pantalla
- Tipo:
string
- Obligatorio: sí
- Ejemplo:
await browser.waitForStorybookComponentToBeLoaded({ '#your-selector', id: 'componentId' })
Use el id de la historia que se puede encontrar en la URL de la historia. Por ejemplo, el id en esta URL http://localhost:6006/?path=/story/example-page--logged-out es example-page--logged-out
timeout
- Tipo:
number
- Obligatorio: No
- Predeterminado: 1100 milisegundos
- Ejemplo:
await browser.waitForStorybookComponentToBeLoaded({
id: "componentId",
timeout: 20000,
});
El tiempo máximo de espera para que un componente sea visible después de cargarse en la página
url
- Tipo:
string
- Obligatorio: No
- Predeterminado:
http://127.0.0.1:6006
- Ejemplo:
await browser.waitForStorybookComponentToBeLoaded({
id: "componentId",
url: "https://your.url",
});
La URL donde está alojada su instancia de Storybook.
