How to get the tagName of an element with no identifier or css classes using Selenium and Java

Question

Using selenium how do I fetch a html tags element, the html tag does not have any unique identifiers, below is the html code:

<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>

How I have been trying to get the element / things I've tried:

    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;
    }

however the above method keeps returning null, below are some of the other methods I've tried:

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']"));

The tag is surrounded by some dividers...

Not able to reproduce. The first (xpath) example returns a non-null element list. Can you add more of the HTML context to the question? — andrewJames, Jun 26 '20 at 00:34
@andrewjames done, the whole form tag is surrounded by like 3 - 6 separate divs. — Aasil, Jun 26 '20 at 11:45
OK - thank you for the update. I am still not able to reproduce the problem. When I use your code, it correctly finds the 2 expected input fields (email and password). I print out the HTML using `System.out.println(element.getAttribute("outerHTML"));`. How do you set the `browser` object? Something like `browser.navigate().to(url);`? Are you opening the correct HTML page? — andrewJames, Jun 26 '20 at 12:11

score 1 · Accepted Answer · answered Jun 27 '20 at 23:48

1

As the elements are React elements as well as <input> elements to extract the <tagName> of the element using Selenium, you have to induce WebDriverWait for the visibilityOfElementLocated() and you can use either of the following Locator Strategies:

Using css-selectors and the type attribute of the <input>:

System.out.println(new WebDriverWait(driver, 20).until(ExpectedConditions.visibilityOfElementLocated(By.cssSelector("//[type='email'][placeholder]"))).getTagName());

Using xpath and the text 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());

answered Jun 27 '20 at 23:48

undetected Selenium

183,867
41
278
352

I am trying to get the ` – Aasil Jun 30 '20 at 18:14
@Aasil Your question was for an `` tag, right? Is the ` – undetected Selenium Jun 30 '20 at 18:18
When I try `browser.findElement(By.cssSelector("app-button rose-button min-width")).click();` it returns: `org.openqa.selenium.NoSuchElementException: Unable to locate element: app-button rose-button min-width`, I'd appreciate some assistance with this <3 – Aasil Jun 30 '20 at 18:18

score 0 · Answer 2 · answered Jun 26 '20 at 01:16

Should it be like this?

  List<WebElement> elements = browser.findElements(By.xpath("//input[@type='email']"));

Instead of:

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

Because your element has no "id" attribute, you can't find it by By.id.

Bonum Ursus · Answer 3 · 2020-06-26T12:20:52.973

0

Try this:

    WebElement emailElement = driver.findElement(By.xpath("//input[@type='email']"));
    WebElement passwordElement = driver.findElement(By.xpath("//input[@type='password']"));

Or if you want to get a list of elements, use this:

driver.findElements(By.xpath("//input[@type='email']|//input[@type='password']"))

edited Jun 26 '20 at 12:20

answered Jun 26 '20 at 12:12

Bonum Ursus

46
1
3

Hi, I added the `emailElement` object and it couldn't find the element, the exception: `Exception in thread "main" org.openqa.selenium.NoSuchElementException: Unable to locate element: //input[@type='email']` – Aasil Jun 26 '20 at 16:35

How to get the tagName of an element with no identifier or css classes using Selenium and Java

3 Answers3