Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

690
Views
No se puede realizar ninguna acción en los elementos que estaban ubicados en flexbox

Selenium puede encontrar el findElement que se encuentra en el cuadro flexible , pero no puede realizar ninguna acción en esos elementos. A continuación, proporciono un par de sitios web de muestra para una comprensión detallada,


Ejemplo 1:

Sitio web : https://condos.ca/

Fragmento HTML :

 <div class="styles___SearchField-sc-ntshwn-1 azZjo"> <div class="styles___SiteSearch-sc-ntshwn-3 bvlPAF"> <div class="styles___InputIcon-sc-ntshwn-4 eAuylQ"> <svg viewBox="0 0 59.93 60" class="styles___Svg-sc-14upfal-0 frvNPk svg-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="width: 20px; height: 20px;"> <path d="M59.23,55.73L44.33,40.81a25,25,0,1,0-3.53,3.54L55.7,59.27A2.5,2.5,0,1,0,59.23,55.73ZM5,25A20,20,0,1,1,25,45,20,20,0,0,1,5,25Z" transform="translate(-0.03)"></path> </svg> </div> <input aria-label="Search by address, Neighbourhood, MLS #" placeholder="Search by address, Neighbourhood, MLS #" id="search-input"> </div> <div class="styles___GetLocationContainer-sc-ntshwn-5 cCBUUE"> <button target="_blank" name="search nearby button" class="styles___AppButton-sc-5pk18n-0 jXQNUT styles___SearchNearby-sc-ntshwn-6 dYpkAS" id=""> <svg viewBox="0 0 20 20" class="styles___Svg-sc-14upfal-0 frvNPk svg-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="width: 22px; height: 22px;"> <path d="M10,17.49c-4.19-0.02-7.57-3.39-7.55-7.53c0.02-4.14,3.42-7.48,7.61-7.47c4.18,0.02,7.56,3.37,7.55,7.51C17.6,14.15,14.19,17.5,10,17.49C10,17.49,10,17.49,10,17.49z M10,3.48C6.37,3.5,3.43,6.43,3.45,10.02c0.02,3.59,2.98,6.5,6.61,6.48c3.62-0.02,6.54-2.92,6.55-6.5c0-3.6-2.95-6.52-6.59-6.52C10.01,3.48,10.01,3.48,10,3.48z"></path> <path d="M10,3.48c-0.28,0-0.5-0.22-0.5-0.49V0.49C9.5,0.22,9.72,0,10,0s0.5,0.22,0.5,0.49v2.49C10.5,3.26,10.28,3.48,10,3.48z"></path> <path d="M10,20c-0.28,0-0.5-0.22-0.5-0.49v-2.51c0-0.27,0.22-0.49,0.5-0.49s0.5,0.22,0.5,0.49v2.51C10.5,19.78,10.28,20,10,20z"></path> <path d="M19.54,10.48h-2.43c-0.28,0-0.5-0.22-0.5-0.49c0-0.27,0.22-0.49,0.5-0.49h2.43c0.28,0,0.5,0.22,0.5,0.49C20.04,10.26,19.82,10.48,19.54,10.48z"></path> <path d="M3,10.49H0.46c-0.28,0-0.5-0.22-0.5-0.49c0-0.27,0.22-0.49,0.5-0.49H3c0.28,0,0.5,0.22,0.5,0.49C3.5,10.27,3.28,10.49,3,10.49z"></path> <path d="M10,13.49c-1.95-0.02-3.52-1.61-3.5-3.54c0.02-1.93,1.62-3.48,3.58-3.46c1.94,0.02,3.51,1.59,3.5,3.51c-0.01,1.94-1.61,3.5-3.57,3.49C10.01,13.49,10,13.49,10,13.49z M10,7.48C8.6,7.5,7.48,8.64,7.5,10.03c0.02,1.39,1.18,2.49,2.58,2.47c1.38-0.02,2.49-1.13,2.5-2.5c0-1.39-1.14-2.52-2.55-2.52C10.02,7.48,10.01,7.48,10,7.48z"></path> </svg> </button> </div> </div>

Código :

 driver.get("https://condos.ca"); driver.findElement(By.xpath("//input[@id='search-input']")).sendKeys("test");

Resultado : el paso se ejecuta sin arrojar ningún error, pero no se ingresó el texto.


Ejemplo #2:

Sitio web : https://demoqa.com/slider

Fragmento HTML :

 <div id="sliderContainer" class="form-group row"> <div class="col-9"> <span class="range-slider__wrap"> <input type="range" class="range-slider range-slider--primary" min="0" max="100" value="25" style="--value:25;"> <div class="range-slider__tooltip range-slider__tooltip--auto range-slider__tooltip--bottom" style="left: calc(25% + 5px);"> <div class="range-slider__tooltip__label">25</div> <div class="range-slider__tooltip__arrow"></div> </div> </span> </div> <div class="col-3"><input id="sliderValue" class="form-control" value="25"></div> </div>

