Localización de elementos en Selenium

En Selenium, la localización de elementos es el núcleo de las pruebas automatizadas y las operaciones en páginas web.

Al localizar elementos, se pueden realizar operaciones como hacer clic, ingresar texto, obtener atributos, etc.

Conceptos básicos de la localización de elementos

¿Qué es la localización de elementos?

La localización de elementos se refiere a encontrar elementos específicos en una página web mediante algún método (como botones, campos de entrada, enlaces, etc.).

¿Por qué se necesita la localización de elementos?

Las operaciones automatizadas requieren encontrar con precisión el elemento objetivo para poder ejecutar operaciones posteriores (como hacer clic, ingresar texto, etc.).

Unicidad de la localización de elementos.

Asegúrese de que el elemento localizado sea único para evitar operar sobre el elemento incorrecto.

Métodos de localización

Selenium ofrece varios métodos para localizar elementos; los más comunes son los siguientes:

1. Localizar por ID

Método:find_element(By.ID, "id_value")

Descripción:Localiza mediante el atributo id del elemento.

from selenium.webdriver.common.by import By

element = driver.find_element(By.ID, "username")

2. Localizar por Name

Método:find_element(By.NAME, "name_value")

Descripción:Localiza mediante el atributo name del elemento.

element = driver.find_element(By.NAME, "password")

3. Localizar por Class Name

Método:find_element(By.CLASS_NAME, "class_name")

Descripción:Localiza mediante el atributo class del elemento.

element = driver.find_element(By.CLASS_NAME, "submit-btn")

4. Localizar por Tag Name

Método:find_element(By.TAG_NAME, "tag_name")

Descripción:Localiza mediante el nombre de etiqueta del elemento (como <div>, <input>, etc.).

 element = driver.find_element(By.TAG_NAME, "input")

5. Localizar mediante selectores CSS

Método:find_element(By.CSS_SELECTOR, "css_selector")

Descripción:Localiza elementos mediante selectores CSS.

 element = driver.find_element(By.CSS_SELECTOR, "input#username")

6. Localizar mediante XPath

Método:find_element(By.XPATH, "xpath_expression")

Descripción:Localiza elementos mediante expresiones XPath.

 element = driver.find_element(By.XPATH, "//input[@id='username']")

7. Localizar por Link Text

Método:find_element(By.LINK_TEXT, "link_text")

Descripción:Localiza mediante el contenido de texto del enlace (aplicable a la etiqueta <a>).

 element = driver.find_element(By.LINK_TEXT, "Click Here")

8. Localizar por Partial Link Text

Método:find_element(By.PARTIAL_LINK_TEXT, "partial_link_text")

Descripción:Localiza mediante una parte del texto del enlace.

 element = driver.find_element(By.PARTIAL_LINK_TEXT, "Click")

Mejores prácticas para la localización de elementos

Priorizar el uso de atributos únicos：

  • Utilice en lo posibleid、namey otros atributos únicos para localizar elementos.

Evitar el uso de atributos dinámicos：

  • Si los atributos del elemento se generan dinámicamente (como ID aleatorios), evite usar estos atributos directamente para localizar.

Usar localización relativa：

  • Use XPath o selectores CSS combinados con la relación jerárquica de los elementos para localizar.

Agregar mecanismos de espera：

  • Use espera implícita o espera explícita para asegurarse de que el elemento esté completamente cargado antes de realizar operaciones.

Métodos de localización de elementos más comunes

Selenium ofrece varios métodos para localizar elementos; cada método es adecuado para diferentes escenarios. A continuación se presentan los métodos más comunes:

1, find_element_by_id

find_element_by_idlocaliza el elemento mediante el atributoiddel elemento.idEl atributo es único en HTML, por lo que este método suele ser el más directo y eficiente.

Ejemplo

element = driver.find_element_by_id("element_id")

2, find_element_by_name

find_element_by_namelocaliza el elemento mediante el atributonamedel elemento.nameEste atributo es muy común en los elementos de formulario.

Ejemplo

element = driver.find_element_by_name("element_name")

3, find_element_by_class_name

find_element_by_class_namelocaliza el elemento mediante el atributoclassdel elemento.classEste atributo se utiliza generalmente para definiciones de estilo; puede haber varios elementos que compartan el mismoclass。

Ejemplo

element = driver.find_element_by_class_name("element_class")

4, find_element_by_tag_name

