How can I set value in a text box presented in a Bootstrap Model using placeholder

Question

I want to set value for name using selenium webdriver in firefox (please see below image), but this text box is presented in Bootstrap Model and it doesn't have Id or Name attribute, it just have placeholder and type attribute (please see second image). I am working on this for last few hours but nothing helpful.

I am trying below code:

> WebElement username = driver.findElement(By.xpath("//input[contains(@placeholder,'Name')]"));

Below is few line from HTML:

<div class="modal welcome__modal  is-active">
<div class="modal__overlay welcome__modal__overlay" style="background-color: rgba(71, 70, 86, 0.1);"></div>
<div class="modal__content welcome__modal__content" style="padding: 10px 0px; width: 600px;">
    <div style="overflow: auto; width: 100%;"><span style="opacity: 0;">_</span>
        <div class="welcome__modal__content__wrap" style="display: flex; flex-direction: column;">
            <div class="welcome__modal__content__heading"><a class="welcome__modal__content__heading__logo" style="display: flex; align-items: center; margin-top: 1px;"><img src="/5729a135ccb77ae7a0744b6903af9cb8.svg" alt=""><img src="/6e963a3bd5d0e46cfc51abd29cb5e047.svg" alt="" style="margin: 3px 0px 0px 10px;"><h1 class="sr--only">Primedice</h1></a>
                <h3><span>The most <strong>popular</strong> and <strong>trusted</strong> Bitcoin gambling website.</span></h3>
            </div>
            <form class="welcome__modal__content__form" autocomplete="off"><input placeholder="Name" type="text"><button class="btn"><span><!-- react-text: 971 -->Join <!-- /react-text --><strong>3,241,212</strong><!-- react-text: 973 --> players now<!-- /react-text --></span></button></form>
            <div class="welcome__modal__captcha is--hidden">
                <div>
                    <div style="width: 304px; height: 78px;">
                        <div><iframe src="https://www.google.com/recaptcha/api2/anchor?k=6LeX6AcTAAAAAMwAON0oEyRDoTbusREfJa2vxDMh&amp;co=aHR0cHM6Ly9wcmltZWRpY2UuY29tOjQ0Mw..&amp;hl=en&amp;type=image&amp;v=r20171115120512&amp;theme=light&amp;size=normal&amp;cb=c2gxjjpxcbva" role="presentation" scrolling="no" sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-top-navigation allow-modals allow-popups-to-escape-sandbox" height="78" frameborder="0" width="304"></iframe></div><textarea id="g-recaptcha-response-1" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid #c1c1c1; margin: 10px 25px; padding: 0px; resize: none;  display: none; "></textarea></div>
                </div>
            </div>
            <p class="welcome__modal__content__login"><span>Already have an account?</span>
                <!-- react-text: 978 -->&nbsp;
                <!-- /react-text --><strong style="cursor: pointer;"><span>Login here</span></strong>
                <!-- react-text: 981 -->.
                <!-- /react-text -->
            </p>
        </div>
        <p class="welcome__modal__content__terms"><small><span>By accessing the site I attest that I am at least 18 years old and have read the</span><!-- react-text: 985 -->&nbsp;<!-- /react-text --><span style="text-decoration: underline; font-weight: 600; cursor: pointer;"><span>Terms &amp; Conditions</span></span><!-- react-text: 988 -->.<!-- /react-text --></small></p>
    </div>
</div>

Somebody, please help me.

Answer 1

As you mentioned that the text box is presented in Bootstrap Modal Dialog Box so we have to construct a proper xpath with proper wait as follows :

WebDriverWait wait_modal = new WebDriverWait(driver, 10);
wait_modal.until(ExpectedConditions.elementToBeClickable(By.xpath("//div[@class='modal__content welcome__modal__content']//input[type='text' and @placeholder='Name']"))).sendKeys("debanjan");