Angular 角度4+；量角器+；黄瓜+；打字脚本+；weback开发服务器-未找到 操作系统：macOS Sierra 10.12.4 节点：v7.9.0 净现值：5.0.3 黄瓜js:2.3.0 量角器：4.0.14 打字稿：2.2.2 网页包开发服务器：2.4.5

我在运行e2e测试时遇到问题。当我尝试从页面获取元素时：

const el = browser.findElement(by.id('app-name'));
el.getText().then(function (text) {
    console.log(text);
    callback();
});

使用“浏览器”时，我出现以下错误：

> test-app@0.0.1 bdd:test /Users/p24/PhpstormProjects/alex-angular2
> node ./node_modules/.bin/protractor

(node:28198) DeprecationWarning: os.tmpDir() is deprecated. Use os.tmpdir() instead.
[13:03:31] I/hosted - Using the selenium server at http://selenium-standalone-chrome:4444/wd/hub
[13:03:31] I/launcher - Running 1 instances of WebDriver
Feature: : adding an advertisement

  @web-test
  Scenario: : adding new advertisement
  ✔ Given I am on the main page
  ✔ When I click the add advertisement button
  ✖ Then I should see the form to add an advertisement

Failures:

1) Scenario: : adding new advertisement - features/adding_advertisement.feature:5
   Step: Then I should see the form to add an advertisement - features/adding_advertisement.feature:8
   Step Definition: features/step_definitions/advertisement.ts:32
   Message:
     Error: function timed out after 5000 milliseconds
         at Timeout._onTimeout (/Users/p24/PhpstormProjects/alex-angular2/node_modules/cucumber/lib/user_code_runner.js:91:22)
         at ontimeout (timers.js:386:14)
         at tryOnTimeout (timers.js:250:5)
         at Timer.listOnTimeout (timers.js:214:5)

1 scenario (1 failed)
3 steps (1 failed, 2 passed)
0m05.026s
Cucumber HTML report report/html/cucumber_report_hierarchy.html generated successfully.
Modified files: 
[13:03:47] E/protractor - Could not find Angular on page http://alex.local/ : retries looking for angular exceeded
[13:03:47] E/launcher - Angular could not be found on the page http://alex.local/. If this is not an Angular application, you may need to turn off waiting for Angular. Please see https://github.com/angular/protractor/blob/master/docs/timeouts.md#waiting-for-angular-on-page-load
[13:03:47] E/launcher - Error: Angular could not be found on the page http://alex.local/. If this is not an Angular application, you may need to turn off waiting for Angular. Please see https://github.com/angular/protractor/blob/master/docs/timeouts.md#waiting-for-angular-on-page-load
    at /Users/p24/PhpstormProjects/alex-angular2/node_modules/protractor/built/browser.js:506:23
    at ManagedPromise.invokeCallback_ (/Users/p24/PhpstormProjects/alex-angular2/node_modules/protractor/node_modules/selenium-webdriver/lib/promise.js:1379:14)
    at TaskQueue.execute_ (/Users/p24/PhpstormProjects/alex-angular2/node_modules/protractor/node_modules/selenium-webdriver/lib/promise.js:2913:14)
    at TaskQueue.executeNext_ (/Users/p24/PhpstormProjects/alex-angular2/node_modules/protractor/node_modules/selenium-webdriver/lib/promise.js:2896:21)
    at asyncRun (/Users/p24/PhpstormProjects/alex-angular2/node_modules/protractor/node_modules/selenium-webdriver/lib/promise.js:2775:27)
    at /Users/p24/PhpstormProjects/alex-angular2/node_modules/protractor/node_modules/selenium-webdriver/lib/promise.js:639:7
    at process._tickCallback (internal/process/next_tick.js:109:7)
[13:03:47] E/launcher - Process exited with error code 199
npm ERR! code ELIFECYCLE
npm ERR! errno 199
npm ERR! test-app@0.0.1 bdd:test: `node ./node_modules/.bin/protractor`
npm ERR! Exit status 199
npm ERR! 
npm ERR! Failed at the test-app@0.0.1 bdd:test script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/p24/.npm/_logs/2017-06-10T11_03_47_694Z-debug.log

这是我的webpack.config：

'use strict';

const HtmlWebpack = require('html-webpack-plugin');
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const extractPlugin = new ExtractTextPlugin({
   filename: 'main.css'
});
const CleanWebpack = require('clean-webpack-plugin');

const rootDir = path.resolve(__dirname);

