Migración desde ApplitoolsAcceso anticipado

Migra una suite de Playwright de Applitools Eyes a Delta-QA

Una suite de Playwright escrita para Applitools Eyes funciona en Delta-QA tras dos cambios: su import y sus variables de entorno. Sus eyes.open, check, close, BatchInfo, addBrowser y sus regiones se quedan como están.

Instala y cambia el import

La API Eyes de @delta-qa/vision retoma los nombres y el significado de Applitools Eyes para Playwright. Requiere Node.js 22 o posterior y @playwright/test 1.62 o posterior.

El SDK Vision está disponible primero en acceso anticipado: contáctanos para usarlo con tu suite. Solicitar acceso a Vision

Applitools	Delta-QA
`import { test } from "@applitools/eyes-playwright/fixture";`	`import { test } from "@delta-qa/vision/eyes/fixture";`
`import type { EyesFixture } from "@applitools/eyes-playwright/fixture";`	`import type { EyesFixture } from "@delta-qa/vision/eyes/fixture";`
`import { Eyes, Target, … } from "@applitools/eyes-playwright";`	`import { Eyes, Target, … } from "@delta-qa/vision/eyes";`

eyesConfig en playwright.config se queda tal cual. Con la fixture, un test solo cambia su import:

// import { test } from "@applitools/eyes-playwright/fixture";
import { test } from "@delta-qa/vision/eyes/fixture";

test("checkout", async ({ page, eyes }) => {
  await page.goto("https://shop.example/cart");
  await eyes.check("Cart", { fully: true });
}); // opened before the test, closed by the fixture

Define las variables de entorno

Variable	Se lee para
`DELTAQA_API_KEY`	La clave de API de tu espacio de trabajo Delta-QA (`dqa_…`), con el rol «Can edit», creada en Settings → Workspace → API keys. Guárdala en un secreto de tu CI.
`APPLITOOLS_API_KEY`	Se lee cuando `DELTAQA_API_KEY` no está definida: conserva la variable y dale una clave de Delta-QA.
`DELTAQA_SERVER_URL`	Tu servidor Delta-QA, para una instalación On-Premise; el cloud de Delta-QA si no está definida. `APPLITOOLS_SERVER_URL` nunca se lee.
`APPLITOOLS_BATCH_ID`	La versión probada — el commit. El `id` del lote indicado en el código tiene prioridad.
`APPLITOOLS_BRANCH`	La rama. `setBranchName` en el código tiene prioridad.
`APPLITOOLS_PARENT_BRANCH` `APPLITOOLS_BASELINE_BRANCH`	La rama base, cuya referencia se usa mientras la rama no tenga una propia. `APPLITOOLS_BASELINE_BRANCH` va antes que `APPLITOOLS_PARENT_BRANCH`; el código tiene prioridad sobre ambas.

También se leen las formas _NAME de las variables de rama (APPLITOOLS_BRANCH_NAME, APPLITOOLS_PARENT_BRANCH_NAME, APPLITOOLS_BASELINE_BRANCH_NAME). Una variable vacía cuenta como no definida. Sin clave, la apertura de un test falla e indica la variable que hay que definir.

Estas variables de Applitools no se leen, y no generan ninguna advertencia: APPLITOOLS_SERVER_URL, APPLITOOLS_BATCH_NAME, APPLITOOLS_DONT_CLOSE_BATCHES, APPLITOOLS_SHOW_LOGS.

Configura tu CI

El SDK no lee ni git ni las variables de tu CI: las líneas de abajo obtienen de ellas la rama, la rama base y el commit, en las tres variables de Applitools.

GitHub Actions

En un push, github.head_ref está vacía: la rama es entonces github.ref_name. En una pull request, github.sha es el commit de merge que crea GitHub, no el commit enviado: el commit de cabeza tiene prioridad.

