Selenium WebDriver:无法定位动态变化的React Inputbase组件元素

发布于 01-21 03:06 字数 1067 浏览 3 评论 0原文

我试图找到具有ID的元素。 开发人员工具显示了以下内容:

<input aria-invalid="false" autocomplete="off" placeholder="Partner name" type="text" class="MuiInputBase-input MuiInput-input MuiAutocomplete-input MuiAutocomplete-inputFocused MuiInputBase-inputAdornedEnd" aria-autocomplete="list" autocapitalize="none" spellcheck="false" value="" id="mui-85700">

ID总是每次重新加载页面时总是更改。

我想我找到了一个解决元素的解决方案:

findElement(By.xpath("//*[contains(@id,'mui')]")).click();

但是现在我收到以下错误:

(org.openqa.selenium.ElementClickInterceptedException: Element <p id="mui-51640" class="MuiTypography-root MuiTablePagination-caption MuiTypography-body2 MuiTypography-colorInherit"> is not clickable at point (1124,747) because another element <div class="MuiDialog-container MuiDialog-scrollPaper"> obscures it

如何解决?

旁注: 在开发人员工具中,我看到了包含“ MUI”字符串的4个Web元素。 在页面上,我只看到2个Web元素:一个带有&lt;输入ID =“ MUI85700” ...&gt;,另一个是&lt; label ID =“ MUI85700” ... &gt; 和以前说的那样,我需要输入ID字段。

I tried to locate an element with id.
The Developer tools shows this:

<input aria-invalid="false" autocomplete="off" placeholder="Partner name" type="text" class="MuiInputBase-input MuiInput-input MuiAutocomplete-input MuiAutocomplete-inputFocused MuiInputBase-inputAdornedEnd" aria-autocomplete="list" autocapitalize="none" spellcheck="false" value="" id="mui-85700">

The id always changing every time I reload the page.

I think I find a solution to locate the element:

findElement(By.xpath("//*[contains(@id,'mui')]")).click();

But now I get the following error:

(org.openqa.selenium.ElementClickInterceptedException: Element <p id="mui-51640" class="MuiTypography-root MuiTablePagination-caption MuiTypography-body2 MuiTypography-colorInherit"> is not clickable at point (1124,747) because another element <div class="MuiDialog-container MuiDialog-scrollPaper"> obscures it

How can I solve it?

Side note:
In developer tool I see 4 web elements which contains "mui" String.
On the page I only see 2 web elements: one with <input id="mui85700"...> and another one is <label id="mui85700"...>
As before I said I need the input id field.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

雨的味道风的声音2025-01-28 03:06:14

元素是一个 React InputBase 组件 和动态元素以及 id 属性的尾随动态值将在您每次重新访问应用程序时发生更改。因此,您必须构建动态定位器策略


解决方案

要单击 元素,您需要引发 WebDriverWait< /a> 为 elementToBeClickable() 并且您可以使用以下任一定位器策略

  • cssSelector

    new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.cssSelector("input.MuiInputBase-input.MuiInput-input.MuiAutocomplete-input.MuiAutocomplete-inputFocused.MuiInputBase-inputAdornedEnd[id^= 'mui'][placeholder='合作伙伴名称']"))).click();
    
  • xpath

    new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//input[@class='MuiInputBase-input MuiInput-input MuiAutocomplete-input MuiAutocomplete-inputFocused MuiInputBase-inputAdornedEnd' 和开始于(@id, 'mui')][@placeholder='合作伙伴名称']"))).click();
    

The <input> element is a React InputBase component and a dynamic element and the trailing dynamic value of the id attribute will will get changed everytime you access the application afresh. So you have to construct a dynamic locator strategy.


Solution

To click on the <input> element you need to induce WebDriverWait for the elementToBeClickable() and you can use either of the following locator strategies:

  • cssSelector:

    new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.cssSelector("input.MuiInputBase-input.MuiInput-input.MuiAutocomplete-input.MuiAutocomplete-inputFocused.MuiInputBase-inputAdornedEnd[id^='mui'][placeholder='Partner name']"))).click();
    
  • xpath:

    new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//input[@class='MuiInputBase-input MuiInput-input MuiAutocomplete-input MuiAutocomplete-inputFocused MuiInputBase-inputAdornedEnd' and starts-with(@id, 'mui')][@placeholder='Partner name']"))).click();
    
把人绕傻吧2025-01-28 03:06:14

您可以使用Findements并获取所有元素表单网页
使用循环并检查元素是否可见或可单击元素。这解决了您的问题。

You may use findElements and get all the elements form web page
Use a loop and check if the element is visible or element is clickable. This is solve your issue.

划一舟意中人2025-01-28 03:06:14

你可以这样使用,

List<WebElement> products = driver.findElements(By.xpath("xpath"));


            for (int i=0; i<products.size(); i++){


                String name = products.get(i).getText();

                    System.out.println(name);

                if(name.containsAll('text')) {

                    driver.findElements(By.xpath("xpath")).get(i).click();
    }
        }

you can use like this,

List<WebElement> products = driver.findElements(By.xpath("xpath"));


            for (int i=0; i<products.size(); i++){


                String name = products.get(i).getText();

                    System.out.println(name);

                if(name.containsAll('text')) {

                    driver.findElements(By.xpath("xpath")).get(i).click();
    }
        }
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文