fix: defectos encontrados por la suite de extremo a extremo
La primera corrida completa dio 57 fallas. Solo una parte eran del producto; el resto era instrumentación mal escrita. Queda en 261 en verde. Defectos del producto: - La atribución de campaña se perdía. La captura vivía en un efecto de React, así que si la persona llegaba con parámetros de campaña y navegaba antes de hidratar, el primer toque nunca se guardaba y utmCampaign llegaba vacío al CRM. Ahora se captura en un script en línea que corre al analizar el documento. - Siete páginas sin og:image: una página que declara su propio openGraph no hereda las imágenes del layout, las sobreescribe. Solo se nota al compartir el enlace. Se resuelve con una función compartida en seo.ts. - El panel no se podía usar desde Safari por HTTP: la cookie Secure no se guarda y el acceso falla en silencio. Queda explícito y documentado. - El panel se corría de lado en móvil: la cabecera no cabía a 375px. - Las tarjetas de perfil del acceso se cortaban en móvil. Un elemento de rejilla nace con min-width auto y no puede encogerse bajo su contenido. Era además el origen de un desplazamiento que se arrastraba al tablero. - Las tablas accesibles de las gráficas volvían desplazable la página: sr-only fija width 1px y el algoritmo de tablas lo ignora. - El campo de búsqueda del catálogo no tenía nombre accesible. - Límite de tasa de 5 envíos por IP: bloqueaba una demostración en vivo con varias personas en la misma red. Configurable, ahora 20. - El salto de contenido pasa de left:-9999px a recorte de 1px. Instrumentación corregida, con la razón escrita en cada caso: - El desborde horizontal se mide intentando desplazar la página, no con documentElement.scrollWidth, que sobreinforma con contenedores propios. - La comprobación de accesibilidad respeta el árbol de accesibilidad. - El aislamiento entre roles se prueba pidiendo por URL una oportunidad ajena, no comparando folios entre listados paginados. - Fuera las esperas por networkidle, que agotaban el tiempo sin fallar. - Que el panel no esté enlazado se comprueba leyendo el HTML servido. - Safari no enfoca enlaces con Tab: declarado como del navegador. Co-Authored-By: Claude Opus 5 (1M context) <[email protected]>
This commit is contained in:
Uriel Jareth
co-authored by
Claude Opus 5
Claude Opus 5
parent
0e0331c1fc
commit
31ee899987
+33
-10
@@ -21,14 +21,34 @@ import { ANCHOS, RUTAS_MUESTRA } from "./rutas";
|
||||
*/
|
||||
test.describe.configure({ mode: "parallel" });
|
||||
|
||||
async function desbordaEnHorizontal(page: Page): Promise<{ desborda: boolean; ancho: number; visible: number }> {
|
||||
/**
|
||||
* Mide el síntoma, no una propiedad intermedia.
|
||||
*
|
||||
* La primera versión de esta función comparaba `documentElement.scrollWidth`
|
||||
* contra `clientWidth`, y producía falsos positivos: en `/evidencia`,
|
||||
* `html.scrollWidth` reporta 865px a 320px de ventana mientras
|
||||
* `body.scrollWidth` es 320 y la página **no se puede desplazar**. Chromium y
|
||||
* WebKit coinciden en ese reporte, así que es comportamiento esperado alrededor
|
||||
* del desbordamiento de un contenedor con scroll propio, no un defecto.
|
||||
*
|
||||
* Lo único que le importa a la persona es si la página se corre de lado. Eso se
|
||||
* comprueba intentando desplazarla y viendo si se movió. `body.scrollWidth`
|
||||
* queda como dato de apoyo para el diagnóstico.
|
||||
*/
|
||||
async function desbordaEnHorizontal(
|
||||
page: Page,
|
||||
): Promise<{ desborda: boolean; ancho: number; visible: number; movio: number }> {
|
||||
return page.evaluate(() => {
|
||||
const doc = document.documentElement;
|
||||
const antes = window.scrollX;
|
||||
window.scrollTo(800, window.scrollY);
|
||||
const movio = window.scrollX;
|
||||
window.scrollTo(antes, window.scrollY);
|
||||
return {
|
||||
// 2px de tolerancia por redondeo de subpíxel
|
||||
desborda: doc.scrollWidth > doc.clientWidth + 2,
|
||||
ancho: doc.scrollWidth,
|
||||
desborda: movio > 2,
|
||||
ancho: document.body.scrollWidth,
|
||||
visible: doc.clientWidth,
|
||||
movio,
|
||||
};
|
||||
});
|
||||
}
|
||||
@@ -41,7 +61,10 @@ async function culpablesDeDesborde(page: Page): Promise<string[]> {
|
||||
for (const el of Array.from(document.querySelectorAll<HTMLElement>("body *"))) {
|
||||
const r = el.getBoundingClientRect();
|
||||
if (r.width === 0 || r.height === 0) continue;
|
||||
if (r.right > limite + 2 || r.left < -2) {
|
||||
// solo cuenta lo que sobresale a la DERECHA: un elemento colocado fuera
|
||||
// de pantalla a la izquierda, como el salto de contenido, no agranda el
|
||||
// área desplazable en escritura de izquierda a derecha
|
||||
if (r.right > limite + 2) {
|
||||
// ignoramos lo que desborda a propósito dentro de su propio contenedor con scroll
|
||||
let padre: HTMLElement | null = el.parentElement;
|
||||
let contenido = false;
|
||||
@@ -71,7 +94,7 @@ for (const ruta of RUTAS_MUESTRA) {
|
||||
"El barrido de anchos corre solo en los dos proyectos de escritorio; ver la nota de arriba.",
|
||||
);
|
||||
|
||||
await page.goto(ruta, { waitUntil: "networkidle" });
|
||||
await page.goto(ruta, { waitUntil: "domcontentloaded" });
|
||||
|
||||
for (const ancho of ANCHOS) {
|
||||
await page.setViewportSize({ width: ancho, height: 900 });
|
||||
@@ -83,7 +106,7 @@ for (const ruta of RUTAS_MUESTRA) {
|
||||
const culpables = await culpablesDeDesborde(page);
|
||||
expect(
|
||||
r.desborda,
|
||||
`${ruta} desborda a ${ancho}px (documento ${r.ancho}px sobre ventana ${r.visible}px). Sospechosos: ${culpables.join(", ") || "no identificados"}`,
|
||||
`${ruta} se desplaza en horizontal a ${ancho}px de ancho: la página se corrió ${r.movio}px (cuerpo ${r.ancho}px sobre ventana ${r.visible}px). Sospechosos: ${culpables.join(", ") || "no identificados"}`,
|
||||
).toBe(false);
|
||||
}
|
||||
}
|
||||
@@ -120,13 +143,13 @@ test("el widget de WhatsApp no tapa contenido ni desborda en móvil", async ({ p
|
||||
expect(caja!.x + caja!.width, "el panel se sale por la derecha").toBeLessThanOrEqual(321);
|
||||
|
||||
const r = await desbordaEnHorizontal(page);
|
||||
expect(r.desborda, "el widget abierto no debe provocar desborde del documento").toBe(false);
|
||||
expect(r.desborda, "el widget abierto no debe hacer que la página se desplace de lado").toBe(false);
|
||||
});
|
||||
|
||||
test("las tablas anchas se desplazan dentro de su contenedor", async ({ page }) => {
|
||||
await page.setViewportSize({ width: 375, height: 780 });
|
||||
await page.goto("/catalogo", { waitUntil: "networkidle" });
|
||||
await page.goto("/catalogo", { waitUntil: "domcontentloaded" });
|
||||
|
||||
const r = await desbordaEnHorizontal(page);
|
||||
expect(r.desborda, "el comparador no debe desplazar el cuerpo de la página").toBe(false);
|
||||
expect(r.desborda, "el comparador debe desplazarse dentro de su contenedor, no mover la página").toBe(false);
|
||||
});
|
||||
|
||||
@@ -94,7 +94,9 @@ test("un mismo contacto puede enviar varias veces y se acumula", async ({ page }
|
||||
await forma.getByRole("button", { name: /recibir cotizaci/i }).click();
|
||||
|
||||
const aviso = page.getByText(/OPP-\d{4}-\d{4}/);
|
||||
await expect(aviso).toBeVisible({ timeout: 15_000 });
|
||||
// WebKit en móvil tarda más en pintar el acuse; el margen es de espera, no
|
||||
// de tolerancia: si no aparece, la prueba sigue fallando
|
||||
await expect(aviso).toBeVisible({ timeout: 25_000 });
|
||||
const texto = (await aviso.first().textContent()) ?? "";
|
||||
const folio = texto.match(/OPP-\d{4}-\d{4}/)?.[0];
|
||||
expect(folio, `envío ${i + 1} debe devolver folio`).toBeTruthy();
|
||||
|
||||
+111
-35
@@ -29,11 +29,27 @@ async function accesoRapido(page: Page, rol: "admin" | "vendedor"): Promise<stri
|
||||
return nombre;
|
||||
}
|
||||
|
||||
test("el panel no se enlaza desde ninguna página pública", async ({ page }) => {
|
||||
for (const ruta of ["/", "/catalogo", "/contacto", "/soluciones"]) {
|
||||
await page.goto(ruta, { waitUntil: "domcontentloaded" });
|
||||
const enlaces = page.locator('a[href^="/admin"]');
|
||||
await expect(enlaces, `${ruta} no debe enlazar al panel`).toHaveCount(0);
|
||||
/**
|
||||
* Que el panel no esté enlazado es una propiedad del HTML servido, no del
|
||||
* navegador: se comprueba leyendo el marcado, sin abrir páginas.
|
||||
*
|
||||
* La versión anterior navegaba las cuatro rutas en un bucle y se caía sola —
|
||||
* `net::ERR_ABORTED` al abortar la navegación previa, y tiempos agotados al
|
||||
* esperar la carga completa de cada una— sin llegar nunca a evaluar lo que
|
||||
* pretendía. Esta versión es determinista y termina en milisegundos.
|
||||
*/
|
||||
test("el panel no se enlaza desde ninguna página pública", async ({ request }) => {
|
||||
for (const ruta of ["/", "/catalogo", "/contacto", "/soluciones", "/producto/enforcer-10"]) {
|
||||
const res = await request.get(ruta);
|
||||
expect(res.status(), `${ruta} debe responder`).toBe(200);
|
||||
|
||||
const html = await res.text();
|
||||
const enlaces = [...html.matchAll(/href="(\/admin[^"]*)"/g)].map((m) => m[1]);
|
||||
|
||||
expect(
|
||||
enlaces,
|
||||
`${ruta} enlaza al panel, y el panel no debe estar expuesto en el sitio público`,
|
||||
).toEqual([]);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -59,6 +75,14 @@ test("el administrador entra de un clic y ve el tablero con datos", async ({ pag
|
||||
const numeros = cuerpo.match(/\d+/g) ?? [];
|
||||
expect(numeros.length, "el tablero debe mostrar cifras").toBeGreaterThan(8);
|
||||
|
||||
// En móvil la navegación del panel vive en un cajón cerrado, así que los
|
||||
// enlaces existen pero no están visibles. Se abre primero, que es lo que hace
|
||||
// cualquiera, y de paso se comprueba que el cajón funcione.
|
||||
const disparadorMenu = page.getByRole("button", { name: /men[úu]/i }).first();
|
||||
if (await disparadorMenu.isVisible().catch(() => false)) {
|
||||
await disparadorMenu.click();
|
||||
}
|
||||
|
||||
// navegación completa disponible para el administrador
|
||||
for (const seccion of [/oportunidades/i, /contactos/i, /pedidos/i, /anal[íi]tica/i, /equipo/i, /reglas/i]) {
|
||||
await expect(page.getByRole("link", { name: seccion }).first(), `falta ${seccion}`).toBeVisible();
|
||||
@@ -82,7 +106,7 @@ test("el vendedor no ve las secciones de administración", async ({ page }) => {
|
||||
|
||||
test("el vendedor solo ve oportunidades propias", async ({ page }) => {
|
||||
const nombreVendedor = await accesoRapido(page, "vendedor");
|
||||
await page.goto("/admin/oportunidades", { waitUntil: "networkidle" });
|
||||
await page.goto("/admin/oportunidades", { waitUntil: "domcontentloaded" });
|
||||
|
||||
const filas = page.locator("table tbody tr");
|
||||
const total = await filas.count();
|
||||
@@ -101,34 +125,65 @@ test("el vendedor solo ve oportunidades propias", async ({ page }) => {
|
||||
expect(total, "el vendedor debe ver un subconjunto acotado").toBeLessThan(200);
|
||||
});
|
||||
|
||||
test("el administrador ve más oportunidades que un vendedor", async ({ browser }) => {
|
||||
/**
|
||||
* La propiedad que importa no es cuántos folios se ven en la primera página
|
||||
* —ambos listados están paginados, así que un folio del vendedor puede estar en
|
||||
* la página tres del administrador y la comparación no probaría nada— sino que
|
||||
* un vendedor **no pueda abrir** una oportunidad que no le pertenece.
|
||||
*
|
||||
* Eso es una falla de seguridad si se rompe, no un detalle de interfaz.
|
||||
*/
|
||||
test("un vendedor no puede abrir una oportunidad de otra persona", async ({ browser }) => {
|
||||
const ctxAdmin = await browser.newContext();
|
||||
const ctxVendedor = await browser.newContext();
|
||||
const pAdmin = await ctxAdmin.newPage();
|
||||
const pVendedor = await ctxVendedor.newPage();
|
||||
|
||||
try {
|
||||
// el administrador reúne los identificadores de todo el universo
|
||||
await accesoRapido(pAdmin, "admin");
|
||||
await pAdmin.goto("/admin/oportunidades", { waitUntil: "networkidle" });
|
||||
const textoAdmin = (await pAdmin.locator("body").textContent()) ?? "";
|
||||
await pAdmin.goto("/admin/oportunidades?porPagina=100", { waitUntil: "domcontentloaded" });
|
||||
const idsAdmin = await pAdmin.evaluate(() =>
|
||||
Array.from(document.querySelectorAll('a[href*="/admin/oportunidades/"]'))
|
||||
.map((a) => a.getAttribute("href")!.split("/admin/oportunidades/")[1]?.split(/[?#]/)[0] ?? "")
|
||||
.filter((v) => v.length > 6),
|
||||
);
|
||||
expect(idsAdmin.length, "el administrador debe ver oportunidades").toBeGreaterThan(0);
|
||||
|
||||
// el vendedor reúne las suyas
|
||||
await accesoRapido(pVendedor, "vendedor");
|
||||
await pVendedor.goto("/admin/oportunidades", { waitUntil: "networkidle" });
|
||||
const textoVendedor = (await pVendedor.locator("body").textContent()) ?? "";
|
||||
await pVendedor.goto("/admin/oportunidades?porPagina=100", { waitUntil: "domcontentloaded" });
|
||||
const idsVendedor = new Set(
|
||||
await pVendedor.evaluate(() =>
|
||||
Array.from(document.querySelectorAll('a[href*="/admin/oportunidades/"]'))
|
||||
.map((a) => a.getAttribute("href")!.split("/admin/oportunidades/")[1]?.split(/[?#]/)[0] ?? "")
|
||||
.filter((v) => v.length > 6),
|
||||
),
|
||||
);
|
||||
|
||||
const foliosAdmin = new Set(textoAdmin.match(/OPP-\d{4}-\d{4}/g) ?? []);
|
||||
const foliosVendedor = new Set(textoVendedor.match(/OPP-\d{4}-\d{4}/g) ?? []);
|
||||
|
||||
expect(foliosAdmin.size, "el administrador debe ver folios").toBeGreaterThan(0);
|
||||
// el alcance del vendedor tiene que ser un subconjunto propio
|
||||
expect(
|
||||
foliosAdmin.size,
|
||||
"el alcance del administrador debe ser mayor o igual al del vendedor",
|
||||
).toBeGreaterThanOrEqual(foliosVendedor.size);
|
||||
idsVendedor.size,
|
||||
"el vendedor no debería ver todo el universo del administrador",
|
||||
).toBeLessThan(idsAdmin.length);
|
||||
|
||||
// y ningún folio del vendedor debe estar fuera del universo del administrador
|
||||
for (const f of foliosVendedor) {
|
||||
expect(foliosAdmin.has(f), `el folio ${f} del vendedor no aparece para el administrador`).toBe(true);
|
||||
}
|
||||
// y una oportunidad ajena, pedida por URL directa, debe negarse
|
||||
const ajena = idsAdmin.find((id) => !idsVendedor.has(id));
|
||||
expect(ajena, "hace falta una oportunidad ajena para probar el aislamiento").toBeTruthy();
|
||||
|
||||
const res = await pVendedor.goto(`/admin/oportunidades/${ajena}`, {
|
||||
waitUntil: "domcontentloaded",
|
||||
});
|
||||
const cuerpo = (await pVendedor.locator("body").textContent()) ?? "";
|
||||
const negado =
|
||||
res?.status() === 404 ||
|
||||
!pVendedor.url().includes(ajena!) ||
|
||||
/no encontrad|sin permiso|no autorizado|no tienes/i.test(cuerpo);
|
||||
|
||||
expect(
|
||||
negado,
|
||||
`un vendedor abrió la oportunidad ajena ${ajena} — es una fuga de datos entre roles`,
|
||||
).toBe(true);
|
||||
} finally {
|
||||
await ctxAdmin.close();
|
||||
await ctxVendedor.close();
|
||||
@@ -137,12 +192,18 @@ test("el administrador ve más oportunidades que un vendedor", async ({ browser
|
||||
|
||||
test("el detalle de una oportunidad muestra la atribución completa", async ({ page }) => {
|
||||
await accesoRapido(page, "admin");
|
||||
await page.goto("/admin/oportunidades", { waitUntil: "networkidle" });
|
||||
await page.goto("/admin/oportunidades", { waitUntil: "domcontentloaded" });
|
||||
|
||||
const primera = page.locator('a[href^="/admin/oportunidades/"]').first();
|
||||
await expect(primera).toBeVisible();
|
||||
await primera.click();
|
||||
await page.waitForLoadState("networkidle");
|
||||
// se navega por URL con un identificador real: hacer clic en "el primer
|
||||
// enlace que empiece con la ruta" caía en un enlace del propio listado y la
|
||||
// prueba terminaba comprobando la lista, no el detalle
|
||||
const id = await page.evaluate(() => {
|
||||
const a = document.querySelector('a[href*="/admin/oportunidades/"]');
|
||||
return a?.getAttribute("href")?.split("/admin/oportunidades/")[1]?.split(/[?#]/)[0] ?? null;
|
||||
});
|
||||
expect(id, "el listado debe ofrecer al menos una oportunidad").toBeTruthy();
|
||||
await page.goto(`/admin/oportunidades/${id}`, { waitUntil: "domcontentloaded" });
|
||||
await expect(page.getByRole("heading", { level: 1 })).toBeVisible();
|
||||
|
||||
const cuerpo = (await page.locator("body").textContent()) ?? "";
|
||||
// los campos que justifican todo el sistema de medición de campañas
|
||||
@@ -154,12 +215,14 @@ test("el detalle de una oportunidad muestra la atribución completa", async ({ p
|
||||
|
||||
test("el historial del contacto acumula sus envíos", async ({ page }) => {
|
||||
await accesoRapido(page, "admin");
|
||||
await page.goto("/admin/contactos", { waitUntil: "networkidle" });
|
||||
await page.goto("/admin/contactos", { waitUntil: "domcontentloaded" });
|
||||
|
||||
const primera = page.locator('a[href^="/admin/contactos/"]').first();
|
||||
await expect(primera).toBeVisible();
|
||||
await primera.click();
|
||||
await page.waitForLoadState("networkidle");
|
||||
const id = await page.evaluate(() => {
|
||||
const a = document.querySelector('a[href*="/admin/contactos/"]');
|
||||
return a?.getAttribute("href")?.split("/admin/contactos/")[1]?.split(/[?#]/)[0] ?? null;
|
||||
});
|
||||
expect(id, "el listado debe ofrecer al menos un contacto").toBeTruthy();
|
||||
await page.goto(`/admin/contactos/${id}`, { waitUntil: "domcontentloaded" });
|
||||
|
||||
const cuerpo = (await page.locator("body").textContent()) ?? "";
|
||||
expect(cuerpo, "la ficha del contacto debe listar sus oportunidades").toMatch(/OPP-\d{4}-\d{4}/);
|
||||
@@ -168,12 +231,25 @@ test("el historial del contacto acumula sus envíos", async ({ page }) => {
|
||||
test("el panel es usable en móvil", async ({ page }) => {
|
||||
await page.setViewportSize({ width: 375, height: 780 });
|
||||
await accesoRapido(page, "admin");
|
||||
// se recarga el tablero para medir sin el desplazamiento residual que deja el
|
||||
// envío del formulario de acceso; es además el estado en el que cualquiera ve
|
||||
// el panel a partir de su segunda página
|
||||
await page.goto("/admin", { waitUntil: "domcontentloaded" });
|
||||
await page.locator("h1").first().waitFor({ state: "visible" });
|
||||
|
||||
// se mide si la página se corre de lado, que es lo único que percibe la
|
||||
// persona; `documentElement.scrollWidth` da falsos positivos cuando hay
|
||||
// contenedores con scroll propio
|
||||
const r = await page.evaluate(() => {
|
||||
const d = document.documentElement;
|
||||
return { desborda: d.scrollWidth > d.clientWidth + 2, ancho: d.scrollWidth, visible: d.clientWidth };
|
||||
window.scrollTo(800, window.scrollY);
|
||||
const movio = window.scrollX;
|
||||
window.scrollTo(0, window.scrollY);
|
||||
return { movio, cuerpo: document.body.scrollWidth, visible: document.documentElement.clientWidth };
|
||||
});
|
||||
expect(r.desborda, `el tablero desborda en móvil (${r.ancho} sobre ${r.visible})`).toBe(false);
|
||||
expect(
|
||||
r.movio > 2,
|
||||
`el tablero se desplaza en horizontal en móvil: se corrió ${r.movio}px (cuerpo ${r.cuerpo} sobre ${r.visible})`,
|
||||
).toBe(false);
|
||||
});
|
||||
|
||||
test("cerrar sesión devuelve al acceso", async ({ page }) => {
|
||||
|
||||
@@ -10,7 +10,11 @@ import { RUTAS_MUESTRA } from "./rutas";
|
||||
|
||||
for (const ruta of RUTAS_MUESTRA) {
|
||||
test(`accesibilidad básica en ${ruta}`, async ({ page }) => {
|
||||
await page.goto(ruta, { waitUntil: "networkidle" });
|
||||
await page.goto(ruta, { waitUntil: "domcontentloaded" });
|
||||
// las comprobaciones miden cajas, así que hace falta que el diseño ya haya
|
||||
// asentado; se espera una condición concreta en lugar de la red en reposo
|
||||
await page.locator("h1").first().waitFor({ state: "visible" });
|
||||
await page.waitForTimeout(400);
|
||||
|
||||
const problemas = await page.evaluate(() => {
|
||||
const fallas: string[] = [];
|
||||
@@ -48,6 +52,12 @@ for (const ruta of RUTAS_MUESTRA) {
|
||||
for (const el of Array.from(document.querySelectorAll<HTMLElement>("button, a"))) {
|
||||
const r = el.getBoundingClientRect();
|
||||
if (r.width === 0 && r.height === 0) continue;
|
||||
// Un elemento marcado como oculto al árbol de accesibilidad no aparece
|
||||
// para un lector de pantalla, así que no necesita nombre. Es el caso
|
||||
// legítimo de la imagen de una tarjeta que duplica el enlace del
|
||||
// título: se marca aria-hidden con tabindex -1 justo para no anunciar
|
||||
// dos veces el mismo destino. Exigirle nombre era un falso positivo.
|
||||
if (el.closest('[aria-hidden="true"]')) continue;
|
||||
const texto = (el.textContent ?? "").trim();
|
||||
const nombre = texto || el.getAttribute("aria-label") || el.getAttribute("title") || "";
|
||||
if (!nombre) {
|
||||
@@ -85,7 +95,17 @@ for (const ruta of RUTAS_MUESTRA) {
|
||||
});
|
||||
}
|
||||
|
||||
test("el salto al contenido funciona con teclado", async ({ page }) => {
|
||||
test("el salto al contenido funciona con teclado", async ({ page }, info) => {
|
||||
// Safari no lleva el foco a los enlaces con Tab salvo que la persona active
|
||||
// "Presionar Tab para resaltar cada elemento" en sus preferencias. Es
|
||||
// comportamiento del navegador, no del sitio, así que la comprobación no
|
||||
// aplica en WebKit: ahí el salto sigue existiendo y sigue siendo alcanzable
|
||||
// con las teclas de accesibilidad del sistema.
|
||||
test.skip(
|
||||
info.project.name.includes("webkit"),
|
||||
"En Safari el tabulador no enfoca enlaces por omisión; es del navegador, no del sitio.",
|
||||
);
|
||||
|
||||
await page.goto("/", { waitUntil: "domcontentloaded" });
|
||||
await page.keyboard.press("Tab");
|
||||
|
||||
@@ -97,7 +117,12 @@ test("el salto al contenido funciona con teclado", async ({ page }) => {
|
||||
expect(enfocado.href).toBe("#contenido");
|
||||
});
|
||||
|
||||
test("el foco es visible al navegar con teclado", async ({ page }) => {
|
||||
test("el foco es visible al navegar con teclado", async ({ page }, info) => {
|
||||
test.skip(
|
||||
info.project.name.includes("webkit"),
|
||||
"Misma razón: en Safari el tabulador no recorre los enlaces por omisión.",
|
||||
);
|
||||
|
||||
await page.goto("/", { waitUntil: "domcontentloaded" });
|
||||
for (let i = 0; i < 5; i++) await page.keyboard.press("Tab");
|
||||
|
||||
@@ -131,7 +156,7 @@ test("el widget de WhatsApp se cierra con Escape y devuelve el foco", async ({ p
|
||||
|
||||
test("se respeta la preferencia de movimiento reducido", async ({ page }) => {
|
||||
await page.emulateMedia({ reducedMotion: "reduce" });
|
||||
await page.goto("/", { waitUntil: "networkidle" });
|
||||
await page.goto("/", { waitUntil: "domcontentloaded" });
|
||||
|
||||
// con movimiento reducido, el contenido revelado debe estar visible, no atorado en opacidad 0
|
||||
const ocultos = await page.evaluate(() => {
|
||||
|
||||
@@ -1,23 +0,0 @@
|
||||
import { chromium, webkit } from "@playwright/test";
|
||||
|
||||
const BASE = "http://127.0.0.1:3100";
|
||||
const OBJETIVOS = [
|
||||
{ ruta: "/", nombre: "inicio", ancho: 1440, alto: 1000, completa: false },
|
||||
{ ruta: "/", nombre: "inicio-movil", ancho: 375, alto: 900, completa: false, motor: "webkit" },
|
||||
{ ruta: "/catalogo", nombre: "catalogo", ancho: 1440, alto: 1000, completa: false },
|
||||
{ ruta: "/producto/enforcer-10", nombre: "producto", ancho: 1440, alto: 1400, completa: false },
|
||||
{ ruta: "/soluciones/industria-energia", nombre: "solucion", ancho: 1440, alto: 1000, completa: false },
|
||||
{ ruta: "/admin/login", nombre: "login", ancho: 1440, alto: 1000, completa: false },
|
||||
];
|
||||
|
||||
for (const o of OBJETIVOS) {
|
||||
const motor = o.motor === "webkit" ? webkit : chromium;
|
||||
const nav = await motor.launch();
|
||||
const ctx = await nav.newContext({ viewport: { width: o.ancho, height: o.alto }, locale: "es-MX" });
|
||||
const pag = await ctx.newPage();
|
||||
await pag.goto(BASE + o.ruta, { waitUntil: "networkidle" });
|
||||
await pag.waitForTimeout(1200);
|
||||
await pag.screenshot({ path: `tests/reporte/vista/${o.nombre}.png`, fullPage: o.completa });
|
||||
console.log(`ok ${o.nombre} ${o.ancho}px ${o.motor ?? "chromium"}`);
|
||||
await nav.close();
|
||||
}
|
||||
Reference in New Issue
Block a user