使用量角器和 Angular 进行 E2E 测试：让量角器在浏览器加载时等待

如何解决使用量角器和 Angular 进行 E2E 测试：让量角器在浏览器加载时等待

我正在测试访问第三个网站以处理登录 (oAuth) 的网页。为了测试我的网页，我首先需要在第三个网站上进行我的e2e测试登录。我能够在第三个网站上找到用户电子邮件地址的输入元素并输入它。然后我也可以点击“继续”按钮，第三个网站现在打开一个新的片段来输入密码。

问题来了：密码字段不可交互，我收到以下错误：

 - Failed: element not interactable
    (Session info: chrome=87.0.4280.141)
    (Driver info: chromedriver=87.0.4280.20 (c99e81631faa0b2a448e658c0dbd8311fb04ddbd-refs/branch-heads/4280@{#355}),platform=Windows NT 10.0.17763 x86_64)

我认为原因是页面尚未呈现新片段，因此密码输入字段尚不可见。所以我使用了 browser.sleep(1000)，但这也会停止浏览器，对吗？因此，经过 1000 毫秒后，该片段仍未加载。我知道还有一些东西

browser.wait(EC.urlContains("The URL of the password input page"))),1000);

这里的问题是“Enter Email”-Part 和“Enter-Password”-Part 的 URL 是一样的，所以这个命令会检查 URL 并立即继续。

我也试过这个：

element(by.id("<id of the continueButton on the login fragment>).click().then(() => {
 ->perform my other actions for the passowrt part here
})

但它不起作用，我认为从click()返回的Promise在点击发生后立即解决，所以页面仍然没有到达密码部分。

这是我目前的代码：

describe('workspace-project App',() => {

  it('Login at third website works.',async () => {
    await browser.get('https://my-webiste.com');
    
    const startButton = element(by.tagName('button'));
    startButton.click();
    // after clicking the start button on my page we get redirected to the login page of my 
    // oauth provider (third website) 
    browser.sleep(100)
    browser.getcurrenturl().then(url => {
        expect(url.split("?")[0]).toEqual('https://my-oauth-login-page.com/login/gb/en_GB')
      })

    const inputEmail = element(by.id('username'));
    const LogInButtonEmail = element(by.tagName('button'));
      
    await inputEmail.sendKeys("<user-email-address for login>");
    browser.sleep(100)
    LogInButtonEmail.click();
    browser.sleep(1000)
    //until here everything works fine,but Now we open the new fragment for entering the password and the test failsbefore the fragment gets shown:

    const inputPassword = element(by.id('current-password'));
    const LogInButtonPassword = element(by.tagName('button'));
    await inputPassword.sendKeys("<user-password for login>");
    browser.sleep(100)
    LogInButtonPassword.click();
    browser.sleep(100)
      
    browser.getcurrenturl().then(url => {
        expect(url).toEqual('https://my-website-URL-after-successfull-redirect-from-oauth.com')
    })

  });

  afterEach(async () => {
    // Assert that there are no errors emitted from the browser
    const logs = await browser.manage().logs().get(logging.Type.broWSER);
    expect(logs).not.toContain(jasmine.objectContaining({
      level: logging.Level.SEVERE,} as logging.Entry));
  });
});

当我让浏览器休眠更长时间并在保护程序打开的浏览器中手动输入密码时，登录成功并且我的网站的所有后续测试都通过。天哪，我希望他们将电子邮件和密码放在同一个视图/片段上，这样就没问题了，arg...

欢迎任何提示； )

解决方法

在量角器中，一切都是承诺，你应该等待承诺得到解决

await browser.wait(EC.urlContains("The URL of the password input page"))),1000);

Await 只能在异步函数中使用，因为您已将其声明为异步块，您可以使用 await

await browser.sleep(3000) 不会停止浏览器，它只是停止量角器向浏览器发送命令 3 秒。就像添加脚本睡眠一样

browser.wait(EC.elementToBeVisible($('密码字段')),10000);