env:
  APPLITOOLS_BRANCH: ${{ github.head_ref || github.ref_name }}
  APPLITOOLS_PARENT_BRANCH: ${{ github.base_ref || github.event.repository.default_branch }}
  APPLITOOLS_BATCH_ID: ${{ github.event.pull_request.head.sha || github.sha }}

GitLab CI

En un pipeline de merge request, CI_MERGE_REQUEST_TARGET_BRANCH_NAME es la rama de destino; en un pipeline de rama, está vacía.

script:
  - export APPLITOOLS_BRANCH="${CI_MERGE_REQUEST_SOURCE_BRANCH_NAME:-$CI_COMMIT_REF_NAME}"
  - export APPLITOOLS_PARENT_BRANCH="${CI_MERGE_REQUEST_TARGET_BRANCH_NAME:-$CI_DEFAULT_BRANCH}"
  - export APPLITOOLS_BATCH_ID="$CI_COMMIT_SHA"
  - npx playwright test

Bitbucket Pipelines

BITBUCKET_PR_DESTINATION_BRANCH solo se define en un pipeline de pull request.

script:
  - export APPLITOOLS_BRANCH="$BITBUCKET_BRANCH"
  - export APPLITOOLS_PARENT_BRANCH="$BITBUCKET_PR_DESTINATION_BRANCH"
  - export APPLITOOLS_BATCH_ID="$BITBUCKET_COMMIT"
  - npx playwright test

Azure Pipelines

Las variables System.PullRequest solo se definen en un build de pull request, con la forma refs/heads/… para Azure Repos. Build.SourceBranchName solo conserva el último segmento de una rama (feature/cart da cart), así que la rama se lee de la referencia completa.

- script: |
    branch="${SYSTEM_PULLREQUEST_SOURCEBRANCH:-$BUILD_SOURCEBRANCH}"
    base="${SYSTEM_PULLREQUEST_TARGETBRANCH:-}"
    export APPLITOOLS_BRANCH="${branch#refs/heads/}"
    export APPLITOOLS_PARENT_BRANCH="${base#refs/heads/}"
    export APPLITOOLS_BATCH_ID="${SYSTEM_PULLREQUEST_SOURCECOMMITID:-$BUILD_SOURCEVERSION}"
    npx playwright test

Una rama base igual a la rama no se usa: en la rama por defecto, estas líneas no dan ninguna base.

Cierra en el teardown, nunca en el cuerpo del test

Con la fixture, eyes se cierra en el teardown del test. Sin ella, llama a eyes.close() en un afterEach, y a runner.getAllTestResults() en un afterAll.

Nunca cierres en el cuerpo del test: esperar el veredicto consume el tiempo del test — 30 segundos por defecto en Playwright Test — y un paso que falla antes de close() deja el test abierto. El teardown tiene su propio timeout.

import { test } from "@playwright/test";
import { Eyes, Target, VisualGridRunner } from "@delta-qa/vision/eyes";

const runner = new VisualGridRunner();
let eyes: Eyes;

test.beforeEach(async ({ page }) => {
  eyes = new Eyes(runner);
  await eyes.open(page, "Shop", test.info().title);
});
test("checkout", async ({ page }) => {
  await page.goto("https://shop.example/cart");
  await eyes.check("Cart", Target.window().fully());
});
test.afterEach(async () => {
  await eyes.close(); // throws DiffsFoundError when a difference awaits a judgment
});
test.afterAll(async () => {
  await runner.getAllTestResults();
});

Cada ajuste de Applitools, y en qué se convierte

Todos los ajustes de Applitools Eyes se aceptan: la suite compila y se ejecuta. Cada uno, o bien lo aplica Delta-QA, o bien se acepta sin efecto, con una advertencia. Algunas llamadas no existen.

Aplicados

