量角器e2e测试无法识别登录后导航栏的变化

Question

运行e2e测试时，该测试涉及使用google登录API以给定的电子邮件和密码登录计算机。 登录后，导航栏将更改为“登录到注销”。 我试图在测试用例中等待，直到出现“注销”，但是量角器无法识别它，即使在运行测试时看到了它。

我将等待切换到主页图标，该图标始终显示在导航栏中，并且测试用例通过。

我还添加了一些代码，以查看它是否可以单击注销按钮，并且可以正常工作。 所以现在我很困惑，为什么browser.wait从未解决注销问题。

navbar.component.html（部分）

  <ul fxLayout fxLayoutGap="20px" class="navigation-items">
        <li>
          <a routerLink='/'>
            <mat-icon id="home-icon" class="icon">home</mat-icon>
            <span class="label">Home</span>
          </a>
        </li>
        <li>
          <a>
            <mat-icon id="input-icon" class="icon">account_circle</mat-icon>
            <div *ngIf="auth.user$ | async; then user else guest"></div>
            <ng-template #user>
              <span class="label" id="logout" (click)="auth.signOut()">Logout</span>
            </ng-template>
            <ng-template #guest>
              <span class="label" id="login" (click)="auth.googleSignin()">Login</span>
            </ng-template>
          </a>
        </li>

   </ul>

测试用例

describe('Student Component e2e tests', () => {
  const ec = protractor.ExpectedConditions;
  const BROWSER_WAIT = 5000;

  beforeAll(() => {
    this.signInButton.click();
    this.loginToGoogle();
    // browser.sleep(5000);
    // element(by.id('logout')).click(); // able to click logout button
    // browser.sleep(5000);
    browser.wait(ec.visibilityOf(element(by.id('logout'))), 
  BROWSER_WAIT);
  });

  it('should find Logout button', () => {
    expect(element(by.id('logout')).isPresent()).toBe(true);
  });
});

我希望输出返回没有错误，但是实际输出返回超时错误。

重新创建克隆存储库https://github.com/ChadwickSchool/Weight-Lifting-App/tree/logout-test-error

然后运行命令

git checkout logout-test-error
npm install
ng e2e

Answer 1

发生此问题的原因是，量角器无法在browser.wait（ec.visibilityOf（element（by.id（'logout'））））中解析promise，为什么呢？最有可能的原因是登录表单不是Angular，因此量角器尝试与其进行同步但永远不会发生。删除浏览器时测试正在运行。wait（ec.visibilityOf ...，因为没有悬空的承诺。尝试在打开登录表单之前使用browser.ignoreSynchronization = true，最后一次打开浏览器后使用browser.ignoreSynchronization = false等待（browser.sleep（5000））

Answer 2

所以我不确定究竟是什么修复了它，但是当我们重构代码以使用ng-container时，它开始起作用。 新的导航栏组件如下所示：

<div fxFlex fxLayout fxLayoutAlign="flex-end" fxHide.xs>
    <ul fxLayout fxLayoutGap="20px" class="navigation-items">
      <ng-container *ngIf="auth.user$ | async as user; else guest">
        <li>
          <a>
            <div *ngIf="user.isAdmin; then adminhome; else studenthome"></div>
            <ng-template #adminhome>
              <a routerLink="/admin-home" id="home">
                <mat-icon id="home-icon" class="icon">home</mat-icon>
                <span class="label">Home</span>
              </a>
            </ng-template>
            <ng-template #studenthome>
              <a routerLink="/student-home" id="home">
                <mat-icon id="home-icon" class="icon">home</mat-icon>
                <span class="label">Home</span>
              </a>
            </ng-template>
          </a>
        </li>
        <li>
          <a>
            <div *ngIf="user.isAdmin; then adminview"></div>
            <ng-template #adminview>
              <a routerLink="/student-list">
                <mat-icon id="history-icon" class="icon">view_list</mat-icon>
                <span class="label" id="history-label">Student's Workout History</span>
              </a>
            </ng-template>
          </a>
        </li>
        <li>
          <a>
            <mat-icon id="dashboard-icon" class="icon">fitness_center</mat-icon>
            <div *ngIf="user.isAdmin; then admin; else student"></div>
            <ng-template #admin>
              <a routerLink="/today-workout-admin">
                <span id="create-workout" class="label">Create Workout</span>
              </a>
            </ng-template>
            <ng-template #student>
              <a routerLink="/today-workout-student">
                <span id="workout-label" class="label">Today's Workout</span>
              </a>
            </ng-template>
          </a>
        </li>
        <li>
          <a>
            <mat-icon id="input-icon" class="icon">account_circle</mat-icon>
            <span class="label" id="logout" (click)="auth.signOut()"
              >Logout</span
            >
          </a>
        </li>
      </ng-container>
      <ng-template #guest>
        <li>
          <a>
            <mat-icon id="input-icon" class="icon">account_circle</mat-icon>
            <span class="label" id="login" (click)="auth.googleSignin()"
              >Login</span
            >
          </a>
        </li>
      </ng-template>
    </ul>
  </div>

完整的组件在这里： https : //github.com/ChadwickSchool/Weight-Lifting-App/tree/development/src/app/navigation/navbar