Tengo el siguiente código:
<colored-item label="Label A" symbol-size-left="9.5" symbol-size-right="12" symbol-right="" symbol-left="<svg viewport="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24"> <rect x="0" y="0" width="24" height="24" stroke="black" fill="rgb(0, 91, 142)" stroke-width="0" /> </svg>" small-font="true"></colored-item>y necesito el valor del atributo "relleno" ("rgb (1, 89, 138)").
Intenté lo siguiente:
const fillColor = await Selector('colored-item').getAttribute('symbol-left');El resultado es:
<svg viewport="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24"> <rect x="0" y="0" width="24" height="24" stroke="black" fill="rgb(1, 89, 138)" stroke-width="0" /> </svg>cuando intento
const fillColor = await Selector('colored-item').withAttribute('symbol-left').getAttribute('fill');el resultado es "nulo"
¿Alguna idea de cómo acceder directamente al atributo "rellenar"?
De lo contrario, necesito usar expresiones regulares, ¿verdad?
Según tengo entendido, pones el elemento SVG en el atributo del colored-item . Pero para mostrar este SVG en la página, debe agregarse al DOM. Testcafe intenta buscar elementos por DOM, lo que significa que debe investigar los elementos DOM en la página y averiguar qué selector necesita usar exactamente. Según la información que veo, puede obtener estos atributos directamente desde rect : await Selector('rect').getAttribute('fill')
Finalmente lo resolví a través de expresiones regulares:
const fillColor = await (Selector('colored-item').getAttribute('symbol-left')).match(/fill="?([\d\w\(\ \,\)]*)"/)[1]; Si desea usarlo, simplemente sustituya fill=" con su cadena que se espera que excluya y al final el
" here )"/con su carácter final esperado (o cadena si es necesario)
El resultado será un partido y un grupo. Simplemente seleccione el grupo agregando [1] como se ve arriba.