Ajuste	En Delta-QA
`appName`	La aplicación del test; junto con el nombre del test, lo identifica. En `eyesConfig`, `My App` si no está definida, como con la fixture de Applitools.
`testName`	El nombre del test, su clave: un nombre cambiado es un test nuevo. En `eyesConfig`, también puede ser una función del test; sin él, la ruta de títulos del test sin su archivo (`describe > test`), como con la fixture de Applitools.
`apiKey` `setApiKey`	La clave, en lugar de `DELTAQA_API_KEY` o `APPLITOOLS_API_KEY` — una clave de Delta-QA. Nunca aparece en un mensaje, un log ni un enlace.
`branchName`	La rama de la ejecución; sin él, `APPLITOOLS_BRANCH` y luego `APPLITOOLS_BRANCH_NAME`.
`parentBranchName` `baselineBranchName`	La rama base, `baselineBranchName` antes que `parentBranchName`; sin ellos, sus variables, en el mismo orden.
`batch`	Su `id` es la versión probada — el commit; sin él, `APPLITOOLS_BATCH_ID`; sin ninguno de los dos, una versión por proceso (ver las diferencias, más abajo).
`saveNewTests`	Si las páginas de un test nuevo pasan a ser su referencia; `true` si no está definido.
`viewportSize`	El tamaño que se da a la página al abrir el test.
`browsersInfo` `addBrowser(width, height)`	Cada tamaño es un entorno, para Chrome o sin nombre de navegador. Su idioma, zona horaria, tema y densidad de pantalla se leen en el navegador del test.
`fully` `fully(true)`	La página entera — lo que Delta-QA verifica en cualquier caso.
`withName` `name`	El nombre del check.
`Target.window`	La página del test.
`Target.region` `CheckSettings.region` `checkRegion` `checkRegionBy` `checkRegionByElement` `checkElement` `checkElementBy`	La única parte de la página que se compara: el primer elemento que designa un locator, un selector o un handle de elemento, como en Applitools; gana la última región indicada. Las regiones a ignorar que contiene quedan excluidas.
`ignoreRegions` `ignoreRegion` `ignore` `ignores`	Cada elemento que designa una región — un locator, un selector, `{ selector, type }`, un handle de elemento — queda excluido de la comparación: todos los elementos de un locator, como en Applitools. También la forma `{ region }` y la clave `ignoreRegions` de la forma objeto.
`eyesConfig.failTestsOnDiff`	Cuándo hace fallar un veredicto que no es `PASSED`, en la fixture: `'afterEach'` hace fallar el test en su teardown; `'afterAll'` hace fallar el worker cuando terminan sus tests; `false` no hace fallar nada, aunque el veredicto se sigue esperando. Sin él, `'afterAll'` si la variable `CI` está definida y `'afterEach'` si no, tal como lo decide el código de la fixture de Applitools.
`eyesConfig.afterAll`	Se llama cuando terminan los tests de un worker, con el resultado de cada uno.

Las llamadas

Llamada	En Delta-QA
`open(page, appName, testName, viewportSize?)`	El test se identifica por su aplicación y su nombre: un nombre cambiado es un test nuevo. El tamaño del viewport se da a la página.
`check(name?, Target.window())` `checkWindow(tag?)`	Verifica la página tal como está, en cada entorno. Un check sin nombre se empareja por la dirección de su página; se aceptan dos checks con el mismo nombre. Devuelve un `MatchResult` sin veredicto, como el `check` de Applitools: el veredicto llega al cerrar.
`close(throwErr = true)`	Espera el veredicto: `DiffsFoundError` ante una diferencia por revisar, `NewTestError` ante un test nuevo por revisar (`saveNewTests(false)`), `TestFailedError` ante una diferencia marcada como bug o ante un fallo. El mensaje da el enlace de la versión en Delta-QA.
`closeAsync()` `runner.getAllTestResults(throwErr = true)`	`closeAsync()` cierra sin esperar; el runner espera cada veredicto, cierra un test que quedó abierto y lanza un error ante uno que no pasó — se conserva para él el error de un `closeAsync()`.
`abort()` `abortIfNotClosed()` `abortAsync()`	Cierra sin esperar el veredicto y no hace fallar nada: los resultados se marcan como abortados, sin resultado; `null` si no hay ningún test abierto. Delta-QA compara igualmente las ejecuciones, y la versión muestra su resultado.

