java - 如何使用java selenium点击jsp页面中vue js渲染的按钮

Question

我正在尝试在jsp页面中获取由vue js呈现的按钮。对于普通的jsp页面，我可以使用xpath找到元素，但无法找到vue.js渲染的元素

例如，我的jsp页面包含

<div id="fileUploadDiv" style="display: flex; border: medium none; height: 620px;">
<object id="mlFirstResponse" style="flex:1;display:flex;border: none;" type="text/html" data="/abc/index.html?abcId=0&amp;=editingPolicy=false&amp;objectHeight=480">
.
.
.
<div data-v-010855a7="" style="width: 100%; float: right;">
<button data-v-1f92dc12="" data-v-010855a7="" class="btn outline" id="clickable_id" style="float:right;padding: 5px 20px;font-size: 13px;">Continue to next page</button>
</div>
.
.
</object>

</div>

为此，我可以使用

找到该元素

driver.findElements(By.xpath("//*[@id=\"fileUploadDiv\"]")), (This id is rendered from jsp page)

类似地，我尝试获取 id="clickable_id"的按钮，例如

driver.findElements(By.xpath("//*[@id=\"clickable_id\"]")),   (This id is rendered from vue js)

但是我没有找到这样的元素发现异常错误

Answer 1

可能是按钮在之后 DOM 加载的情况完成加载，即Document.readyState属性等于 complete 并且该按钮仍然不存在，因为它是通过 AJAX 添加的要求。

考虑添加Explicit Wait所以WebDriver可以再等待一段时间直到按钮出现，可以使用WebDriverWait来完成和ExpectedConditions类组合如:

WebDriverWait wait = new WebDriverWait(driver, 10);
WebElement myButton = wait.until(ExpectedConditions.presenceOfElementLocated(By.id("clickable_id")));

更多信息:How to use Selenium to test web applications using AJAX technology