如何使用Protractor 6（beta）执行Angular CLI 7.x E2E测试？

我刚成功用Protractor 6（beta）跑通了Angular CLI 7.x的E2E测试，踩了几个坑后终于搞定，下面是亲测有效的完整配置流程，我的环境是：

• Mac OS X 10.13.6
• Node 10.15.0 LTS（执行 node -v 可查看版本）
• Angular CLI 7.2.1（执行 ng version 可查看版本）
• Google Chrome 72.0.3626.53

具体步骤 #

1. 创建基础Angular应用
   执行命令生成带路由、SCSS样式的简易项目：

ng new ng72 --routing=true --style=scss

2. 更新package.json依赖
   修改项目根目录的package.json，确保以下两个依赖的版本正确：

"jasmine-core": "^3.3.0",
"protractor": "6.0.0-beta"

3. 调整测试代码适配async/await
   Protractor 6对异步处理的逻辑有更新，需要把E2E测试代码改成async/await风格，示例代码如下：

import { AppPage } from './app.po';

describe('workspace-project App', () => {
  let page: AppPage;

  beforeEach(() => {
    page = new AppPage();
  });

  it('should display welcome message', async() => {
    await page.navigateTo();
    await expect(await page.getTitleText()).toEqual('Welcome to ng72!');
  });
});

重要提醒：这里必须使用await page.getTitleText()，如果省略await，会触发NoSuchSessionError: invalid session id错误。

4. 执行配置与测试命令
   依次运行以下命令：

# 安装依赖
npm install
# 更新webdriver
./node_modules/protractor/bin/webdriver-manager update
# 重建node-sass适配当前环境
npm rebuild node-sass
# 运行E2E测试，禁止自动更新webdriver
ng e2e --no-webdriver-update

执行完这些步骤后，Chrome浏览器会自动启动，E2E测试就能成功执行了。

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