如何使用占位符在 Bootstrap 模型中显示的文本框中设置值

Question

我想在 firefox 中使用 selenium webdriver 设置名称的值（请参见下图），但此文本框显示在Bootstrap 模型，它没有 Id 或 Name 属性， 它只有 placeholder 和 type 属性（请看第二张图片）。我最近几个小时都在做这个，但没有任何帮助。

我正在尝试以下代码：

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

下面是 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>

有人，请帮帮我。

Answer 1

您可以尝试通过占位符查找元素：

driver.findElement(By.xpath("//input[@placeholder='Name']"))

希望对你有帮助！

Answer 2

正如您提到的，文本框显示在 Bootstrap 模态对话框中，因此我们必须构造一个正确的 xpath 和正确的 wait，如下所示：

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

Answer 3

尝试使用以下方式：

首先获取根元素并将其保存到 WebElement 对象中。然后找到表单元素，最后将值发送到输入元素。

WebElement elem = driver.findElement(By.cssSelector("div.modal__content.welcome__modal__content"));
//wait until the form is appeared [here apply wait functionality]
WebElement username = elem.findElement(By.className("welcome__modal__content__form"));
username = username.findElement(By.cssSelector("input[type='text']"));
username.clear();
username.sendKeys("John dohn");