Selenide. Помогите с селектором

Question

У меня на странице два одинаковых инпута и селенид ссылается на неверный.

Первый

    <div class="container">
        <div class="modal-dialog">
            <div class="modal-content background-customizable modal-content-mobile visible-xs visible-sm">
                <div><div>
                    <div class="banner-customizable">
                        <center>

                        </center>
                    </div>
                </div></div>
                <div class="modal-body">
                    <div><div>

</div></div>
                    <div>
                        <div><div>

</div></div>
                        <div><div>

</div></div>
                        <div>

                            <div><div>

        <Span class="textDescription-customizable ">Sign in with your username and password</Span>
        <form action="/login?client_id=4nafv8ipl1q5rttmrvv6oak5u7&amp;redirect_uri=https%3A%2F%2Fdev.carvagotest.com%2Foauth2%2Fidpresponse&amp;response_type=code&amp;scope=openid&amp;state=IhK5RhAy5AKhFFlOes9G5%2Fu2eslyRxEUlDvHH%2FaJdW4HBFB41htCNEekJe%2FryOymXZXCPAPhUsWibXuJ2phJ4gsEfIqlqdwERlL2SICRUbE8SutHpqXQ1UOXr3KbIe11N8jDAPOPoH4YgaTs%2BOPT36gGa0FdgmfnmWEI38rvYDn5jAl73YussWPnBt6CuG9W2aRGSm%2BeDUz%2Fbg%3D%3D" method="POST" name="cognitoSignInForm"
              class="cognito-asf" onsubmit="getAdvancedSecurityData(this);"><input type="hidden" name="_csrf" value="6674ba39-260e-46d4-8f7f-444a460fc6f6"/>




            <label for="signInFormUsername" class="label-customizable">Username</label>
            <div><input id="signInFormUsername" name="username" type="text" class="form-control inputField-customizable"
                   placeholder="Username" autocapitalize="none" required></div>

И второй

<div class="modal-content background-customizable modal-content-mobile visible-md visible-lg">
<div>
  <div>
    <div class="banner-customizable">
      <center>

      </center>
    </div>
  </div>
</div>
<div class="modal-body">
  <div>
    <div>

    </div>
  </div>
  <div>
    <div>
      <div>
        <div>

        </div>
      </div>
      <div>
        <div>

        </div>
      </div>
    </div>
    <div>
      <div>
        <div>

          <Span class="textDescription-customizable ">Sign in with your username and password</Span>
          <form action="/login?client_id=4nafv8ipl1q5rttmrvv6oak5u7&amp;redirect_uri=https%3A%2F%2Fdev.carvagotest.com%2Foauth2%2Fidpresponse&amp;response_type=code&amp;scope=openid&amp;state=IhK5RhAy5AKhFFlOes9G5%2Fu2eslyRxEUlDvHH%2FaJdW4HBFB41htCNEekJe%2FryOymXZXCPAPhUsWibXuJ2phJ4gsEfIqlqdwERlL2SICRUbE8SutHpqXQ1UOXr3KbIe11N8jDAPOPoH4YgaTs%2BOPT36gGa0FdgmfnmWEI38rvYDn5jAl73YussWPnBt6CuG9W2aRGSm%2BeDUz%2Fbg%3D%3D"
            method="POST" name="cognitoSignInForm" class="cognito-asf" onsubmit="getAdvancedSecurityData(this);"><input type="hidden" name="_csrf" value="6674ba39-260e-46d4-8f7f-444a460fc6f6" />




            <label for="signInFormUsername" class="label-customizable">Username</label>
            <div><input id="signInFormUsername" name="username" type="text" class="form-control inputField-customizable" placeholder="Username" autocapitalize="none" required></div>

мне нужно "пробиться" на #signInFormUsername но тот, который под div.modal-content.background-customizable.modal-content-mobile.visible-xs.visible-sm

помогите пожалуйста как это реализовать ?

$("[#signInFormUsername").setValue("name");

естественно выдает ошибку

Answer 1

Так, например

const findInput = document.querySelector('.modal-content .modal-body .cognito-asf #signInFormUsername');
const result = document.querySelector('.result');
findInput.addEventListener('input', (e) => {
  const value = e.target.value;
  result.innerHTML = value;
});

<div class="modal-content background-customizable modal-content-mobile visible-md visible-lg">
  <div>
    <div>
      <div class="banner-customizable">
        <center>

        </center>
      </div>
    </div>
  </div>
  <div class="modal-body">
    <div>
      <div>

      </div>
    </div>
    <div>
      <div>
        <div>
          <div>

          </div>
        </div>
        <div>
          <div>

          </div>
        </div>
      </div>
      <div>
        <div>
          <div>

            <Span class="textDescription-customizable ">Sign in with your username and password</Span>
            <form action="/login?client_id=4nafv8ipl1q5rttmrvv6oak5u7&amp;redirect_uri=https%3A%2F%2Fdev.carvagotest.com%2Foauth2%2Fidpresponse&amp;response_type=code&amp;scope=openid&amp;state=IhK5RhAy5AKhFFlOes9G5%2Fu2eslyRxEUlDvHH%2FaJdW4HBFB41htCNEekJe%2FryOymXZXCPAPhUsWibXuJ2phJ4gsEfIqlqdwERlL2SICRUbE8SutHpqXQ1UOXr3KbIe11N8jDAPOPoH4YgaTs%2BOPT36gGa0FdgmfnmWEI38rvYDn5jAl73YussWPnBt6CuG9W2aRGSm%2BeDUz%2Fbg%3D%3D"
              method="POST" name="cognitoSignInForm" class="cognito-asf" onsubmit="getAdvancedSecurityData(this);"><input type="hidden" name="_csrf" value="6674ba39-260e-46d4-8f7f-444a460fc6f6" />




              <label for="signInFormUsername" class="label-customizable">Username</label>
              <div><input id="signInFormUsername" name="username" type="text" class="form-control inputField-customizable" placeholder="Username" autocapitalize="none" required></div>
              <div class="result"></div>

Answer 2

$x("(//*[@id='signInFormUsername'])[2]").setValue("name");

БЛОГ НА HUSL

Selenide. Помогите с селектором

Ответы (2 шт):