{"id":2025,"date":"2023-11-24T15:04:21","date_gmt":"2023-11-24T14:04:21","guid":{"rendered":"https:\/\/ittester.sk\/sin-categorizar\/localizadores-en-selenium-webdriver\/"},"modified":"2024-06-25T16:01:54","modified_gmt":"2024-06-25T14:01:54","slug":"localizadores-en-selenium-webdriver","status":"publish","type":"post","link":"https:\/\/ittester.sk\/es\/sin-categorizar\/tutorial-de-selenio\/localizadores-en-selenium-webdriver\/","title":{"rendered":"Localizadores en Selenium WebDriver"},"content":{"rendered":"\n<p>En este art\u00edculo, continuaremos nuestro <a href=\"https:\/\/ittester.sk\/automatizovane-testovanie\/selenium-tutorial\/selenium-tutorial\/\">tutorial de Selenium<\/a> y exploraremos los distintos tipos de localizadores disponibles en Selenium. Antes de estudiar los localizadores, repasemos primero la necesidad de los localizadores en el proceso de automatizaci\u00f3n.<\/p>\n\n<p>Un proceso de automatizaci\u00f3n sencillo en Selenium puede concebirse como:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>Inicia el navegador.<\/li>\n\n\n\n<li>Abre la p\u00e1gina web que quieras automatizar.<\/li>\n\n\n\n<li>Localizaci\u00f3n de elementos web, como cuadros de texto.<\/li>\n\n\n\n<li>Realiza operaciones en elementos web, como escribir en un cuadro de texto.<\/li>\n\n\n\n<li>Hacer afirmaciones como el mensaje \u00ab\u00c9xito\u00bb.<\/li>\n<\/ul>\n\n<p>Veamos un ejemplo de c\u00f3digo que implementa el proceso anterior. Estudiaremos cada una de las l\u00edneas de c\u00f3digo en el texto siguiente.<\/p>\n\n<h2 class=\"wp-block-heading\">\u00cdndice<\/h2>\n<div class=\"wp-block-aioseo-table-of-contents\"><ul><li><a class=\"aioseo-toc-item\" href=\"#aioseo-ukazka-kodu-pre-lokatory-v-selenium-webdriver\">Uk\u00e1\u017eka k\u00f3du pre lok\u00e1tory v Selenium WebDriver<\/a><\/li><li><a class=\"aioseo-toc-item\" href=\"#aioseo-pouzitie-nastroja-developer-tool\">Pou\u017eitie n\u00e1stroja Developer Tool<\/a><\/li><li><a class=\"aioseo-toc-item\" href=\"#aioseo-lokatory-selenium\">Lok\u00e1tory Selenium<\/a><\/li><\/ul><\/div>\n<h2 class=\"wp-block-heading\" id=\"aioseo-ukazka-kodu-pre-lokatory-v-selenium-webdriver\">C\u00f3digo de ejemplo para localizadores en Selenium WebDriver<\/h2>\n\n<p><strong>\/\/Lanzamiento del navegador Firefox<\/strong><\/p>\n\n<p><strong>WebDriver driver = nuevo FirefoxDriver();<\/strong><\/p>\n\n<p><strong>\/\/Abrir google.com<\/strong><\/p>\n\n<p><strong>controlador.get(\u00abhttp:\/\/www.google.com\u00bb);<\/strong><\/p>\n\n<p><strong>\/\/Inicializar el elemento web searchBox<\/strong><\/p>\n\n<p><strong>WebElement searchBox = driver.findElement(By.name(\u00abq\u00bb));<\/strong><\/p>\n\n<p><strong>\/\/Escribiendo un texto \u00abITtester\u00bb en la casilla de b\u00fasqueda<\/strong><\/p>\n\n<p><strong>searchBox.sendKeys(\u00abITtester\u00bb);<\/strong><\/p>\n\n<p>As\u00ed que aqu\u00ed podemos ver que si queremos realizar una operaci\u00f3n en un elemento web &#8211; searchBox, primero tenemos que localizarlo. Aqu\u00ed est\u00e1 el localizador By.name(\u00abq\u00bb), que cuando se pasa al m\u00e9todo findElement devuelve un elemento web searchBox.<\/p>\n\n<p>Antes de seguir hablando de los distintos tipos de localizadores disponibles en Selenium, veamos primero c\u00f3mo obtener los distintos atributos de elementos que se utilizan en los localizadores.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-pouzitie-nastroja-developer-tool\">Utilizar la Herramienta de Desarrollo<\/h2>\n\n<p>Localizar elementos web requiere conocer sus atributos HTML. Podemos utilizar la herramienta de desarrollo integrada para obtener el c\u00f3digo fuente HTML de elementos concretos (se inicia pulsando f12 en el navegador o May\u00fas+Ctrl+I).<\/p>\n\n<p>Pasos para encontrar los atributos de un elemento HTML:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>Inicia la p\u00e1gina web que se va a automatizar, por ejemplo https:\/\/www.google.com<\/li>\n\n\n\n<li>Pulsa F12 (o May\u00fas+Ctrl+I) para iniciar la herramienta de desarrollo.<\/li>\n\n\n\n<li>Haz clic en el icono inspeccionar-elemento, como se muestra en la imagen de abajo.<\/li>\n<\/ul>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1500\" height=\"630\" src=\"https:\/\/ittester.sk\/wp-content\/uploads\/2023\/11\/developer-tool-1500-630-1.webp\" alt=\"Captura de pantalla de la herramienta de desarrollo abierta en el navegador\" class=\"wp-image-688\" srcset=\"https:\/\/ittester.sk\/wp-content\/uploads\/2023\/11\/developer-tool-1500-630-1.webp 1500w, https:\/\/ittester.sk\/wp-content\/uploads\/2023\/11\/developer-tool-1500-630-1-300x126.webp 300w, https:\/\/ittester.sk\/wp-content\/uploads\/2023\/11\/developer-tool-1500-630-1-1024x430.webp 1024w, https:\/\/ittester.sk\/wp-content\/uploads\/2023\/11\/developer-tool-1500-630-1-768x323.webp 768w\" sizes=\"auto, (max-width: 1500px) 100vw, 1500px\" \/><figcaption class=\"wp-element-caption\">Utilizar Developer Tool es una herramienta eficaz y pr\u00e1ctica para arreglar o comprobar elementos web.\n\n<\/figcaption><\/figure>\n<\/div>\n<p>Despu\u00e9s de hacer clic en el icono de inspeccionar-elemento, haz clic en el elemento web que quieras localizar, por ejemplo Cuadro de b\u00fasqueda de Google. Cuando haces clic en un elemento, su HTML se muestra en la interfaz de usuario de Firebug.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"389\" src=\"https:\/\/ittester.sk\/wp-content\/uploads\/2023\/11\/hover-na-webovom-prvku-1500-570-1024x389.webp\" alt=\"Captura de pantalla de la Herramienta de Desarrollo abierta en el navegador\" class=\"wp-image-690\" srcset=\"https:\/\/ittester.sk\/wp-content\/uploads\/2023\/11\/hover-na-webovom-prvku-1500-570-1024x389.webp 1024w, https:\/\/ittester.sk\/wp-content\/uploads\/2023\/11\/hover-na-webovom-prvku-1500-570-300x114.webp 300w, https:\/\/ittester.sk\/wp-content\/uploads\/2023\/11\/hover-na-webovom-prvku-1500-570-768x292.webp 768w, https:\/\/ittester.sk\/wp-content\/uploads\/2023\/11\/hover-na-webovom-prvku-1500-570.webp 1500w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">La sencilla interfaz de la Herramienta de Desarrollo te muestra los atributos y valores importantes.<\/figcaption><\/figure>\n<\/div>\n<p>Aqu\u00ed podemos ver los distintos atributos de los elementos web, como id, type, role, etc., junto con sus etiquetas, como input, div, etc. Ahora utilizaremos estas etiquetas, atributos y valores para buscar elementos utilizando varios localizadores.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-lokatory-selenium\">Localizadores de selenio<\/h2>\n\n<p>Hay un total de 8 localizadores en Selenium WebDriver:<\/p>\n\n<ol class=\"wp-block-list\">\n<li><strong>Por Id &#8211; Localiza el elemento utilizando el atributo id del elemento web.<\/strong><\/li>\n<\/ol>\n\n<p>WebElement element = driver.findElement(By.id(\u00abelementId\u00bb));<\/p>\n\n<ol class=\"wp-block-list\" start=\"2\">\n<li><strong>Por className &#8211; recupera el elemento web utilizando el atributo className.<\/strong><\/li>\n<\/ol>\n\n<p>ElementoWeb = driver.findElement(By.className(\u00abobjectClass\u00bb));<\/p>\n\n<ol class=\"wp-block-list\" start=\"3\">\n<li><strong>Por tagName &#8211; Busca un elemento web utilizando su etiqueta HTML, por ejemplo div, a, input, etc.<\/strong><\/li>\n<\/ol>\n\n<p>WebElement element = driver.findElement(By.tagName(\u00aba\u00bb));<\/p>\n\n<ol class=\"wp-block-list\" start=\"4\">\n<li><strong>Por nombre: busca un elemento web utilizando el atributo nombre.<\/strong><\/li>\n<\/ol>\n\n<p>WebElement element = driver.findElement(By.name(\u00abmacho\u00bb));<\/p>\n\n<ol class=\"wp-block-list\" start=\"5\">\n<li><strong>PorTextoDeEnlace &#8211; Busca un elemento web de tipo enlace utilizando su texto.<\/strong><\/li>\n<\/ol>\n\n<p>WebElement element = driver.findElement(By.linkText(\u00abHaz clic aqu\u00ed\u00bb));<\/p>\n\n<ol class=\"wp-block-list\" start=\"6\">\n<li><strong>PorTextoDeEnlaceParcial &#8211; Busca un elemento web del tipo enlace con una coincidencia de texto parcial.<\/strong><\/li>\n<\/ol>\n\n<p>WebElement element = driver.findElement(By.partialLinkText(\u00abClic\u00bb));<\/p>\n\n<ol class=\"wp-block-list\" start=\"7\">\n<li><strong>Por cssSelector &#8211; Busca un elemento web utilizando CSS.<\/strong><\/li>\n<\/ol>\n\n<p>WebElement element = driver.findElement(By.cssSelector(\u00abdiv#id\u00bb));<\/p>\n\n<ol class=\"wp-block-list\" start=\"8\">\n<li><strong>Por XPath &#8211; Busca un elemento web utilizando su XPath.<\/strong><\/li>\n<\/ol>\n\n<p>WebElement element = driver.findElement(By.xpath(\u00ab\/\/div[@id=&#8217;id&#8217;]\u00bb));<\/p>\n\n<p>Ya has aprendido a localizar elementos en Selenio. Como puedes ver, localizar elementos por id, className, tagName, name, linkText y partialLinkText es f\u00e1cil.<\/p>\n\n<p>S\u00f3lo tenemos que seleccionar el localizador adecuado en funci\u00f3n de la unicidad del elemento, por ejemplo preferimos utilizar ids porque los ids de los elementos suelen ser \u00fanicos. Sin embargo, puede haber situaciones en las que no dispongamos de los atributos id del elemento web y tambi\u00e9n puede que otros localizadores, como name y className, no recuperen el elemento web \u00fanico solicitado. En estos casos, debemos utilizar selectores CSS y localizadores XPath.<\/p>\n\n<p>Estos localizadores son muy potentes y ayudan a crear localizadores robustos para elementos web complejos.  <\/p>\n","protected":false},"excerpt":{"rendered":"<p>En este tutorial, conocer\u00e1s la necesidad de los localizadores en el proceso de automatizaci\u00f3n y los distintos tipos de localizadores disponibles en Selenium.<\/p>\n","protected":false},"author":8,"featured_media":2028,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[39],"tags":[],"class_list":["post-2025","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorial-de-selenio"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/ittester.sk\/es\/wp-json\/wp\/v2\/posts\/2025","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ittester.sk\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ittester.sk\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ittester.sk\/es\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/ittester.sk\/es\/wp-json\/wp\/v2\/comments?post=2025"}],"version-history":[{"count":1,"href":"https:\/\/ittester.sk\/es\/wp-json\/wp\/v2\/posts\/2025\/revisions"}],"predecessor-version":[{"id":2029,"href":"https:\/\/ittester.sk\/es\/wp-json\/wp\/v2\/posts\/2025\/revisions\/2029"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ittester.sk\/es\/wp-json\/wp\/v2\/media\/2028"}],"wp:attachment":[{"href":"https:\/\/ittester.sk\/es\/wp-json\/wp\/v2\/media?parent=2025"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ittester.sk\/es\/wp-json\/wp\/v2\/categories?post=2025"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ittester.sk\/es\/wp-json\/wp\/v2\/tags?post=2025"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}