NoSuchElementException - junit 测试错误

Question

我正在使用 selenium junit 测试。如果我尝试使用 selenium ide，测试进行得很顺利，但是使用 junit 它会给我这个错误：

org.openqa.selenium.NoSuchElementException: no such element: Unable to locate element: {"method":"css selector","selector":"#firstName"}

我认为 span 没有重定向到它应该重定向的页面（但在正常计划中它会重定向）。

@Test
  public void adminCreateDoc() {
    driver.get("http://localhost:8080/login");
    driver.manage().window().setSize(new Dimension(550, 706));
    driver.findElement(By.linkText("Accesso amministratori")).click();
    driver.findElement(By.id("username")).sendKeys("8245");
    driver.findElement(By.id("password")).click();
    driver.findElement(By.id("password")).sendKeys("prova1");
    driver.findElement(By.cssSelector(".btn")).click();
    driver.findElement(By.id("btn_createDoc")).click();
    driver.findElement(By.id("firstName")).click();
    driver.findElement(By.id("firstName")).sendKeys("Marco");
    driver.findElement(By.id("lastName")).click();
    driver.findElement(By.id("lastName")).sendKeys("Battiato");
    driver.findElement(By.id("doc_type")).click();
    driver.findElement(By.id("doc_type")).sendKeys("Cardiologo");
    driver.findElement(By.id("id")).click();
    driver.findElement(By.id("id")).sendKeys("855555");
    driver.findElement(By.id("password")).click();
    driver.findElement(By.id("password")).sendKeys("prova1");
    driver.findElement(By.cssSelector(".glyphicon-send")).click();
  }

我尝试过使用 xpath，但没有成功...

HTML 具有跨度重定向的页面：

<body>
    <div class="container text-center">
        <div align="center">
            <h2>Gestione dottori</h2>
            <table  class="table table-striped table-responsive-md">
                <tr>
                    <th>ID</th>
                    <th>Nome</th>
                    <th>Specialit&agrave</th>
                </tr>
                <tr th:each="doc: ${listDoc}">
                    <td th:text="${doc.getId()}"></td>
                    <td>Dr. <span th:text="${doc.getFirstName()}"></span> <span th:text="${doc.getLastName()}"></span></td>
                    <td th:text="${doc.getDoc_type()}"></td>
                </tr>
            </table>
            <a th:href = "@{/admin_createdoc}"><span id="btn_createDoc" class="plus bg-dark" >+</span></a>
            <hr>
            <div class="col col-lg-2 align-self-center">
                <div class="p-1">
                    <form th:action="@{/admin_logout}" method=post>
                        <button name="btn_logout_profile" id="btn_logout_profile"
                            type="submit" class="btn btn-primary">Log Out</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</body>

重定向到此页面：

