{"id":2033,"date":"2023-12-01T12:40:47","date_gmt":"2023-12-01T11:40:47","guid":{"rendered":"https:\/\/ittester.sk\/sin-categorizar\/css-selectores\/"},"modified":"2024-06-25T16:02:04","modified_gmt":"2024-06-25T14:02:04","slug":"css-selectores","status":"publish","type":"post","link":"https:\/\/ittester.sk\/es\/sin-categorizar\/tutorial-de-selenio\/css-selectores\/","title":{"rendered":"Selectores CSS"},"content":{"rendered":"\n<p>En esta parte del tutorial, aprenderemos sobre los selectores CSS y crearemos selectores CSS manualmente utilizando varios atributos de elementos web HTML. Utilizamos la herramienta firebug o la herramienta del desarrollador para obtener la informaci\u00f3n HTML de los elementos web. Para m\u00e1s detalles sobre la descarga y el uso de la herramienta firebug\/developer, consulta el tutorial &#8211; <a href=\"https:\/\/ittester.sk\/es\/sin-categorizar\/tutorial-de-selenio\/localizadores-en-selenium-webdriver\/\">Localizadores en Selenium WebDriver.<\/a><\/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-css-a-selektory-css-uvod\">CSS a selektory CSS \u2013 \u00favod<\/a><\/li><li><a class=\"aioseo-toc-item\" href=\"#aioseo-selektory-css\">Selektory CSS<\/a><\/li><li><a class=\"aioseo-toc-item\" href=\"#aioseo-pouzivanie-id\">Pou\u017e\u00edvanie ID<\/a><\/li><li><a class=\"aioseo-toc-item\" href=\"#aioseo-pouzivanie-triedy-class\">Pou\u017e\u00edvanie triedy &#8211; class<\/a><\/li><li><a class=\"aioseo-toc-item\" href=\"#aioseo-pouzitie-znacky-tag\">Pou\u017eitie zna\u010dky &#8211; tag<\/a><\/li><li><a class=\"aioseo-toc-item\" href=\"#aioseo-pouzivanie-atributov-a-ich-hodnoty\">Pou\u017e\u00edvanie atrib\u00fatov a ich hodnoty<\/a><\/li><li><a class=\"aioseo-toc-item\" href=\"#aioseo-pouzivanie-znaciek-a-id-tags-and-id\">Pou\u017e\u00edvanie zna\u010diek a\u00a0id (tags and id)<\/a><\/li><li><a class=\"aioseo-toc-item\" href=\"#aioseo-pouzitie-znaciek-a-triedy-tags-and-class\">Pou\u017eitie zna\u010diek a\u00a0triedy (tags and class)<\/a><\/li><li><a class=\"aioseo-toc-item\" href=\"#aioseo-pouzivanie-znaciek-a-atributov-tags-and-attributes\">Pou\u017e\u00edvanie zna\u010diek a\u00a0atrib\u00fatov (tags and attributes)<\/a><\/li><li><a class=\"aioseo-toc-item\" href=\"#aioseo-vyhladavanie-podriadenych-prvkov-len-priame-podriadene-prvky-child\">Vyh\u013ead\u00e1vanie podriaden\u00fdch prvkov (len priame podriaden\u00e9 prvky &#8211; child)<\/a><\/li><li><a class=\"aioseo-toc-item\" href=\"#aioseo-umiestnenie-prvkov-vo-vnutri-inych-prvkov-child-subchild\">Umiestnenie prvkov vo vn\u00fatri in\u00fdch prvkov (child\/subchild)<\/a><\/li><li><a class=\"aioseo-toc-item\" href=\"#aioseo-n-te-dieta\">n-t\u00e9 die\u0165a<\/a><\/li><li><a class=\"aioseo-toc-item\" href=\"#aioseo-vyhladavanie-surodencov\">Vyh\u013ead\u00e1vanie s\u00farodencov<\/a><\/li><li><a class=\"aioseo-toc-item\" href=\"#aioseo-zacina-sa-na\">^ &#8211; Za\u010d\u00edna sa na<\/a><\/li><li><a class=\"aioseo-toc-item\" href=\"#aioseo-konci-sa-na\">$ &#8211; Kon\u010d\u00ed sa na<\/a><\/li><li><a class=\"aioseo-toc-item\" href=\"#aioseo-obsahuje\">* &#8211; Obsahuje<\/a><\/li><\/ul><\/div>\n<h2 class=\"wp-block-heading\" id=\"aioseo-css-a-selektory-css-uvod\">CSS y selectores CSS &#8211; introducci\u00f3n<\/h2>\n\n<p>CSS son las siglas en ingl\u00e9s de Hojas de Estilo en Cascada, que se utilizan para dar estilo a diversos elementos de una p\u00e1gina web HTML. En los archivos .css, podemos buscar elementos espec\u00edficos de una p\u00e1gina web (archivos .html) y luego darles estilo, por ejemplo, estableciendo el tama\u00f1o de la fuente, la anchura, la altura, etc.<\/p>\n\n<p>Utilizamos ciertas reglas proporcionadas como selectores CSS para encontrar los elementos web que hay que estilizar.<\/p>\n\n<p>Por ejemplo, el siguiente comando busca primero un elemento web que coincida con el patr\u00f3n del selector &#8211; \u00abdiv#searchBox\u00bb y, a continuaci\u00f3n, alinea el texto que contiene al centro.<\/p>\n\n<p><strong>div#searchBox { alineaci\u00f3n del texto: centro;}<\/strong><\/p>\n\n<p>En Selenium, podemos utilizar estas reglas\/patrones de selecci\u00f3n CSS para buscar elementos web y realizar posteriormente diversas operaciones sobre ellos. Por ejemplo:<\/p>\n\n<p><strong>\/\/Localizaci\u00f3n del elemento searchBox mediante el selector CSS<\/strong><\/p>\n\n<p><strong>WebElement searchBox = driver.findElement(By.cssSelector(\u00abdiv#searchBox\u00bb));<\/strong><\/p>\n\n<p><strong>\/\/Efectuar una operaci\u00f3n de clic sobre el elemento<\/strong><\/p>\n\n<p><strong>searchBox.sendKeys(\u00abITtester\u00bb);<\/strong><\/p>\n\n<p>Veamos ahora las diferentes reglas del selector CSS junto con su sintaxis y ejemplos de uso.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-selektory-css\">Selectores CSS<\/h2>\n\n<p>A continuaci\u00f3n se muestra la sintaxis y ejemplos de c\u00f3mo buscar los elementos necesarios y utilizarlos en los scripts selenium.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-pouzivanie-id\">Uso del DNI<\/h2>\n\n<p><strong>Regla del selector CSS &#8211; #id<\/strong><\/p>\n\n<p>Para la muestra HTML siguiente-<\/p>\n\n<p><strong>&lt;&gt;&lt;button id=\u00bbsubmitButton1&#8243; type=\u00bbbutton\u00bb class=\u00bbbtn\u00bb Enviar \/button&gt;<\/strong><\/p>\n\n<ul class=\"wp-block-list\">\n<li>Localizador CSS &#8211; #submitButton1<\/li>\n\n\n\n<li>Descripci\u00f3n &#8211; &#8216;#submitButton1&#8217; selecciona el elemento con id &#8216;submitButton1&#8217;.<\/li>\n<\/ul>\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-pouzivanie-triedy-class\">Utilizar la clase &#8211; clase<\/h2>\n\n<p><strong>Regla del selector CSS &#8211; .class<\/strong><\/p>\n\n<p>Para la muestra HTML siguiente-<\/p>\n\n<p><strong>&lt;&gt;&lt;button id=\u00bbsubmitButton1&#8243; type=\u00bbbutton\u00bb class=\u00bbbtn\u00bb Enviar \/button&gt;<\/strong><\/p>\n\n<ul class=\"wp-block-list\">\n<li>Localizador CSS &#8211; .btn<\/li>\n\n\n\n<li>Descripci\u00f3n &#8211; &#8216;.btn&#8217; selecciona todos los elementos con clase &#8216;btn&#8217;.<\/li>\n<\/ul>\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-pouzitie-znacky-tag\">Uso de una etiqueta &#8211; tag<\/h2>\n\n<p><strong>Regla del selector CSS &#8211; tagName<\/strong><\/p>\n\n<p>Para la muestra HTML siguiente-<\/p>\n\n<p><strong>&lt;input id=\u00bbfname\u00bb type=\u00bbtext\u00bb name=\u00bbfirstName\u00bb class=\u00bbtextbox\u00bb&gt;<\/strong><\/p>\n\n<ul class=\"wp-block-list\">\n<li>Localizador CSS &#8211; entrada<\/li>\n\n\n\n<li>Descripci\u00f3n &#8211; &#8216;entrada&#8217; selecciona todos los elementos de tipo entrada.<\/li>\n<\/ul>\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-pouzivanie-atributov-a-ich-hodnoty\">Utilizar atributos y sus valores<\/h2>\n\n<p><strong>Regla del selector CSS &#8211;  [attributeName=&#8217;attributeValue&#8217;]<\/strong><\/p>\n\n<p>Para la muestra HTML siguiente-<\/p>\n\n<p><strong>&lt;input id=\u00bbfname\u00bb type=\u00bbtext\u00bb name=\u00bbfirstName\u00bb class=\u00bbtextbox\u00bb&gt;<\/strong><\/p>\n\n<ul class=\"wp-block-list\">\n<li>Localizador CSS &#8211;  [name=&#8217;firstName&#8217;]<\/li>\n\n\n\n<li>[name=&#8217;firstName&#8217;] Descripci\u00f3n &#8211; selecciona los elementos cuyo atributo name tenga el valor &#8216;firstName&#8217;.<\/li>\n<\/ul>\n\n<p>Utilizando estas reglas b\u00e1sicas de localizaci\u00f3n de elementos web, ahora podemos utilizarlas conjuntamente para crear localizadores m\u00e1s robustos que seleccionen elementos \u00fanicos.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-pouzivanie-znaciek-a-id-tags-and-id\">Utilizar etiquetas e identificadores<\/h2>\n\n<p><strong>Regla del selector CSS &#8211; tag#id<\/strong><\/p>\n\n<p>Para la muestra HTML siguiente-<\/p>\n\n<p><strong>&lt;input id=\u00bbfname\u00bb type=\u00bbtext\u00bb name=\u00bbfirstName\u00bb class=\u00bbtextbox\u00bb&gt;<\/strong><\/p>\n\n<ul class=\"wp-block-list\">\n<li>Localizador CSS &#8211; input#fname<\/li>\n\n\n\n<li>Descripci\u00f3n &#8211; input#fname selecciona el elemento &#8216;input&#8217; con id &#8216;fname&#8217;.<\/li>\n<\/ul>\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-pouzitie-znaciek-a-triedy-tags-and-class\">Utilizar etiquetas y clases<\/h2>\n\n<p><strong>Regla del selector CSS &#8211; tag.class<\/strong><\/p>\n\n<p>Para la muestra HTML siguiente-<\/p>\n\n<p><strong>&lt;input id=\u00bbfname\u00bb type=\u00bbtext\u00bb name=\u00bbfirstName\u00bb class=\u00bbtextbox\u00bb&gt;<\/strong><\/p>\n\n<ul class=\"wp-block-list\">\n<li>Localizador CSS &#8211; input.textbox<\/li>\n\n\n\n<li>Descripci\u00f3n &#8211; input.textbox selecciona el elemento &#8216;input&#8217; con id &#8216;textbox&#8217;.<\/li>\n<\/ul>\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-pouzivanie-znaciek-a-atributov-tags-and-attributes\">Utilizar etiquetas y atributos<\/h2>\n\n<p><strong>Regla del selector CSS &#8211; etiqueta[attributeName=&#8217;attributeValue&#8217;]<\/strong><\/p>\n\n<p>Para la muestra HTML siguiente-<\/p>\n\n<p><strong>&lt;input id=\u00bbfname\u00bb type=\u00bbtext\u00bb name=\u00bbfirstName\u00bb class=\u00bbtextbox\u00bb&gt;<\/strong><\/p>\n\n<ul class=\"wp-block-list\">\n<li>Localizador CSS &#8211; entrada[name= firstname=\u00bb\u00bb]<\/li>\n\n\n\n<li>[name= firstname=\u00bb\u00bb] Descripci\u00f3n &#8211; input selecciona el elemento \u00abinput\u00bb con atributo \u00abname\u00bb con valor \u00abfirstName\u00bb.<\/li>\n<\/ul>\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-vyhladavanie-podriadenych-prvkov-len-priame-podriadene-prvky-child\">Buscar elementos hijos (s\u00f3lo elementos hijos directos &#8211; child)<\/h2>\n\n<p><strong>&gt;Regla del selector CSS &#8211; parentLocator childLocator<\/strong><\/p>\n\n<p>Para la muestra HTML siguiente-<\/p>\n\n<p><strong>&lt;div id=\u00bbbuttonDiv\u00bb class=\u00bbsmall\u00bb&gt;<\/strong><\/p>\n\n<p><strong>&lt;&gt;&lt;button id=\u00bbsubmitButton1&#8243; type=\u00bbbutton\u00bb class=\u00bbbtn\u00bb Enviar \/button&gt;<\/strong><\/p>\n\n<p><strong>&lt;\/div&gt;<\/strong><\/p>\n\n<ul class=\"wp-block-list\">\n<li>Localizador CSS &#8211; div#buttonDiv&gt;button<\/li>\n\n\n\n<li>Descripci\u00f3n &#8211; &#8216;div#buttonDiv&gt;button&#8217; va primero al elemento div con id &#8216;buttonDiv&#8217; y luego selecciona su elemento hijo &#8211; &#8216;button&#8217;.<\/li>\n<\/ul>\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-umiestnenie-prvkov-vo-vnutri-inych-prvkov-child-subchild\">Colocaci\u00f3n de elementos dentro de otros elementos (hijo\/subhijo)<\/h2>\n\n<p><strong>Regla del selector CSS &#8211; localizador1 localizador2<\/strong><\/p>\n\n<p>Para la muestra HTML siguiente-<\/p>\n\n<p><strong>&lt;div id=\u00bbbuttonDiv\u00bb class=\u00bbsmall\u00bb&gt;<\/strong><\/p>\n\n<p><strong>&lt;&gt;&lt;button id=\u00bbsubmitButton1&#8243; type=\u00bbbutton\u00bb class=\u00bbbtn\u00bb Enviar \/button&gt;<\/strong><\/p>\n\n<p><strong>&lt;\/div&gt;<\/strong><\/p>\n\n<ul class=\"wp-block-list\">\n<li>Localizador CSS &#8211; bot\u00f3n div#buttonDiv<\/li>\n\n\n\n<li>Descripci\u00f3n &#8211; &#8216;div#buttonDiv button&#8217; primero navega hasta el elemento div con id &#8216;buttonDiv&#8217; y luego selecciona el elemento &#8216;button&#8217; dentro de \u00e9l (que puede ser su hijo o hija).<\/li>\n<\/ul>\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-n-te-dieta\">en\u00e9simo hijo<\/h2>\n\n<p><strong>Regla del selector CSS &#8211; :nth-child(n)<\/strong><\/p>\n\n<p>Para la muestra HTML siguiente-<\/p>\n\n<p><strong>&lt;ul id=\u00bbTiposDePrueba\u00bb&gt;<\/strong><\/p>\n\n<p><strong>   &lt;&gt;&lt;li Pruebas de automatizaci\u00f3n \/li&gt;<\/strong><\/p>\n\n<p><strong>   &lt;&gt;&lt;li Pruebas de rendimiento \/li&gt;<\/strong><\/p>\n\n<p><strong>   &lt;&gt;&lt;li Pruebas manuales \/li&gt;<\/strong><\/p>\n\n<p><strong>&lt;\/ul&gt;<\/strong><\/p>\n\n<ul class=\"wp-block-list\">\n<li>Localizador CSS &#8211; #testingTypes li:nth-child(2)<\/li>\n\n\n\n<li>Descripci\u00f3n &#8211; &#8216;#testingTypes li:nth-child(2)&#8217; selecciona el elemento con id &#8216;testingType&#8217; y luego encuentra 2. de un descendiente de tipo li, t. j. Elemento de la lista \u00abPruebas de rendimiento\u00bb.<\/li>\n<\/ul>\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-vyhladavanie-surodencov\">Buscar hermanos<\/h2>\n\n<p><strong>Regla del selector CSS &#8211; localizador1+localizador2<\/strong><\/p>\n\n<p>Para la muestra HTML siguiente-<\/p>\n\n<p><strong>&lt;ul id=\u00bbTiposDePrueba\u00bb&gt;<\/strong><\/p>\n\n<p><strong>   &lt;&gt;&lt;li id=\u00bbautomatizaci\u00f3n\u00bb Pruebas de automatizaci\u00f3n \/li&gt;<\/strong><\/p>\n\n<p><strong>   &lt;&gt;&lt;li Pruebas de rendimiento \/li&gt;<\/strong><\/p>\n\n<p><strong>   &lt;&gt;&lt;li Pruebas manuales \/li&gt;<\/strong><\/p>\n\n<p><strong>&lt;\/ul&gt;<\/strong><\/p>\n\n<ul class=\"wp-block-list\">\n<li>Localizador CSS &#8211; li#automatizaci\u00f3n + li<\/li>\n\n\n\n<li>Descripci\u00f3n &#8211; &#8216;li#automatizacion + li&#8217; va primero al elemento li con id &#8216;automatizacion&#8217; y luego selecciona su li vecino, t. j. Elemento de la lista \u00abPruebas de rendimiento\u00bb.<\/li>\n<\/ul>\n\n<p>Para procesar elementos din\u00e1micos cuyos ids y otros localizadores se generan din\u00e1micamente (no se conocen de antemano). Podemos explotar los localizadores anteriores utilizando diferentes relaciones padre-hermano de los elementos din\u00e1micos. Adem\u00e1s, tambi\u00e9n podemos utilizar algunos localizadores CSS especiales para asignar valores parciales a los atributos.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-zacina-sa-na\">^ &#8211; Comienza en<\/h2>\n\n<p><strong>Regla del selector CSS &#8211;  [attribute^=attributeValue]<\/strong><\/p>\n\n<p>Para la muestra HTML siguiente-<\/p>\n\n<p><strong>&lt;&gt;&lt;button id=\u00bbuser1_btn_263&#8243; type=\u00bbbutton\u00bb class=\u00bbbtn\u00bb Enviar a \/button&gt;<\/strong><\/p>\n\n<ul class=\"wp-block-list\">\n<li>Localizador CSS &#8211; id^=\u00bbusuario1\u2033<\/li>\n\n\n\n<li>Descripci\u00f3n &#8211; &#8216;id^=\u00bbusuario1\u2033&#8217; selecciona el elemento cuyo id empieza por \u00abusuario1<\/li>\n<\/ul>\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-konci-sa-na\">$ &#8211; Termina en<\/h2>\n\n<p><strong>Regla del selector CSS &#8211;  [attribute$=attributeValue]<\/strong><\/p>\n\n<p>Para la muestra HTML siguiente-<\/p>\n\n<p><strong>&lt;&gt;&lt;button id=\u00bbuser1_btn_263&#8243; type=\u00bbbutton\u00bb class=\u00bbbtn\u00bb Enviar \/button&gt;<\/strong><\/p>\n\n<ul class=\"wp-block-list\">\n<li>Localizador CSS &#8211; id$=\u00bbbtn_263\u2033<\/li>\n\n\n\n<li>Descripci\u00f3n &#8211; &#8216;id$=\u00bbbtn_263\u2033&#8217; selecciona el elemento cuyo id termina en \u00abbtn_263<\/li>\n<\/ul>\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-obsahuje\">* &#8211; Contiene<\/h2>\n\n<p><strong>Regla del selector CSS &#8211;  [attribute*=attributeValue]<\/strong><\/p>\n\n<p>Para la muestra HTML siguiente-<\/p>\n\n<p><strong>&lt;&gt;&lt;button id=\u00bbuser1_btn_263&#8243; type=\u00bbbutton\u00bb class=\u00bbbtn\u00bb Enviar \/button&gt;<\/strong><\/p>\n\n<ul class=\"wp-block-list\">\n<li>Localizador CSS &#8211; id*=\u00bbbtn\u00bb<\/li>\n\n\n\n<li>Descripci\u00f3n &#8211; &#8216;id*=\u00bbbtn\u00bb&#8216; selecciona el elemento cuyo id contiene el valor \u00abbtn\u00bb<\/li>\n<\/ul>\n\n<p>Eso es todo lo que hemos preparado en este art\u00edculo. El <a href=\"https:\/\/ittester.sk\/automatizovane-testovanie\/selenium-tutorial\/selenium-tutorial\/\">tutorial<\/a> completo <a href=\"https:\/\/ittester.sk\/automatizovane-testovanie\/selenium-tutorial\/selenium-tutorial\/\">de Selenium<\/a>.  <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Utilizamos ciertas reglas proporcionadas como selectores CSS para encontrar los elementos web que hay que estilizar.  <\/p>\n","protected":false},"author":8,"featured_media":2034,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[39],"tags":[],"class_list":["post-2033","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\/2033","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=2033"}],"version-history":[{"count":1,"href":"https:\/\/ittester.sk\/es\/wp-json\/wp\/v2\/posts\/2033\/revisions"}],"predecessor-version":[{"id":2035,"href":"https:\/\/ittester.sk\/es\/wp-json\/wp\/v2\/posts\/2033\/revisions\/2035"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ittester.sk\/es\/wp-json\/wp\/v2\/media\/2034"}],"wp:attachment":[{"href":"https:\/\/ittester.sk\/es\/wp-json\/wp\/v2\/media?parent=2033"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ittester.sk\/es\/wp-json\/wp\/v2\/categories?post=2033"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ittester.sk\/es\/wp-json\/wp\/v2\/tags?post=2033"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}