Angular 4（弹出）和 E2E 测试（量角器/Selenium 配置）答案

【问题标题】：Angular 4 (ejected) and E2E tests (Protractor/Selenium configuration)Angular 4（弹出）和 E2E 测试（量角器/Selenium 配置）
【发布时间】：2017-07-25 09:09:21
【问题描述】：

我正在尝试通过 Protractor/Selenium 在弹出的 Angular 4 项目上运行 E2E 测试。

我的package.json：

...
"scripts": {
    "pree2e": "webdriver-manager update --standalone false --gecko false --quiet node",
    "e2e": "protractor ./protractor.conf.js"
}
...

我的protractor.conf：

exports.config = {
    seleniumAddress: 'http://localhost:4444/wd/hub',
    directConnect: true,
    allScriptsTimeout: 60000,
    getPageTimeout: 60000,
    specs: [
        './src/e2e/**/*.e2e-test.ts'
    ],
    capabilities: {
        'browserName': 'chrome'
    },
    jasmineNodeOpts: {
        showColors: true,
        defaultTimeoutInterval: 60000
    },
    onPrepare() {
        require('ts-node').register({
            project: 'tsconfig.e2e.json'
        });

        jasmine.getEnv().addReporter(new SpecReporter({
            spec: {
                displayStacktrace: true
            }
        }));

        browser.driver.manage().timeouts().setScriptTimeout(60000);
    }
};

运行npm run e2e 时，Chrome 会启动，但它会尝试为每次测试打开data:text/html,<html></html>，然后迅速关闭。我错过了什么？我尝试将baseUrl 添加到我的protractor.conf 中，但这并没有帮助，因为似乎Selenium 甚至没有运行。

【问题讨论】：

您是否忘记指定您的应用程序baseUrl？
它在哪里运行？ :)
您必须在 conf 文件中指定。例如，请参阅此 conf 文件-github.com/igniteram/protractor-cucumber-typescript/blob/master/…
这是一个很好的例子 :) 说真的，我不知道我应该在那里指定什么？ Selenium 在哪里运行？如果我指定http://localhost:4444 它不起作用。
您应该在配置中使用seleniumAddress 或directConnect，但不能同时使用两者。您会看到，当您提供 selenium 地址时，它会在系统中本地运行 selenium 服务器。为此，您需要单独安装 selenium 服务器，但如果您使用directConnect，则无需安装 selenium 服务器，它会直接启动浏览器。在baseUrl 中提供您的应用程序网址并使用directConnect 现在看看！请参阅此链接了解更多信息 - protractortest.org/#/server-setup

标签： javascript angular testing protractor

【解决方案1】：

我终于找到了解决问题的方法。我不知何故需要运行ng serve，由于项目已退出，现在可以通过npm run start 运行。这是一个 Travis CI 部署（我强烈推荐），请参阅before_script：

before_script:
    - nohup npm run start &
script:
    - npm run build -aot --target=production --environment=prod
    - npm run test
    - npm run e2e

最终的package.json（在ng eject之后保持默认）：

...
"scripts": {
    "ng": "ng",
    "lint": "ng lint",
    "build": "webpack",
    "start": "webpack-dev-server --port=4200",
    "test": "karma start ./karma.conf.js",
    "pree2e": "webdriver-manager update --standalone false --gecko false --quiet",
    "e2e": "protractor ./protractor.conf.js",
    "postinstall": "npm run build -aot --target=production --environment=prod"
}
...

最终protractor.conf（ng eject 之后保持默认）：

exports.config = {
    allScriptsTimeout: 11000,
    specs: [
        './src/e2e/**/*.e2e-test.ts'
    ],
    capabilities: {
        'browserName': 'chrome'
    },
    directConnect: true,
    baseUrl: 'http://localhost:4200/',
    framework: 'jasmine',
    jasmineNodeOpts: {
        showColors: true,
        defaultTimeoutInterval: 30000,
        print: function() {}
    },
    beforeLaunch: function() {
        require('ts-node').register({
            project: 'tsconfig.e2e.json'
        });
    },
    onPrepare() {
        jasmine.getEnv().addReporter(new SpecReporter({
            spec: {
                displayStacktrace: true
            }
        }));
    }
};

当你 ng eject: https://github.com/angular/angular-cli/issues/6171 时会发生这种情况。

两天半的时间。感谢 Angular CLI 团队解决这个错误，真的，谢谢。

【讨论】：

感谢您发布您的解决方案。这也花了我好几天的时间。很烦人！