<body>
    <div class="container">
        <div class="d-flex align-items-center justify-content-start">
            <form th:action="@{/admin_homepage}" method=get>
                <button name="btn_back_profile" id="btn_back_profile" type="submit"
                    class="btn btn-info">
                    <span class="fas fa-chevron-left"></span>
                </button>
            </form>
        </div>
        <br>
        <div style='text-align: center'>
            <form class="well form-horizontal" action="#"
                th:action="@{/saveDoctor}" th:object="${doc}" method="POST"
                id="contact_form">
                <fieldset>
                    <!-- Form Name -->
                    <legend>
                        <center>
                            <h2>
                                <b>Doctor Creation Form</b>
                            </h2>
                        </center>
                    </legend>
                    <br>

                    <!-- Text input-->

                    <div class="form-group">
                        <label class="col-md-4 control-label">First Name</label>
                        <div class="col-md-4 inputGroupContainer">
                            <div class="input-group">
                                <span class="input-group-addon"><i
                                    class="glyphicon glyphicon-user"></i></span> <input name="first_name"
                                    th:field="*{firstName}" placeholder="Doc First Name"
                                    class="form-control" type="text" required>
                            </div>
                        </div>
                    </div>

                    <!-- Text input-->

                    <div class="form-group">
                        <label class="col-md-4 control-label">Last Name</label>
                        <div class="col-md-4 inputGroupContainer">
                            <div class="input-group">
                                <span class="input-group-addon"><i
                                    class="glyphicon glyphicon-user"></i></span> <input name="last_name"
                                    th:field="*{lastName}" placeholder="Doc Last Name"
                                    class="form-control" type="text" required>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-md-4 control-label">Type</label>
                        <div class="col-md-4 inputGroupContainer">
                            <div class="input-group">
                                <span class="input-group-addon"><i
                                    class="glyphicon glyphicon-list"></i></span> <input name="doc_type"
                                    th:field="*{doc_type}" placeholder="Doc Type"
                                    class="form-control" type="text" required>
                            </div>
                        </div>
                    </div>

                    <!-- Text input-->

                    <div class="form-group">
                        <label class="col-md-4 control-label">Id</label>
                        <div class="col-md-4 inputGroupContainer">
                            <div class="input-group">
                                <span class="input-group-addon"><i
                                    class="glyphicon glyphicon-user"></i></span> <input name="id"
                                    th:field="*{id}" placeholder="Doc ID" class="form-control"
                                    type="number" required>
                            </div>
                        </div>
                    </div>

                    <!-- Text input-->

                    <div class="form-group">
                        <label class="col-md-4 control-label">Password</label>
                        <div class="col-md-4 inputGroupContainer">
                            <div class="input-group">
                                <span class="input-group-addon"><i
                                    class="glyphicon glyphicon-user"></i></span> <input
                                    th:field="*{password}" name="doc_password"
                                    placeholder="Doc Password" class="form-control" type="password"
                                    required>
                            </div>
                        </div>
                    </div>

                    <!-- Button -->
                    <div class="form-group" align="center">
                        <label class="col-md-4 control-label"></label>
                        <div class="col-md-4">
                            <br>
                            <button type="submit" class="btn btn-warning">
                                SUBMIT <span class="glyphicon glyphicon-send"></span>
                            </button>
                        </div>
                    </div>
                </fieldset>
            </form>
            <div>
                <form th:action="@{/admin_logout}" method=post>
                    <button name="btn_logout_profile" id="btn_logout_profile"
                        type="submit" class="btn btn-primary">Log Out</button>
                </form>
            </div>
        </div>
    </div>
</body>

感谢您的宝贵时间！

Answer 1

故障发生在这条线上

driver.findElement(By.id("firstName")).click();

作为 CSS 选择器的 ID 是 #firstName。由于这是在页面转换之后，我的猜测是在下一行代码运行之前页面尚未完全加载。这有时会发生在加载页面但仍有内容在后台异步加载的现代站点上。解决方法是在下面的行中添加等待，特别是 WebDriverWait。这是一个选择...

与其在发现需要时零碎地添加等待，我更喜欢编写辅助方法来处理 click()、sendKeys() 等常见操作，然后让那些方法负责特定的等待。

public void click(By locator) {
    new WebDriverWait(driver, 10).until(ExpectedConditions.elementToBeClickable(locator)).click();
}

public void sendKeys(By locator, String text) {
    findElement(locator).sendKeys(text);
}

public WebElement findElement(By locator) {
    return new WebDriverWait(driver, 10).until(ExpectedConditions.visibilityOfElementLocated(locator));
}

然后您可以将脚本更改为

@Test
public void adminCreateDoc() {
    driver.get("http://localhost:8080/login");
    driver.manage().window().setSize(new Dimension(550, 706));
    click(By.linkText("Accesso amministratori"));
    sendKeys(By.id("username"), "8245");
    sendKeys(By.id("password"), "prova1");
    click(By.cssSelector(".btn"));
    click(By.id("btn_createDoc"));
    sendKeys(By.id("firstName"), "Marco");
    sendKeys(By.id("lastName"), "Battiato");
    sendKeys(By.id("doc_type"), "Cardiologo");
    sendKeys(By.id("id"), "855555");
    sendKeys(By.id("password"), "prova1");
    click(By.cssSelector(".glyphicon-send"));
}

我认为这使它更具可读性，在不需要额外代码的情况下为所有内容添加等待，等等...

下一级是使用页面对象模型来包含每个页面的定位器和方法。然后您的代码会得到显着清理，使其接近人类可读性，并且更易于管理。

NoSuchElementException - junit 测试错误

NoSuchElementException - junit test error

html

java

junit

selenium