Aceptados sin efecto

Un ajuste que Delta-QA no aplica no hace fallar el test: el test se ejecuta sin él. Su primer uso en un proceso emite una advertencia de Node.js que lo nombra, con el código DELTAQA_IGNORED_SETTING; los usos siguientes ya no dicen nada, y node --disable-warning=DELTAQA_IGNORED_SETTING las silencia. Un valor vacío — setX(process.env.VARIABLE) fuera de la CI — es un ajuste no indicado, y no genera advertencia. Los nombres de abajo son los que da la advertencia.

Ajustes de comparación

Los niveles de coincidencia, las regiones por nivel de coincidencia, las regiones flotantes y los desplazamientos ajustan la comparación de Applitools. Delta-QA compara la página como lo haría el ojo humano, sin nivel de tolerancia que ajustar: cada diferencia se muestra, y una persona la revisa en Delta-QA.

matchLevel
defaultMatchSettings
enablePatterns
ignoreDisplacements
ignoreCaret
useDom
sendDom
CheckSettings.matchLevel
CheckSettings.layout
CheckSettings.exact
CheckSettings.strict
CheckSettings.content
CheckSettings.ignoreColors
CheckSettings.dynamic
CheckSettings.enablePatterns
CheckSettings.ignoreDisplacements
CheckSettings.ignoreCaret
CheckSettings.ignoreMismatch
CheckSettings.useDom
CheckSettings.sendDom
CheckSettings.layoutRegion
CheckSettings.layoutRegions
CheckSettings.strictRegion
CheckSettings.strictRegions
CheckSettings.contentRegion
CheckSettings.contentRegions
CheckSettings.floating
CheckSettings.floatings
CheckSettings.floatingRegion
CheckSettings.floatingRegions
CheckSettings.dynamicRegion
CheckSettings.dynamicRegions

Ajustes de captura

El ensamblado, el scroll, el recorte, las esperas y las capturas de depuración dan forma a la captura de Applitools. Delta-QA verifica la página entera tal como la dejó el test al llamar a check: para esperar un contenido o cargar una sección diferida, hazlo en el test, antes del check.

hideCaret
hideScrollbars
forceFullPageScreenshot
stitchMode
stitchOverlap
scrollRootElement
cut
rotation
waitBeforeScreenshots
waitBeforeCapture
matchTimeout
saveDebugScreenshots
debugScreenshotsPath
debugScreenshotsPrefix
fully(false)
CheckSettings.fully(false)
CheckSettings.scrollRootElement
CheckSettings.stitchMode
CheckSettings.timeout
CheckSettings.waitBeforeCapture
CheckSettings.lazyLoad
CheckSettings.useSystemScreenshot

Navegadores, dispositivos y entornos

Delta-QA renderiza en Chromium: cuenta el tamaño dado a addBrowser, no el navegador indicado, así que dos navegadores del mismo tamaño son un solo entorno. Un dispositivo de la grid de Applitools (DeviceName, IosDeviceName, emulación, multidispositivo) no añade ningún entorno. El idioma, la zona horaria, el tema y la densidad de pantalla se leen en el navegador del test, y las etiquetas de entorno no cambian nada. ClassicRunner y VisualGridRunner se comportan igual.

