Angular 4 + Protractor + Cucumber + TypeScript + webpack-dev-server - Angular 未找到

Question

• 操作系统:macOS Sierra 10.12.4
• 节点:v7.9.0
• Npm:5.0.3
• cucumber -js:2.3.0
• Protractor :4.0.14
• typescript :2.2.2
• webpack-dev-server:2.4.5

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

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

使用“浏览器”我收到此错误:

> <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="37435244431a564747770719071906" rel="noreferrer noopener nofollow">[email protected]</a> 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! <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bbcfdec8cf96dacbcbfb8b958b958a" rel="noreferrer noopener nofollow">[email protected]</a> bdd:test: `node ./node_modules/.bin/protractor`
npm ERR! Exit status 199
npm ERR! 
npm ERR! Failed at the <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d6a2b3a5a2fbb7a6a696e6f8e6f8e7" rel="noreferrer noopener nofollow">[email protected]</a> 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'
        })
    ],
};

我的 Protractor 配置:

// 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 提供。 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"

Answer 1

我认为有两个“问题”。

首先，您使用的是 Protractor 4。要使用 Protractor 4 测试 Angular 2，您需要在配置中使用 useAllAngular2AppRoots: true，或者，如果可能的话，升级到 Protractor 5.1.2.这应该可以解决您的第二个 Angular Timeout 问题。

第二，这是你的第一次超时，你仍然有 CucumberJS 默认超时 5 秒。如果步骤花费的时间超过 5 秒，那么总会停止步骤。通过将此代码添加到文件中，您可以增加它。

// cucumber.config.js file
import { defineSupportCode } from 'cucumber';

defineSupportCode(({setDefaultTimeout}) => {
    setDefaultTimeout(11000);
});

希望有帮助。

更新:

只是为了消除不正确 Protractor 语法:

• useAllAngular2AppRoots: true 在 Protractor 5 中不需要，只有在 4 中才需要，我的错是我没有提到这一点
• 使用“正确”语法在页面上查找元素是使用 element(by.id('app-name') 而不是 browser.findElement(by.id('app- name'))，您的语法是“vanilla”webdriver 语法，无需等待 Angular

只需 1 个检查问题 - 您的初始页面真的是 Angular 页面吗？

测试项目后更新:

我尝试运行你的项目，但遇到了各种不同类型的错误。我无法使用提供的命令为项目提供服务

ERROR in Cannot read property 'getSymbolByModule' of undefined
ERROR in multi ./src/styles.scss
Module not found:... 

我想运行你的测试来看看会发生什么，并且发生了一些奇怪的事情。步骤 Given('I am on the main page') 成功，但未加载任何网站。然后我在您的 Then('我应该看到添加广告的表单') 上遇到了相同的超时。

查看您的步骤实现后，我认为这是初始错误，您需要在解决 browser.get() 时调用 callback ，或者返回一个 promise ，见下文。

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

// Or return a promise
Given('I am on the main page', function() {
  return browser.get('http://alex.local');
});

如果您使用上述实现之一，我想您会发现问题出在第一步，而不是 Then('I should see the form to add an advert') 中您以正确的方式实现了回调。

应用程序运行后更新

现在可以使用了。使用npm run build(手动)。然后将 http://alex.local 更改为 http://localhost:3000。

当我运行此测试时

Given('I am on the main page', function(callback: any) {
  // browser.ignoreSynchronization = true;
  browser.get('http://localhost:3000').then(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 = element(by.css('.btn.btn-default'));
  el.getText().then(function(text) {
    console.log(text);
    callback();
  });
});

成功了，你会得到这个日志

Feature: : adding an advertisement

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

1 scenario (1 passed)
3 steps (3 passed)
0m00.897s

你需要手动启动服务器，我不使用Webpack，但通常我这样做

const express = require('express');
const path = require('path');
const app = express();
const child_process = require('child_process');

const e2e = path.resolve(process.cwd(), './e2e-tests/config/');
const port = 5555;
const root = path.resolve(process.cwd(), './dist/prod/');

/**
 * Start a server
 */
class Protractor {
  server(port, dir) {
    app.set('port', port);
    app.use(express.static(dir));

    return new Promise((resolve) => {
      let server = app.listen(port, () => {
        resolve(server);
      });
    });
  }
}

/**
 * Start server and then run protractor
 */
(() => {
  process.env.LANG = 'en_US.UTF-8';
  const child = child_process.exec('npm run e2e');
  new Protractor()
    .server(port, root)
    .then((server) => {
      child.stdout.pipe(process.stdout);
      child.stderr.pipe(process.stderr);
      // Stop the server if Protractor crashes or we're done testing
      child.on('exit', () => {
        server.close();
      });
    });
})();

我认为您也需要对您的应用程序执行此操作。 (我使用 ng-apimock 进行模拟)