Manejar dropdown y listas

Clase 11 de 24 • Curso de Introducción a Selenium con Python

Korpi delfin

student•

Hice unas anotacioens al código de la clase

`import unittest
from selenium import webdriver
#submodulo  para usar el dropdown
from selenium.webdriver.support.ui import Select

class LanguageOptions(unittest.TestCase):
	def setUp(self):
		self.driver = webdriver.Chrome(executable_path = r'.\chromedriver.exe')
		driver = self.driver
		driver.implicitly_wait(30)
		driver.maximize_window()
		driver.get("http://demo-store.seleniumacademy.com/")
	
	def test_select_language(self):
		#el orden respeta como aparecen en la página
		exposed_options = ['English', 'French', 'German']
		#para almacenar las opciones que elijamos
		active_options = []
		#para acceder a las opciones del dropdown
		select_language = Select(self.driver.find_elements_by_id('select-language'))
		#para comprobar que si esté la cantidad de  opciones correcta
		#'options' permite ingresar directamente a las opciones del dropdown
		self.assertEqual(3, len(select_language.options))

		for option in select_language.options:
			active_options.append(option.text)
		
		#verifico que la lista de opciones disponibles y activas sean indénticas
		self.assertListEqual(exposed_options,active_options)

		#vamos a verificar la palabra "English" sea la primera opción seleccionada del dropdown
		self.assertEqual('English', select_language.first_selected_option.text)

		#seleccionamos "German" por el texto visible
		select_language.select_by_visible_text('German')

		#verificamos que el sitio cambio a Alemán
		#preguntamos a selenium si la url del sitio contiene esas palabras
		self.assertTrue('store=german' in self.driver.current_url)

		select_language = Select(self.driver.find_elements_by_id('select-language'))
		select_language.select_by_index(0)

	def tearDown(self):
		self.driver.implicitly_wait(3)
		self.driver.close()

if __name__ == "__main__":
	unittest.main(verbosity = 2)

Carlos Andres Ocampo Pabon

student•

Copié tu código y no me estaba funcionando, luego me di cuenta que estabas usando el 'find_elements_by_id()' en vez de 'find_element_by_id()'. Igual gracias, los comentarios antes de cada línea me sirvieron mucho.

Fredy Mendoza Vargas

student•

Muchas Gracias

ANDRES ALFONSO MIRA MEJIA

student•

IMPORTANTE: Selenium a partir de la versión (4.3.0) eliminó find_element_by_ y find_elements_by_ por lo cual ya no se puede usar.

Solución, cambiar por: driver.find_element(By.XPATH, " ") driver.find_elements(By.XPATH, " ") driver.find_element(By.CLASS_NAME, " ") driver.find_elements(By.CLASS_NAME, " ")

https://github.com/SeleniumHQ/selenium/blob/a4995e2c096239b42c373f26498a6c9bb4f2b3e7/py/CHANGES

Gerson Marín Escobedo Pérez

student•

thanks bro

Royer Guerrero Pinilla

student•

Hace un tiempo tuve que automatizar testing a un sitio web que usaba react y unos dropdowns fueron todo un caos para seleccionar porque cambiaba su class y no tenían id y la estructura del DOM también se alteraba y no podía usar el xpath

Héctor Daniel Vega Quiñones

teacher•

Es aquí donde Selenium flaquea y debemos considerar otras herramientas como Cypress.io

Cristian Adrian Ayala

student•

Coincido con Héctor, en esos casos hay que considerar otras herramientas de automatización como lo puede ser Cypress.io. Si te interesa conocer más sobre esta herramienta te dejo el Curso de End to End Testing con Cypress de Platzi: https://platzi.com/clases/testing-cypress

DAVID EDUARDO BAEZ SANCHEZ

student•

Excelente

import unittest
from selenium import webdriver
from api_data_mock import ApiDataMock
from selenium.webdriver.support.ui import Select # Modulo para poder seleccionar del dropdown

class LanguageOptions(unittest.TestCase):

    def setUp(self):
        self.driver = webdriver.Chrome(executable_path = r'./chromedriver.exe')
        driver = self.driver
        driver.implicitly_wait(30)
        driver.maximize_window()
        driver.get('http://demo-store.seleniumacademy.com/')

    def test_select_language(self):
        exp_options = ['English', 'French', 'German' ]
        act_options = []

        select_language= Select(self.driver.find_element_by_id('select-language'))

        self.assertEqual(3, len(select_language.options))

        for option in select_language.options:
            act_options.append(option.text)

        #Verifico que las lsiatas sean iguales
        self.assertListEqual(act_options, exp_options)
        #Verifico que idionma esta seleciionado
        self.assertEqual('English', select_language.first_selected_option.text)
        #Seleccionar el idioma German
        select_language.select_by_visible_text('German')
        #verifico que en la url diga store=german
        self.assertTrue('store=german' in self.driver.current_url)
        #selecciono por indice me devuelvo a Ingles
        select_language= Select(self.driver.find_element_by_id('select-language'))
        select_language.select_by_index(0)

    def tearDown(self):
        self.driver.implicitly_wait(5)
        self.driver.close()


if __name__ == '__main__':
    unittest.main(verbosity=2)

estefany Liza

student•

Buen día, Comparto mi código fuente

import unittest
from pyunitreport import HTMLTestRunner
from selenium import webdriver
from selenium.webdriver.support import select
from selenium.webdriver.support.ui import Select
class SearchTest(unittest.TestCase):
    
    def setUp(self):
        self.driver = webdriver.Chrome("D:\webdriver-chrome/chromedriver.exe")
        driver = self.driver
        driver.implicitly_wait(50)
        driver.maximize_window()
        driver.get('http://demo-store.seleniumacademy.com/')

    def test_select_language(self):
        exp_options = ['English','French', 'German']
        act_options = []

        select_language = Select(self.driver.find_element_by_id('select-language'))
        self.assertEqual(3, len(select_language.options))

        for option in select_language.options:
            act_options.append(option.text)

        self.assertEqual(exp_options, act_options)

        self.assertEqual('English',select_language.first_selected_option.text)

        select_language.select_by_visible_text('German')

        self.assertTrue('store=german' in self.driver.current_url)

        select_language = Select(self.driver.find_element_by_id('select-language'))
        select_language.select_by_index(0)



    def tearDown(self):
        self.driver.quit()


if __name__ == "__main__":
    unittest.main(verbosity=2,testRunner=HTMLTestRunner(output="reportes", report_name="prueba_asssert"))

Miguel Andres Rendon Reyes

student•

para manejar nuestros dropdowns tenemos que importar el método Select: from selenium.webdriver.support.ui import Select

Miguel Angel Reyes Moreno

student•

Lo que hicismos en esta clase fue tomar las opciones de un dropdown:

select_language.py:

import unittest
from pyunitreport import HTMLTestRunner
from selenium import webdriver
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.support.ui import Select #Así podremos elegir las opciones de un dropdown

class LanguageOptions(unittest.TestCase):

  @classmethod
  def setUpClass(cls):
    options = Options()
    options.add_argument('--headless')
    options.add_argument('--no-sandbox')
    options.add_argument('--disable-dev-shm-usage')
    cls.driver = webdriver.Chrome(executable_path = '/usr/bin/chromedriver' , options=options)
    driver = cls.driver
    driver.get('URL_DE_LA_WEB')


  def test_select_language(self):
    exposed_options = ['English', 'French', 'German'] # Los lenguajes disponibles de la página web, en ese orden
    active_options = []

    select_language = Select(self.driver.find_element_by_id('select-language'))

    self.assertEqual(3, len(select_language.options))

    for option in select_language.options:
      active_options.append(option.text) #Agregamos el texto a la lista

    self.assertListEqual(exposed_options, active_options) # Comparamos ambas listas, si son idénticas, la prueba pasará

    self.assertEqual('English', select_language.first_selected_option.text) #Verificamos que 'English' es la primera opción por defecto

    select_language.select_by_visible_text('German') #Verificamos que existe la opción con texto 'German'

    self.assertTrue('store=german' in self.driver.current_url) #Esta es parte de la URL con idioma en alemán

    select_language = Select(self.driver.find_element_by_id('select-language'))
    select_language.select_by_index(0) #Índex 0 es English, 1 es French y 2 es German


  @classmethod
  def tearDownClass(cls):
    cls.driver.quit()


if __name__ == '__main__':
  unittest.main(verbosity = 2)

Gerson Marín Escobedo Pérez

student•

thanks bro

Enrique Uzcategui

student•

Aquí si quieren una solución un poco más elegante podrían usar un comprehension list. Reemplacen la lista vacía y el bucle.

#active_options = []
#for option in select_language.options:
#active_options.append(option.text)

active_options = [option.text for option in select_language.options]

Daniel Ignacio González Cañete

student•

que buen aporte!

J. Fernando Zuñiga Ortiz

student•

Como me gusta está clase!!! Aunque batalle un chorro al inicio para las instalaciones de dependencias. Valió totalmente la pena <3

Adrian Stiven Jimenez Cardenas

student•

x2, demore una semana sin intando todo eso de depencia y entornos virtales jajaja

Sebastián Andrés Sanhueza Tapia

student•

Versión actualizada para el 2024, totalmente funcional

import unittest
from pyunitreport import HTMLTestRunner # para generar el reporte en html
from selenium import webdriver
from selenium.webdriver.chrome.service import Service # Service es una clase que se encarga de abrir el navegador
from webdriver_manager.chrome import ChromeDriverManager # para que se abra el navegador
from selenium.webdriver.common.by import By # Clase moderna para buscar elementos
from selenium.webdriver.support.ui import Select # Clase para manejar listas desplegables

class LanguageOptions(unittest.TestCase):

    # Se ejecuta al inicio de cada test, abrir el navegador
    def setUp(self):
        self.driver = webdriver.Chrome(service=Service(ChromeDriverManager().install()))
        driver = self.driver
        driver.implicitly_wait(15)
        driver.maximize_window()
        driver.get(" http :// demo-store . seleniumacademy . com /") # <<--eliminar los espacios en la URL

    def test_select_language(self):
        exp_options = ["English", "French", "German"] # creamos una lista con las opciones esperadas
        act_options = [] # creamos una lista vacía para las opciones actuales
        # Asegúrate de que 'select_language' es un elemento 'select'
        # select_language = self.driver.find_element(By.ID, "select-language") # versión antigua
        select_language = Select(self.driver.find_element(By.ID, "select-language")) # Busca la lista desplegable de idiomas por su id

        # Ahora puedes acceder a 'options'
        options = select_language.options
        # self.assertEqual(3, len(select_language.find_elements(By.TAG_NAME, "option"))) # versión antigua
        self.assertEqual(3, len(options)) # Comprueba que haya 3 opciones en la lista desplegable

        # for option in select_language.find_elements(By.TAG_NAME, "option"): # versión antigua
        for option in select_language.options: # Recorre cada opción de la lista desplegable
            act_options.append(option.text) # Agrega el texto de la opción a la lista de opciones actuales, solo el texto, no el valor html

        self.assertEqual(exp_options, act_options) # Comprueba que las opciones de ambas listas esperadas sean iguales a las opciones actuales

        first_option = select_language.first_selected_option # Obtiene la opción seleccionada por defecto
        # self.assertEqual("English", select_language.first_selected_option.text)  # versión antigua
        self.assertEqual("English", first_option.text) # Comprueba que la opción seleccionada por defecto sea "English"

        select_language.select_by_visible_text("German") # Selecciona la opción "German" de la lista desplegable

        self.assertTrue("store=german" in self.driver.current_url) # Comprueba que la URL actual contenga "store=german"

        select_language = Select(self.driver.find_element(By.ID, "select-language")) 
        select_language.select_by_index(0) # Selecciona la primera opción de la lista desplegable

    # Se ejecuta al finalizar cada test, cerrar el navegador
    def tearDown(self):
        self.driver.quit()


if __name__ == "__main__":
    unittest.main(
        testRunner=HTMLTestRunner(output="reportes", report_name="hello-world-report"),
        verbosity=2,
    )

Jeferson Andrés Cruz Herrera

student•

Hola a todos!! Alguien conoce la forma en la que pueda capturar elementos de una lista que está etiquetada de la siguiente forma:

<<div class="format-markdown"><p>👩 Buenos dias Aquí podrás:</p>
<br><ol>
<li>opción 1</li>
<li>opción 2</li>
<li>opción 3</li>
<li>opción 4</li>
<li>opción 5</li>
<li>opción 6</li>
<li>opción 7</li>
</ol>
<br><p>¿En qué te puedo ayudar?</p>
</div>>

Sebastián Andrade

student•

Hola, tenia la misma dudya yo y encontre esto en stack overflow https://stackoverflow.com/questions/28415029/how-to-get-a-list-of-the-li-elements-in-an-ul-with-selenium-using-python, en tu caso creo que seria

html_list = driver.find_element_by_class_name('format-markdown')
elements = html_list.find_elements_by_tag_name('li')

Jeferson Andrés Cruz Herrera

student•

Genial muchas gracias!!!!

Sebastián Andrade

student•

Hola, con lo aprendido hasta el momento automatizè la busqueda de una palabra en un diccionario online, comparto mi codigo a modo de aporte

from selenium import webdriver
from selenium.webdriver.support.ui import Select
from selenium.common.exceptions import NoSuchElementException
from selenium.webdriver.common.by import By
import unittest

class Select_lang_and_search(unittest.TestCase):

    def setUp(self):
        self.driver = webdriver.Chrome(executable_path = '../chromedriver')
        driver = self.driver
        driver.get('https://www.wordreference.com/')
        driver.maximize_window()
        driver.implicitly_wait(3)

    def test_select_and_search(self):
        driver = self.driver

        search_field = driver.find_element_by_class_name('ac-input')
        search_button = driver.find_element_by_class_name('submit-button')
        select_language = Select(driver.find_element_by_id('fSelect'))

        #We're going to select English-Russian option 

        select_language.select_by_value('enru')

        search_field.send_keys('Hello')
        driver.implicitly_wait(3)
        search_button.click()

        driver.implicitly_wait(5)

        self.assertTrue(self.is_element_present(By.XPATH, '//table[@class="WRD"]/tbody/tr[@class="wrtopsection"]/td/strong/span[@class="ph"]'))

    def is_element_present(self, how, what):
        try:
            self.driver.find_element(by= how, value= what)

        except NoSuchElementException as variable:
            return False
        
        return True

    
    def tearDown(self):
        self.driver.close()
        
if __name__ == '__main__':
    unittest.main(verbosity=2)

Cristian David Restrepo Marin

student•

Muy buen aporte!

Cesar Vite

student•

Buenas, tengo la siguiente duda. Alguien que me pueda responder! Gracias.

En la empresa en donde estoy implementando automatizaciones hay una seria de dropdown pero al inspeccionarlas no hay forma de poder identificarlas, al utilizar xpath el codigo truena.

El codigo que comparto es un ejemplo de un dropdown de la empresa

<tr class="list-companies group"> <td class="cursor" onclick="showCompanies('1')"> 1 - CONSULTORÍA LORES </td> <td class="cursor" onclick="showCompanies('1')"> </td> <td class="btn-emprsas">

`<code>

