【发布时间】：2020-02-25 21:25:14
【问题描述】：
我想测试添加数据源是否有效。通常我在模态中提供信息，单击确认，模态消失并且我的数据源列表现在更长。 （我在添加数据源之前和之后检查长度，所以我希望列表在编辑后会更长）。 但是，当数据源不存在或已添加时，会弹出引导警报并显示错误消息，并且模式保持不变。 我想要什么：检查是否出现错误消息，以便我可以显示该错误消息而不是数据源的计数。这样我可以更快地知道我的测试失败的原因。
我尝试了很多东西，我尝试等待浏览器并且不等待浏览器。但每次它只是不想看到警报。
来自 SO 的这篇帖子似乎正是我的问题：protractor: testing bootstrap alerts，但也没有解决我的问题。
这是弹出的html代码：
<dm-alert>
<ngb-alert>
<div role="alert" class="alert alert-danger alert-dismissible">
<button aria-label="Close" class="close" type="button">
<span aria-hidden="true">×</span>
</button>
The description '4106-5002-5005-5006-02' has to be unique
</div>
</ngb-alert>
</dm-alert>
我使用 async/await 来确保程序等待，因此以下代码所在的所有函数都是异步函数。 所以我尝试像这样达到它（也没有捕获，并且在超时超过时具有额外的功能）。这是页面对象中的一个方法，这就是它返回值的原因：
（脚本 1）
import { $, browser, by, element, ExpectedConditions as until } from 'protractor';
await browser.wait(until.presenceOf(element(by.xpath('//ngb-alert/div[contains(@class, alert-danger)]'))), waitTimeForErrorInSeconds * 1000).then((isPresent) => {
return isPresent;
}).catch(() => {
console.log('no error occured')
return false;
})
return false;
就像这样，这个只是在测试中： （脚本 2）
await browser.wait(until.presenceOf(element(by.xpath('//ngb-alert/div[contains(@class, alert)]'))), 10 * 1000)
.then((isPresent) => {
console.log('is present (true): ' + isPresent);
let text = element(by.xpath('//ngb-alert/div[contains(@class, alert)]')).getText();
console.log(text);
}, (isPresent) => {
console.log('is present (false): ' + isPresent)
}).catch((error) => {
console.log('browser.wait.catch: ' + error)
})
这里的测试总是在警报出现或不出现时进入“存在（假）”。我喜欢它不会通过我的测试，但我希望它在警报弹出时注意到。
像这样（也在测试中）： （脚本 3）
expect(element(by.xpath('//ngb-alert/div[contains(@class, alert)]'))
.isDisplayed())
.toBeFalsy();
isDisplayed 总是报错，因为它找不到元素
（脚本 4）
expect(element(by.xpath('//ngb-alert/div[contains(@class, alert)]'))
.isPresent())
.toBeFalsy();
isPresent 在不存在错误时运行良好，但当存在错误时，它不会注意到。
我通过在 chrome 的开发工具中搜索 XPath 来检查它，当它存在时，它总是立即找到它，所以这不应该是问题。在我尝试所有这些事情之前，我让它工作了。所以以前用那个 XPath 搜索它是有效的。
编辑：
所以我注意到我的脚本 2 已经很好了，但是由于某种原因 until.presenceOf 不起作用，但是如果我对元素执行 .isPresent() ，它似乎确实找到了该元素。但为什么呢？
这是警报的代码：
<ngb-alert [type]="notification.category" (close)="close(notification)">
{{ notification.message }}
</ngb-alert>
所以我认为其中一个应该在脚本 2（第 5 行）中工作以获取通知的文本：
element(by.xpath('//ngb-alert')).getText();
element(by.xpath('//ngb-alert/div')).getText();
element(by.xpath('//ngb-alert/div[contains(@class, alert)]')).getText();
element(by.binding('notification.message')).getText();
element(by.binding('notification.message')).$('ngb-alert').getText();
但他们没有……
所以，再试一次： （脚本 5）
await browser.wait((element(by.xpath('//ngb-alert/div[contains(@class, alert-danger)]')).isPresent()), 3 * 1000)
.then((isPresent) => {
console.log('browser.wait.then true: ' + isPresent)
element(by.binding('notification.message')).$('ngb-alert').getText()
.then((text) => {
console.log(text);
});
}, (isPresents) => {
console.log('browser.wait.then false: ' + isPresents)
}).catch((error) => {
// if fails
console.log('browser.wait.catch: ' + error)
})
返回
browser.wait.then true: false
browser.wait.catch：JavascriptError：javascript错误：未定义角度
再试一次...
好的，所以我在这里使用 until.presenceOf (until = ExpectedConditions) 并且没有 xpath：
await browser.wait(until.presenceOf($('.alert-danger')), 3 * 1000)
.then((isPresent) => {
console.log('browser.wait.then true: ' + isPresent);
$('ngb-alert').element(by.binding('notification.message')).getText().then((text) => {
console.log(text);
});
}, (isPresents) => {
console.log('browser.wait.then false: ' + isPresents)
}).catch((error) => {
console.log('browser.wait.catch: ' + error)
})
这里发生的情况是，当没有显示警报时，它会给出我期望的响应：
browser.wait.then false: TimeoutError: Wait timed out after 3013ms
但是当提示出现时，它会等到提示消失后再告诉我：
browser.wait.then false: TimeoutError: Wait timed out after 7664ms
那么为什么它突然等待的时间比我给的超时时间（3 秒）长。
【问题讨论】：
标签： typescript jasmine protractor