量角器：如何获取ngb警报的文本

Question

我尝试了很多事情，我尝试了等待浏览器和不等待浏览器。但每次它就是不想看到警报。

SO的这篇文章似乎正是我的问题:量角器:测试引导警告，但也没有解决我的问题。

这是弹出的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来确保程序等待，因此下面代码中的所有函数都是异步函数。所以我尝试这样做（也没有catch，并且有一个额外的函数用于超时）。这是页面对象内的一个方法，因此它返回值：

(脚本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已经很好了，但由于某种原因，直到。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.thentrue： false
browser.wait.catch： JavascriptError： javascript错误：角度未定义

好的，所以我在这里使用until . presence of(until = expected conditions)并且没有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秒）长呢。

Answer 1

我在这里找到了答案:

…警报的内部关闭功能已通过Angular的$timeout服务实现，该服务增加$浏览器的未完成请求计数，量角器增加忽略同步=false，正确等待，直到有任何未完成的请求。这意味着如果您不禁用同步，您将看不到打开的警报，因为量角器会暂停执行，直到它可见…

但是忽略同步已被弃用，因此您需要使用 await 浏览器.wait进行角度启用（假）。这可确保它不会等到警报消失后再检查警报的内容。

因此，这是一个在发生警报时为我获取ngb警报文本的代码（对于我的代码，我不希望发生错误，但当发生错误时，我想知道是什么错误）：

await browser.waitForAngularEnabled(false);
await browser.wait(until.presenceOf(element(by.css('.alert-danger'))), 5 * 1000)
    .then((isPresent) => {
        console.log('presence of error: ' + isPresent);
        $('ngb-alert').getText().then((errorAlert) => {
          expect('no error').toBe('displayed', 
          'This error showed up when adding data source: ' + errorAlert)
        });
        }, (isNotPresent) => {
            console.log('no presence of error: ' + isNotPresent)
        }).catch((error) => {
            console.log('checking presence of error caused an error: ' + error)
        })
await browser.waitForAngularEnabled(true);

附注:通过绑定获取元素不是angular 5能做到的，会出现以下错误:

"JavascriptError: javascript error: angular is not defined".