module.exports = {
    devServer: {
        contentBase: path.resolve(rootDir, 'dist'),
        port: 3000,
        host: '0.0.0.0',
        disableHostCheck: true,
        public: '172.23.0.1'
    },
    watchOptions: {
        poll: true
    },
    devtool: 'source-map',
    entry: {
        "bundle": "./src/webpack.main.js",
        "plugins": "./src/plugins.js"
    },
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "[name].js",
        // publicPath: "/dist"
    },
    resolve: {
        extensions: [ '.js', '.ts' ]
    },
    module: {
        exprContextCritical: false,
        rules: [
            {
                test: /\.html$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]'
                        },
                    },
                    { loader: 'extract-loader' },
                    { loader: 'html-loader' }
                ],
                exclude: path.resolve(__dirname, 'src/index.html')
            },
            {
                test: /\index.html$/,
                loader: ['html-loader']
            },
            {
                test: /\.ts$/,
                loader: 'ts-loader',
                exclude: /node_modules/
            },
            {
                test: /\.(scss|css)$/,
                use: extractPlugin.extract({
                    use: ['css-loader', 'sass-loader']
                })
            },
            {
                test: /\.(jpg|png|gif|eot|ttf|svg|woff|woff2)$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath: 'img/',
                        publicPath: 'img/'
                    }
                }]
            },
        ],
    },
    plugins: [
        new CleanWebpack(['dist']),
        extractPlugin,
        new HtmlWebpack({
            template: 'src/index.html'
        }),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery",
            "Tether": 'tether'
        })
    ],
};

My progrator.config：

// Protractor configuration file, see link for more information
// https://github.com/angular/protractor/blob/master/lib/config.ts

exports.config = {
    seleniumAddress: 'http://selenium-standalone-chrome:4444/wd/hub',

    baseUrl: 'http://alex.local',

    capabilities: {
        browserName:'chrome'
    },

    framework: 'custom',

    frameworkPath: require.resolve('protractor-cucumber-framework'),

    specs: [
        './features/*.feature'
    ],

    cucumberOpts: {
        require: ['./features/step_definitions/*.ts'],
        tags: [],
        strict: false,
        format: ["pretty", "json:report/json/cucumber_report.json"],
        dryRun: false,
        compiler: ["ts:ts-node/register"]
    },

    onPrepare: function () {
        browser.manage().window().maximize();
    }
};

以及发生错误的步骤定义文件：

'use strict';

import {browser, element, by, By, $, $$, ExpectedConditions} from 'protractor';

const chai = require('chai');
const chaiAsPromised = require('chai-as-promised');

chai.use(chaiAsPromised);
const expect = chai.expect;

const {defineSupportCode} = require('cucumber');

    defineSupportCode(function(context: any) {

        const Given = context.Given;
        const When = context.When;
        const Then = context.Then;

        Given('I am on the main page', function (callback: any) {
            browser.get('http://alex.local');
            callback();
        });

        When('I click the add advertisement button', function (callback: any) {
            callback();
        });

        Then('I should see the form to add an advertisement', function (callback: any) {
            const el = browser.findElement(by.id('app-name'));
            el.getText().then(function (text) {
                console.log(text);
                callback();
            });
        });

    });

    export {};

码头工人提供一切服务。docker-compose.yml：

version: '2'
services:
  proxy:
    image: jwilder/nginx-proxy
    container_name: nginx-proxy-alex
    ports:
      - "80:80"
    volumes:
      - /var/run/docker.sock:/tmp/docker.sock:ro
  app:
     build: .
     command: npm run build
     environment:
       - NODE_ENV=development
       - VIRTUAL_HOST=alex.local
     volumes:
       - .:/usr/src/app
       - /usr/src/app/node_modules
     ports:
      - "8080:3000"
  selenium-chrome:
    image: selenium/standalone-chrome
    environment:
      - VIRTUAL_HOST=selenium-standalone-chrome
    ports:
      - "4444:4444"

---

请使用

browser.ignoreSynchronization=true块中描述
以便量角器不等待角度测量。
我认为有两个“问题”

首先，您使用的是量角器4。要使用量角器4测试角度2，您需要在配置中使用
useAllAngular2AppRoots:true
，或者，如果可能，升级到量角器5.1.2。这将解决第二个角度超时问题

第二，这是您的第一个超时，CucumberJS的默认超时时间仍然为5秒。如果这些步骤花费的时间超过5秒，则将始终停止这些步骤。通过将此代码添加到文件中，您可以增加它


//cucumber.config.js文件
从“cumber”导入{defineSupportCode}；
defineSupportCode（{setDefaultTimeout}）=>{
setDefaultTimeout（11000）；
});


