首页 > 解决方案 > 如何使用 Selenium 和 Java 获取没有标识符或 css 类的元素的 tagName

问题描述

使用 selenium 如何获取 html 标签元素,html 标签没有任何唯一标识符,下面是 html 代码:

<form data-v-48e2f75a="">
   <header data-v-48e2f75a="">
      <h4 data-v-48e2f75a="">via email</h4>
   </header>
   <div data-v-48e2f75a="" class="form-wrap">
      <div data-v-cccee08c="" data-v-48e2f75a="" class="input-wrap email-input" type="email">
         <label data-v-cccee08c="">
            <div data-v-cccee08c="" class="input-inner-wrap has-icon">

               <!--The below input tag is one of the tags I need to fetch-->
               <input data-v-cccee08c="" placeholder=" " type="email"> <i data-v-cccee08c="" class="input-label-icon icon-envelope-o"></i> <span data-v-cccee08c="" class="input-label">Your E-mail</span> <!---->
            </div>
            <!----> <!----> <!---->
         </label>
      </div>
      <div data-v-cccee08c="" data-v-48e2f75a="" class="input-wrap password-input" type="password">
         <label data-v-cccee08c="">
            <div data-v-cccee08c="" class="input-inner-wrap has-icon">
               <input data-v-cccee08c="" placeholder=" " type="password"> <i data-v-cccee08c="" class="input-label-icon icon-unlock"></i> <span data-v-cccee08c="" class="input-label">Your Password</span> <!---->
            </div>
            <!----> <!----> <!---->
         </label>
      </div>
   </div>
   <p data-v-48e2f75a="" class="secondary-utilities forgot-password"><span data-v-48e2f75a="">Forgot password?</span></p>
   <footer data-v-48e2f75a="" class="form-footer">
      <div data-v-48e2f75a="" class="secondary-utilities registration">
         <p data-v-48e2f75a="">Don't have an account?</p>
         <span data-v-48e2f75a="">Sign up new account</span>
      </div>
      <button data-v-48e2f75a="" class="app-button rose-button min-width">Sign in</button>
   </footer>
</form>

我是如何尝试获取我尝试过的元素/事物的:

    public static boolean login(WebDriver browser, String email, String password){
        List<WebElement> elements = browser.findElements(By.xpath("//input[@type='email' or @type='password']"));
        System.out.println();
        for (WebElement element : elements){
            System.out.println(element.getTagName());
            System.out.println(element.toString());
        }
        return false;
    }

但是上面的方法一直返回null,下面是我尝试过的其他一些方法:

List<WebElement> elements = browser.findElements(By.id("input[type='email']"));
List<WebElement> elements = browser.findElements(By.cssSelector("*[type='email']"));
List<WebElement> elements = browser.findElements(By.cssSelector("*[type='email']"));

标签被一些分隔线包围......

标签: javaseleniumxpathcss-selectorswebdriverwait

解决方案


由于元素是React元素以及使用Selenium<input>提取元素的元素,因此您必须诱导WebDriverWait并且您可以使用以下任一Locator Strategies<tagName>visibilityOfElementLocated()

  • 使用type属性<input>

    System.out.println(new WebDriverWait(driver, 20).until(ExpectedConditions.visibilityOfElementLocated(By.cssSelector("//[type='email'][placeholder]"))).getTagName());
    
  • 使用和文本Your E-mail of the <span>

    System.out.println(new WebDriverWait(driver, 20).until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//span[text()='Your E-mail']//preceding::*[@type='email' and @placeholder]"))).getTagName());
    

推荐阅读