NoSuchElementException - junit 测试错误

Question

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

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

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

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

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

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