find_element_by_tag_namelocaliza el elemento mediante el nombre de etiqueta del elemento. Nombres de etiqueta comodiv、input、aetc.

Ejemplo

element = driver.find_element_by_tag_name("tag_name")

5, find_element_by_css_selector

find_element_by_css_selectorlocaliza elementos mediante selectores CSS. Los selectores CSS son muy flexibles y pueden combinar múltiples condiciones.

Ejemplo

element = driver.find_element_by_css_selector("css_selector")

6, find_element_by_xpath

find_element_by_xpathlocaliza elementos mediante expresiones XPath. XPath es un lenguaje para localizar nodos en documentos XML y es muy potente.

Ejemplo

element = driver.find_element_by_xpath("xpath_expression")

7, find_element_by_link_text

find_element_by_link_textlocaliza el elemento mediante el contenido de texto del enlace. Es adecuado para localizar<a>etiquetas.

Ejemplo

element = driver.find_element_by_link_text("link_text")

8, find_element_by_partial_link_text

find_element_by_partial_link_textlocaliza elementos mediante parte del texto del enlace. Es adecuado para escenarios donde el texto es largo o se requiere una coincidencia parcial.

Ejemplo

element = driver.find_element_by_partial_link_text("partial_link_text")

Localizar múltiples elementos (find_elements）

A veces necesitamos localizar varios elementos, no uno solo. Selenium proporciona el métodofind_elementsmétodo, que devuelve una lista de elementos.

Ejemplo

elements = driver.find_elements_by_class_name("element_class")

find_elementsEl métodofind_elementse utiliza de la misma manera que el método, solo que devuelve una lista.

Técnicas para localizar elementos dinámicos

En las aplicaciones web, los atributos de algunos elementos se generan dinámicamente y cambian cada vez que se actualiza la página. Para manejar este tipo de elementos dinámicos, se pueden usar las siguientes técnicas:

1. Usar rutas relativas

En XPath o selectores CSS, use rutas relativas en lugar de rutas absolutas. Las rutas relativas evitan fallos de localización debidos a cambios en la posición del elemento.

Ejemplo

element = driver.find_element_by_xpath("//div[@class='dynamic_class']")

2. Usar coincidencias parciales

Para losidoclassgenerados dinámicamente, se puede usar el método de coincidencia parcial para localizar elementos. Por ejemplo, utilice lacontainsfunción.

Ejemplo

element = driver.find_element_by_xpath("//div[contains(@id, 'dynamic_part')]")

3. Usar mecanismos de espera

Los elementos dinámicos pueden no aparecer inmediatamente en la página; se puede usar el mecanismo de espera de Selenium para esperar a que aparezca el elemento.

Ejemplo

from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

element = WebDriverWait(driver, 10).until(
    EC.presence_of_element_located((By.ID, "dynamic_id"))
)

4. Usar JavaScript para localizar

En algunos casos, se puede ejecutar JavaScript para localizar elementos dinámicos.

Ejemplo

element = driver.execute_script("return document.querySelector('dynamic_selector');")

Ejemplo completo

Selenium ofrece una amplia variedad de métodos para localizar elementos; dominar estos métodos nos ayuda a localizar elementos de la página de manera eficiente.

Para elementos dinámicos, aplicar de forma flexible técnicas como rutas relativas, coincidencias parciales, mecanismos de espera y localización con JavaScript puede mejorar en gran medida la estabilidad y confiabilidad de las pruebas automatizadas.

A continuación se muestra un ejemplo completo que demuestra cómo usar varios métodos de localización para encontrar elementos y ejecutar operaciones:

Ejemplo

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.chrome.service import Service as ChromeService

# Iniciar el navegador
service = ChromeService(executable_path="./chromedriver")
driver = webdriver.Chrome(service=service)

# Abrir la página web
driver.get("https://www.example.com")

# Localizar el campo de entrada por ID e ingresar texto
username = driver.find_element(By.ID, "username")
username.send_keys("testuser")

# Localizar el campo de entrada por Name e ingresar texto
password = driver.find_element(By.NAME, "password")
password.send_keys("password123")

# Localizar el botón mediante selector CSS y hacer clic
submit_button = driver.find_element(By.CSS_SELECTOR, "button.submit-btn")
submit_button.click()

# Localizar el enlace mediante XPath y hacer clic
link = driver.find_element(By.XPATH, "//a[text()='Click Here']")
link.click()

# Cerrar el navegador
driver.quit()
Otras extensiones