0

i want to find the two inputs using selenium using findElement by css i want to fill in the two inputs, i was only able to find one input with "input[type='text']" and im not sure how to get the other one please check my html

  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="/tasks">Todo List</a
    ><button
      class="navbar-toggler"
      type="button"
      data-toggle="collapse"
      data-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent"
      aria-expanded="false"
      aria-label="Toggle navigation"
    >
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item"><a class="nav-link" href="/">Home</a></li>
        <li class="nav-item"><a class="nav-link" href="/tasks">Tâches</a></li>
        <li class="nav-item"><a class="nav-link" href="/">Déconnexion</a></li>
      </ul>
    </div>
  </nav>
  <div class="container mt-5"></div>
</div>
<div>
  <h2>Liste des tâches</h2>
  <div class="alert alert-info">Aucune tâche n'a encore été créée.</div>
  <hr />
  <h2>Créer une nouvelle tâche</h2>
  <div class="row">
    <div class="col">
      <label>Nom de la tâche</label
      ><input type="text" class="form-control" value="" />
    </div>
    <div class="col">
      <label>Description de la tâche en une ligne</label
      ><input type="text" class="form-control" value="" />
    </div>
    <div class="col">
      <br /><button class="btn btn-primary">Ajouter la tâche</button>
    </div>
  </div>
</div>
hamza belatra
  • 35
  • 1
  • 6

3 Answers3

1

You can either use XPath, and to find it easily open Inspect Element, right click on input, click on Copy XPath,

or you can get all matching elements and select it from the list, like
findElements("input[type='text']")[0]
findElements("input[type='text']")[1]

Cagri
  • 366
  • 1
  • 6
  • both didn't work for i get "Invalid locator" is this code for JS? the xPath didn't work i get this error NoSuchElementError: Unable to locate element: /html/body/div[2]/div[2]/div[1]/input – hamza belatra Sep 14 '22 at 22:56
  • what is your code in? can you try to print `findElements("input[type='text']")` and see what's there? and showing your original command that works for one input might be helpful – Cagri Sep 14 '22 at 23:07
  • NodeJS, this is my command that is only finding the first input driver.findElement(By.css("input[type='text']")).sendKeys("test"); – hamza belatra Sep 14 '22 at 23:10
  • oh I see, so I think you can use this answer: https://stackoverflow.com/questions/35098156/get-an-array-of-elements-from-findelementby-classname - it seems findElements returns a promise in nodejs – Cagri Sep 14 '22 at 23:15
  • i just needed to copy the correct Xpath, it's working as a charm thanks – hamza belatra Sep 15 '22 at 10:35
1

By xpath, for example in Firefox

Right click on page -> Select (Inspect Element), pick an element from the page, then right click on highlighted html -> Copy -> Xpath

Check https://www.lambdatest.com/blog/complete-guide-for-using-xpath-in-selenium-with-examples/

Pepe N O
  • 1,678
  • 1
  • 7
  • 11
  • i did copy Xpath and used it as bellow await driver.findElement(By.xpath("/html/body/div[2]/div[2]/div[2]/input")).sendKeys("test"); but i got this error (node:26840) UnhandledPromiseRejectionWarning: NoSuchElementError: Unable to locate element: /html/body/div[2]/div[2]/div[2]/input – hamza belatra Sep 14 '22 at 23:05
  • Wait for an element to appear https://www.browserstack.com/guide/wait-commands-in-selenium-webdriver in wait explicitly. – Pepe N O Sep 14 '22 at 23:09
  • already using await – hamza belatra Sep 14 '22 at 23:13
0

If you found the first input element, you can simply do the same you did to find it but use find_elements() instead of find_element().
It will return a list with the two inputs.

Carapace
  • 377
  • 2
  • 9