Julio César Zaravia Paredes

student•

Hola, según veo se están utilizando tablas, sin embargo parece que están definidas, es decir hay un class que aprovechar allí. Además de poder usarse los tags.

Sin embargo, quisiera saber a qué te refieres con que el XPATH hace tronar el código. ++Sería bueno tu código y el error para poder analizar más++.

Tu pregunta me parece interesante porque estoy seguro que hay miles de webs con esa estructura algo antigua que en algún momento nos tocará revisar 😑.

Ojalá puedas complementar.

¡Saludos!

Nicolás Arias

student•

Pregunta, por qué al se vuelve a seleccionar en select si ya lo tenía guardado en la variable select_language? Es porque la página se recarga? Minuto 6:20

Andrés Felipe Mesa David

student•

Creo que sí.

De hecho, hice el intento de dejar esa línea comentada y ejecutar el test y me indica un error de que el elemento select_language no está en la página del documento.

Por lo que hace necesario volverlo a poner.

Manuel Alejandro Salazar Gómez

student•

La pagina web hoy no tiene la opción de seleccionar el lenguaje, no es posible hacer el ejercicio

Brian Alvarado

student•

Comparto la función con notas y corriendo para la versión 4.3.0 de selenium

def test_select_language(self):
        exp_option = ['English', 'French', 'German']
        act_options = []
        
        # Toma los elementos con Select y las añade a act_options
        select_language = Select(self.driver.find_element('id', 'select-language'))
        self.assertEqual(3, len(select_language.options))

        for option in select_language.options:
            act_options.append(option.text)
        
        # Verifica que las listas sean iguales
        self.assertListEqual(exp_option, act_options)
        
        # Validar que inglés sea el idioma seleccionado
        self.assertEqual('English', select_language.first_selected_option.text)

        # Selecciona alemán como idioma
        select_language.select_by_visible_text('German')

        # Verifica el cambio
        self.assertTrue('store=german' in self.driver.current_url)

        # Selecciona de nuevo el inglés
        select_language = Select(self.driver.find_element('id', 'select-language'))
        select_language.select_by_index(0)