Código :

 driver.get("https://demoqa.com/slider"); JavascriptExecutor executor = (JavascriptExecutor) driver; WebElement slider = driver.findElement(By.xpath("//input[@type='range']")); System.out.println("Cuurent value: " + slider.getAttribute("value")); executor.executeScript("arguments[0].setAttribute('value', ' 30 ')", slider);

Resultado : imprimió el valor del atributo pero no estableció el nuevo valor.


Algunas preguntas y blogs de SO sugieren usar Selenium flex api para automatizar este tipo de aplicaciones, pero puedo ver un requisito previo para instalar el complemento flex para eclipse y no puedo encontrarlo. Además, estas publicaciones tienen poca antigüedad (5 años).

  • ¿Cómo manejar estos elementos?
  • ¿Hay alguna forma nueva de hacer esto?

Referencias :

  • ¿La herramienta de automatización de selenio admite aplicaciones flexibles?
  • https://www.linkedin.com/pulse/automatización-flex-aplicación-selenium-webdriver-himanshu-tewari/
over 4 years ago · Santiago Trujillo
1 answers
Answer question

0

Solución al Ejemplo 1

Si carga el sitio web, observará que el texto sobre el cuadro de edición de búsqueda inicialmente se ve así:

ingrese la descripción de la imagen aquí

Después de algún tiempo, el texto del mismo elemento se cambia a: ingrese la descripción de la imagen aquí

Solo después de que esto suceda, intente realizar la operación sendkeys. Tenga en cuenta que no tiene que realizar la operación sendkeys en el elemento con id = 'search-input'. Primero debe hacer clic en ese elemento y luego se vuelve visible otro elemento (cssSelector -> div[role='combobox'] [placeholder='Search by address, Neighbourhood, MLS #'] ) en el que debe realizar la operación sendkeys .

Consulte el código a continuación para obtener lo mismo (probado en Chrome, Edge y Firefox).

 package usecase; import java.time.Duration; import java.util.regex.Pattern; import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.chrome.ChromeDriver; import org.openqa.selenium.support.ui.ExpectedConditions; import org.openqa.selenium.support.ui.WebDriverWait; import io.github.bonigarcia.wdm.WebDriverManager; public class Flexcase { public static WebDriver driver; private static final int maxtime = 20; /** * Creating a custom findElement method that uses Explicit wait and waits for an * element to be clickable */ public static WebElement findElement(By by) { WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(maxtime)); return wait.until(ExpectedConditions.elementToBeClickable(by)); } /** * Waits for an element to contain a text matched by the given pattern(regex) */ public static Boolean doesElementContainTextPattern(By by, String pattern) { WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(maxtime)); return wait.until(ExpectedConditions.textMatches(by, Pattern.compile(pattern))); } public static void main(String[] args) throws InterruptedException { WebDriverManager.chromedriver().setup(); driver = new ChromeDriver(); driver.manage().window().maximize(); driver.get("https://condos.ca/"); // Waiting for the text to achieve a specific pattern - Search followed by 1+ // occurrences of either digits or commas followed by 0+ occurrences of any // character that is not a newline character followed by the word Listings if (doesElementContainTextPattern(By.className("dPFjpJ"), "Search [\\d,]+.*Listings")) { findElement(By.id("search-input")).click(); findElement(By.cssSelector("div[role='combobox'] [placeholder='Search by address, Neighbourhood, MLS #']")) .sendKeys("Test"); } Thread.sleep(10000); // Pls let me see what's happening on the screen driver.quit(); } }

Manifestación: ingrese la descripción de la imagen aquí

Solución para el Ejemplo 2

En lugar de usar javascriptexecutor, he usado la clase Actions para crear una acción compuesta formada por las siguientes acciones:

  • mueva el mouse a la posición más a la izquierda del control deslizante encontrando el ancho del control deslizante en píxeles
  • mueva el mouse a la posición deseada en el control deslizante proporcional al valor porcentual pasado

Código: (la precisión de deslizamiento se puede mejorar)

 package usecase; import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.chrome.ChromeDriver; import org.openqa.selenium.interactions.Actions; import io.github.bonigarcia.wdm.WebDriverManager; public class Slider { public static WebDriver driver; public static void moveSliderToPosition(By by, int percentage) throws InterruptedException { WebElement slider = driver.findElement(by); Actions builder = new Actions(driver); builder.moveToElement(slider, (int) (-slider.getRect().width / 2), 0) // move to the leftmost position of the // element .moveByOffset((int) (percentage * slider.getRect().width / 100), 0) // move the cursor by an offset // proportionate to the value passed .click().build().perform(); Thread.sleep(3000); // let me see what has happened on the screen } public static void main(String[] args) throws InterruptedException { WebDriverManager.chromedriver().setup(); driver = new ChromeDriver(); driver.manage().window().maximize(); driver.get("https://demoqa.com/slider"); By slider = By.cssSelector("input.range-slider"); moveSliderToPosition(slider, 47); moveSliderToPosition(slider, 83); moveSliderToPosition(slider, 35); driver.quit(); } }

Manifestación: ingrese la descripción de la imagen aquí

over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!