运行命令：“npm安装”
您可以使用命令“npm run build”为应用程序提供服务，但还必须在主机selenium standalone chrome:4444上为selenium服务器提供服务，或者在另一台主机上运行selenium服务器，并在量角器配置“seleniumAddress”中更改selenium地址
您还可以使用“docker compose up-d”运行docker。然后必须在操作系统上设置主机，如下所示：

127.0.0.1 alex.local
127.0.0.1硒铬


我不知道它在其他系统上是如何工作的，但在Mac上，您必须在webpack配置中设置您的实际主机docker ip，如下所示：

devServer: {
        contentBase: path.resolve(rootDir, 'dist'),
        port: 3000,
        host: '0.0.0.0',
        disableHostCheck: true,
        public: '172.24.0.1'
    },

在“公共”中，您必须设置docker主机ip

然后，您可以运行“npm run bdd:test”以获取未找到角度的错误。如果您在运行我的应用程序时遇到任何问题，请写信给我。
我解决了这个问题。您所要做的就是在测试之前运行一个包含您的应用程序的开发服务器。这是使用webpack实现的。我不知道如何使用SystemJS在量角器中运行dev服务器。如果你知道怎么做，请告诉我；）这是我的dragrator.conf.js：

// Protractor configuration file, see link for more information
    // https://github.com/angular/protractor/blob/master/lib/config.ts
    var webpack = require('webpack');
    var WebpackDevServer = require('webpack-dev-server');
    var webpackConfig = require('./webpack.config');
    var deasync = require('deasync');
    var ip = require('ip');
    var server;
    var port = 5000;
    var baseUrl = 'http://' + ip.address() + ':' + port;
    function writeScreenShot(data, filename) {
        const stream = fs.createWriteStream(filename);
        stream.write(new Buffer(data, 'base64'));
        stream.end();
    }
    exports.config = {
        seleniumAddress: 'http://selenium-standalone-chrome:4444/wd/hub',
        baseUrl: baseUrl,
        useAllAngular2AppRoots: true,
        // directConnect: true,
        // chromeOnly:true,
        restartBrowserBetweenTests: true,
        ignoreUncaughtExceptions: true,
        beforeLaunch: () => {
            var isServerReady = false;
            var isBundleReady = false;
            var compiler = webpack(webpackConfig, () => {
                isBundleReady = true;
            });
            server = new WebpackDevServer(compiler, {});
            server.listen(port, () => {
                isServerReady = true;
            });
            deasync.loopWhile(() => !isServerReady || !isBundleReady);
        },
        afterLaunch: () => {
            server.close();
        },
        capabilities: {
            browserName: 'chrome',
        },
        framework: 'custom',
        frameworkPath: require.resolve('protractor-cucumber-framework'),
        specs: [
            './features/*.feature'
        ],
        cucumberOpts: {
            require: ['./features/step_definitions/*.ts'],
            tags: [],
            strict: false,
            format: ["pretty", "json:report/json/cucumber_report.json"],
            dryRun: false,
            compiler: ["ts:ts-node/register"],
        },
        onPrepare: function () {
            browser.ignoreSynchronization = true;
            browser.manage().window().setSize(1366, 768);
        }
    };

非常感谢你的答复。我将量角器更新为第5版，添加了useAllAngular2AppRoots并将其设置为true。我还尝试将默认超时设置为11秒，但仍然出现错误：[17:47:36]E/launcher-错误：在页面上找不到角度应用程序这不是角度应用程序，您可能需要关闭等待角度应用程序。请看是的，它是，我的组件加载在那里，它的工作。我试图使用syntax元素（by.id（'app-name'），但出现了相同的错误。你有一个示例项目吗？不幸的是，我无法将此项目上载到public上。我的检查问题：量角器是否支持Angular4？是的，我正在荷兰铁路使用Angular4，他们开始使用SemVer，所以它仍然是“Angular2”我将量角器更新为版本5。现在它显示browser.ignoreSynchronization已被弃用。我仍尝试使用它。现在我立即收到一个错误：[17:56:27]E/launcher-使用locator:By（css选择器，*[id=“app name”]）找不到任何元素我正在使用量角器版本5.1.2，量角器页面上显示的最新版本，我在任何地方都没有看到此弃用警告。更改日志也没有提及任何内容。我正在将量角器5.1.2与Angular 4一起使用，但没有遇到任何问题。您解决过此问题吗？我遇到了相同的问题。无法使用
browser.ignoreSynchronization=是的；
出于您在下面列出的原因。@Nxt3，是的，我解决了这个问题，我的测试也在进行中，但我需要回顾项目以刷新我的记忆。我会尽快解释解决方案。