Antonio Demarco Bonino

student•

Me encantó esta clase! Es increible como se puede automatizar toda la manipulación que se hace en una web.

Jose Antonio Rojas Ollarves

student•

Esta clase es totalmente practica aqui les dejo el codigo con comentarios:

import unittest
from selenium import webdriver
from selenium.webdriver.support.ui import Select#Modulo para manejar elementos dropdown

class LanguageOptions(unittest.TestCase):

    def setUp(self):
        self.driver = webdriver.Firefox(executable_path= r'./geckodriver.exe')
        driver = self.driver
        driver.implicitly_wait(3)
        driver.maximize_window()
        driver.get('https://demo-store.seleniumacademy.com/')

    def test_select_language(self):
        options = ['English', 'French', 'German'] #Listas con el nombre de las etiquetas
        act_options = []#Lista para almacenar las opciones al momento de revisar

        #Acceder a los elementos de la lista

        select_language = Select(self.driver.find_element_by_id('select-language'))

        #Validar si estan disponibles las opciones del dropdown

        self.assertEqual(3, len(select_language.options))#Esto nos permite ingresar a las opciones del dropdown

        for option in select_language.options:#Bucle para recorrer los elementos del dropdown
            act_options.append(option.text)#Agregar el texto

        #Comparacion de listas expuestas y activas

        self.assertListEqual(options, act_options)

        #Validar idioma por default

        self.assertEqual('English', select_language.first_selected_option.text) #Verificar que la palabra ingles esta por default

        #Seleccionar idioma del dropdown

        select_language.select_by_visible_text('German') #Seleccionar por el texto visible

        #Verificar que se cambio el idioma

        self.assertTrue('store=german' in self.driver.current_url)

        #Elegir un idioma mediante al indice

        select_language = Select(self.driver.find_element_by_id('select-language'))
        select_language.select_by_index(0)

    def tearDown(self):
        self.driver.implicitly_wait(3)
        self.driver.close()

if __name__ == "__main__":
    unittest.main(verbosity= 2)

Luis Carpio

student•

Muy útil esta clase y lo que va del curso. Gracias

Miguel Andres Rendon Reyes

student•

Los dropdown son los menús desplegables. Con selenium, podemos acceder a ellas mediante el texto que llevan, su orden o también por el valor que se tiene asignado en su código HTML.