addBrowser(chrome-one-version-back)
addBrowser(chrome-two-versions-back)
addBrowser(firefox)
addBrowser(firefox-one-version-back)
addBrowser(firefox-two-versions-back)
addBrowser(safari)
addBrowser(safari-one-version-back)
addBrowser(safari-two-versions-back)
addBrowser(edgechromium)
addBrowser(edgechromium-one-version-back)
addBrowser(edgechromium-two-versions-back)
addBrowser(edgelegacy)
addBrowser(ie)
addBrowser(ie10)
addBrowser(device)
addDeviceEmulation
addMultiDeviceTarget
mobileOptions
captureStatusBar
layoutBreakpoints
CheckSettings.layoutBreakpoints
environmentName
envName
baselineEnvName
deviceInfo
hostApp
hostAppInfo
hostOS
hostOSInfo
scaleRatio
CheckSettings.densityMetrics
eyesConfig.type

La grid de renderizado de Applitools

Las opciones de renderizado, los hooks, la descarga de recursos, las cachés y la concurrencia de la grid de Applitools no tienen equivalente: la página se verifica tal como la dejó el test. Un script que ejecutabas en un hook se ejecuta en el test, antes del check.

visualGridOptions
CheckSettings.ufgOption
CheckSettings.ufgOptions
CheckSettings.visualGridOption
CheckSettings.visualGridOptions
CheckSettings.variationGroupId
CheckSettings.hook
CheckSettings.beforeRenderScreenshotHook
CheckSettings.webHook
disableBrowserFetching
CheckSettings.disableBrowserFetching
disableNMLUrlCache
autProxy
bypassCSP
skipRootHtmlResource
concurrentSessions
RunnerOptions.testConcurrency
RunnerOptions.fetchConcurrency
RunnerOptions.removeDuplicateTests

Lotes, referencias y resultados

Una versión lleva el commit: no tiene nombre, ni secuencia, ni propiedades, ni notificación, ni nada que cerrar. Una referencia solo cambia cuando una persona revisa una diferencia en Delta-QA; un test sin referencia es «Nuevo». Los checks se emparejan por su nombre o, si no, por la dirección de su página. isDisabled: un test que debe ejecutarse sin check no abre ningún Eyes.

BatchInfo.name
BatchInfo.sequenceName
BatchInfo.startedAt
BatchInfo.notifyOnCompletion
BatchInfo.properties
BatchInfo.buildId
dontCloseBatches
BatchClose
properties
removeSession
saveDiffs
saveFailedTests
ignoreBaseline
displayName
sessionType
CheckSettings.pageId
isDisabled

Git

El SDK no lee git: indica la rama base con parentBranchName o baselineBranchName, y el commit con el id del lote o APPLITOOLS_BATCH_ID.

compareWithParentBranch
ignoreGitMergeBase
gitMergeBaseTimestamp
latestCommitInfo

Servidor, conexión y logs

Afectan al servidor de Applitools, a su conexión y a sus logs. El servidor de Delta-QA se lee en DELTAQA_SERVER_URL; el SDK no escribe ningún log de Applitools ni emite ningún evento de Applitools.

serverUrl
proxy
agentId
httpVersion
connectionTimeout
Eyes.on
Eyes.setLogHandler
Eyes.addSessionEventHandler
eyesConfig.logConfig
RunnerOptions.maskLog

Funciones fuera de Delta-QA

Delta-QA no valida la accesibilidad, no lee Figma y no tiene check en lenguaje natural; una página de Playwright no tiene web view.

accessibilityValidation
CheckSettings.accessibilityRegion
CheckSettings.accessibilityRegions
figmaBaselines
figmaOptions
nlpOptions
Target.webview
CheckSettings.webview

Regiones sin elemento

Delta-QA detecta los elementos que difieren: una región dada por coordenadas ({ x, y, width, height }, { left, top, width, height }) no tiene equivalente: la página se compara sin ella — entera, para Target.region. La zona es el elemento, sin padding; un regionId nombra una región en el dashboard de Applitools. Con Target.frame o Target.shadow, la página se compara entera, y una región indicada entonces por un selector hace fallar el check con un TypeError: una zona es un elemento de la propia página.

CheckSettings.ignoreRegions(coordinates)
Target.region(coordinates)
CodedRegion.padding
CodedRegion.regionId
Target.frame
Target.shadow
CheckSettings.frame
CheckSettings.shadow

