Angular 5+Protractor：登录后等待浏览器URL变更失败问题

嘿，这个问题我以前在做Angular项目的Protractor自动化测试时也踩过坑！你遇到的核心问题大概率是**browser.ignoreSynchronization的不当使用**，加上没有用Protractor内置的等待机制来处理URL跳转的异步过程。

先分析下你的代码里的潜在问题：

• 你设置了browser.ignoreSynchronization = true，这通常是给非Angular页面用的，但登录成功后跳转到的仪表盘是Angular页面，这时候如果不把这个属性改回来，Protractor不会等待Angular的初始化和异步操作完成，导致你还没等到URL完全跳转就去验证，自然会失败。
• 没有使用Protractor提供的ExpectedConditions来等待URL变更，直接检查URL的话时机太随机，很容易因为页面跳转的异步性导致断言失败。

修复方案 #

我给你整理了修改后的测试用例，一步步来：

1. 正确切换ignoreSynchronization状态：登录页用true，进入Angular仪表盘后切换回false，让Protractor重新开始等待Angular的异步任务。
2. 用ExpectedConditions等待URL变更：通过内置的等待条件确保URL确实跳转到了仪表盘页面后再做断言。

修改后的代码如下：

fdescribe('Suite 1', function() {
  it('should login and land on the dashboard page', function() {
    // Arrange
    const baseUrl = 'confidentialUrl';
    const email = 'email';
    const password = 'password';
    // 登录页如果是非Angular，先设置ignoreSynchronization为true
    browser.ignoreSynchronization = true;

    // Act
    browser.get(baseUrl);
    element(by.id('username')).sendKeys(email);
    element(by.id('password')).sendKeys(password);
    // 点击登录按钮（假设你的登录按钮选择器是这个，按需修改）
    const loginBtn = element(by.id('login-btn'));
    loginBtn.click();

    // 关键：登录后跳转到Angular页面，把ignoreSynchronization改回false
    browser.ignoreSynchronization = false;

    // 等待URL包含仪表盘的路径（比如'/dashboard'，按需修改你的实际路径）
    const EC = protractor.ExpectedConditions;
    const dashboardUrlContains = EC.urlContains('/dashboard');
    // 设置等待超时时间，比如10秒，可按需调整
    browser.wait(dashboardUrlContains, 10000, '超时未跳转到仪表盘页面');

    // Assert
    expect(browser.getCurrentUrl()).toContain('/dashboard');
  });
});

额外的优化建议 #

• 如果你的登录按钮点击后会触发HTTP请求，也可以等待某个仪表盘页面特有的元素出现（比如仪表盘的标题），双重保障：

  const dashboardTitle = element(by.css('.dashboard-title'));
  browser.wait(EC.visibilityOf(dashboardTitle), 10000, '仪表盘元素未加载');
  

• 注意：Angular 5之后的版本（比如Angular 6+）browser.ignoreSynchronization被废弃了，改用browser.waitForAngularEnabled(false)，不过你用Angular5的话还是用前者没问题。

这样修改后，就能确保测试会等待URL完全跳转到仪表盘后再进行断言，不会再出现“没等到URL变更”的问题啦！

内容的提问来源于stack exchange，提问作者AngularM