e2e测试Angular4 Heroes示例的实现

Question

这是我的代码：

describe('my-app Heroes', () => {
  let page: MyAppPage;
  beforeEach(() => {
    page = new MyAppPage();
  });

  it('should display dashboard page', () => {
   page.navigateTo();
   expect(page.getCurrentUrl()).toContain("dashboard");
 });

 .
 .// code 
 .
  // want to click first heroes for detail information
  it("click on first hero",()=>{
     element(by.css('my-dashboard a:nth-child(1)')).click();
     expect(page.getCurrentUrl()).toContain("detail");

   });

});

错误：

1) my-app Heroes click first hero
  - Failed: unknown error: Element <a _ngcontent-c0="" ng-reflect-router-link="/detail/12"  href="/detail/12">...</a> is not clickable at point (8, 167). Other element would receive the click: <nav>...</nav>
    (Session info: chrome=57.0.2987.98)
    (Driver info: chromedriver=2.29.461571 (8a88bbe0775e2a23afda0ceaf2ef7ee74e822cc5),platform=Linux 4.4.0-62-generic x86_64)

我观察到静态锚点击事件运行良好，但动态锚点出现此错误。