Una clave desconocida en la forma objeto de una configuración o de un check genera una advertencia con su nombre (CheckSettings.<key> en un check).

Ausentes: lo que no compila

No son ajustes: devuelven datos que Delta-QA no tiene, o verifican una imagen en lugar de una página. Una suite que los usa no compila, en lugar de recibir un valor inventado.

Ausente	Por qué
`eyes.locate` `eyes.extractText` `eyes.extractTextRegions`	Devuelven regiones o texto que Applitools lee en su captura.
`eyes.checkImage` `Target.image` `Target.buffer` `Target.base64` `Target.path` `Target.url`	Delta-QA verifica páginas, no imágenes.
`eyes.getLogger` `eyes.logger`	El log de Applitools.
`eyes.run`	En la fixture de Applitools, su check en lenguaje natural.

Lo que difiere de Applitools

Decisiones deliberadas de Delta-QA, que conviene conocer antes de la primera ejecución.

Situación	Delta-QA
Emparejar un check con su referencia	Por el nombre del check cuando cada nombre es único en el test; si no, por orden, por nombre o, en su defecto, por la dirección de la página: un check añadido o eliminado no desplaza a los demás.
Un cambio aceptado en una rama	No hay fusión automática de referencias de una rama a otra. Cuando la misma diferencia aparece en otra rama, Delta-QA propone «Already intended on … — apply?».
Aceptar una diferencia	«Esperado» se aplica a las ramas que marques.
Sin `APPLITOOLS_BATCH_ID` ni `id` de lote	Una versión por proceso: cada worker de Playwright Test es un proceso, así que varios workers generan varias versiones — también con la fixture. Define `APPLITOOLS_BATCH_ID` con el commit de tu CI para compartir una sola versión.
Una región a ignorar que no coincide con ningún elemento	Se excluye y el check se envía sin ella, como hace Applitools — y una advertencia de Node.js con el código `DELTAQA_IGNORED_REGION` la nombra, una vez por región y por proceso (`node --disable-warning=DELTAQA_IGNORED_REGION` la silencia). Una región a verificar que no coincide con nada hace fallar el check con `ZoneNotFoundError`, como en Applitools.
`runner.getAllTestResults()` y un test que quedó abierto	El test se cierra y se da su veredicto; Applitools lo aborta.
Fixture: `eyesConfig` en el nivel superior de `playwright.config` y en un proyecto	La del proyecto sustituye a la del nivel superior, como Playwright Test aplica una opción; `test.use` añade sus claves a las del proyecto. La fixture de Applitools fusiona ambas clave por clave.
Fixture: `type: 'classic'` con `browsersInfo`	Cada tamaño es un entorno, como con `ClassicRunner` fuera de la fixture; la fixture de Applitools descarta los tamaños. `type` genera una advertencia.
Fixture: `expect(page).toHaveScreenshot()`	El de Playwright Test: `expect` es el de `@playwright/test`. La fixture de Applitools lo convierte en un check de Eyes.
Un test sin ningún check durante 30 minutos	Delta-QA lo cierra; `close()` lee entonces su veredicto.

Los datos que envías

Lo que envía el SDK — las páginas que verifican tus tests y los archivos que usan — solo sirve para compararlas. Probar con datos personales de producción es tu responsabilidad: ejecuta la suite con datos de prueba.

El SDK Vision: checks de Delta-QA en tus tests Playwright

Applitools, Applitools Eyes y Eyes son marcas comerciales de Applitools Ltd. Delta-QA no está afiliado a Applitools, ni cuenta con su aprobación ni con su patrocinio.

Ejecuta tu suite de Eyes en Delta-QA

Para usar Vision, contáctanos: está disponible primero en acceso anticipado. Cuéntanos qué tests quieres verificar y te abrimos el acceso.

Solicitar acceso a Vision Crea una cuenta gratis