Cómo modificar CSS por nombre de clase en Selenium

Question

Estoy aprendiendo a usar selenio en python y trato de modificar un css estilado http://www.google.com. Por ejemplo, el <span class="gbts"> ....</span> en esa página. Me gustaría modificar el gbts clase.

browser.execute_script("q = document.getElementById('gbts');" + "q.style.border = '1px solid red';")

¿Se llama un método API llamado? getElementByClass('gbts') ?

Answer 1

Está preguntando cómo obtener un elemento de su clase CSS usando JavaScript. Nada que ver con Selenium De Verdad.

De todos modos, tienes algunas opciones. Primero puede tomar el elemento usando Selenium (así que aquí, sí, Selenium es relevante):

element = driver.find_element_by_class_name("gbts")

Con una referencia a este elemento ya, es muy fácil darle un borde:

driver.execute_script("arguments[0].style.border = '1px solid red';")

(Nota la arguments[0])

Si realmente debe usar JavaScript y JavaScript solo, entonces está muy limitado. Esto es porque no hay getElementByClassName función dentro de JavaScript. Solamente getElementsByClassName lo que significa que devolvería un lista de elementos que coinciden con una clase dada.

Por lo tanto, debe dirigirse específicamente a qué elemento dentro de la lista, que se devuelve, desea cambiar. Si quisiera cambiar el el primero de todos elemento que tenía una clase de gbts, Lo haría:

driver.execute_script("document.getElementsByClassName('gbts')[0].style.border = '1px solid red';")

Le sugiero que vaya a la primera opción, lo que significa que Selenium hace el trabajo de la pierna por usted.

Answer 2

Otra opción de JavaScript pura que puede encontrar que le brinda más flexibilidad es usar document.querySelector().

No solo seleccionará automáticamente el primer elemento de los resultados establecidos para usted, sino que también dirá que tiene múltiples elementos con ese nombre de clase, sino que sabe que solo hay un elemento con ese nombre de clase dentro de un determinado elemento principal, puede restringir la búsqueda dentro de ese elemento principal, por ejemplo document.querySelector("#parent-div .gbts").

Ver el (Documentación de Mozilla) para más información.