Hizo clic, pero no en el elemento que quería
Tres botones idénticos, una lista que creció cuatro filas, un selector que ayer funcionaba. Cada objetivo es un selector CSS, así que cada error aquí es un error de selector.
El síntoma. El clic funciona y algo ocurre, pero no lo que usted quería: la fila equivocada borrada, el diálogo equivocado abierto, la acción aplicada al elemento equivocado.
No se informa de ningún error, porque mecánicamente nada falló: Dinoer hizo clic en lo que usted designó. Cada objetivo es un selector CSS, así que el error está en el selector.
Causa 1: varios elementos coinciden con el selector
Una página con tres botones «Clone», uno por fila. Este selector toma el primero en el orden del documento:
{"type": "cliquer", "selecteur": "button:has-text('Clone')"}
La acción se ejecuta entonces sobre otra fila distinta de la que quería, y nada en la respuesta lo indica.
La solución: designar, no describir. Precise el selector con algo que solo tenga esa fila:
{"type": "cliquer", "selecteur": "button[title='Clone example-two']"}
Si nada en el marcado es único, evaluer puede encontrar el elemento correcto
por su contenido antes de actuar:
{"type": "evaluer",
"script": "Array.from(document.querySelectorAll('tr')).findIndex(tr => tr.textContent.includes('example-two'))"}
Causa 2: un selector basado en la posición, y la posición cambió
:nth-child() y :nth-of-type() designan una fila por su lugar en la lista,
no por lo que es. Si entre la escritura del escenario y su ejecución aparecen
cuatro filas por encima del objetivo, el objetivo se desplaza cuatro puestos.
Un escenario probado en una página con una fila falla en la misma página con
cinco: el mismo selector, otro resultado, ningún error.
La solución. No codifique nunca una posición donde basta el contenido:
{"type": "cliquer", "selecteur": "tr:nth-child(3) button.delete"}
{"type": "cliquer", "selecteur": "tr:has-text('example-two') button.delete"}
La segunda versión sigue funcionando cuando la lista cambia, porque designa la fila por lo que contiene y no por el lugar que ocupa.
Identificar por el contenido, no por la posición
«La tercera fila es la más reciente» es cierto hasta que alguien añade una cuarta.
Cuando el objetivo lleva algo que lo identifica (una marca de tiempo, un slug,
un identificador), construya el selector a partir de ello, o léalo primero con
evaluer y decida según lo que devuelva:
{"type": "evaluer",
"script": "Array.from(document.querySelectorAll('input.chk-item')).map(i => i.value)"}
En resumen
- Un selector que coincide con varios elementos toma el primero, sin avisar.
:nth-child()y:nth-of-type()se rompen cuando cambia la lista; use un selector basado en el contenido siempre que exista uno.evaluerpuede localizar un elemento por su contenido antes de elegir un selector.- Identifique los objetivos por lo que contienen, nunca por su lugar en una lista.