Protractor + Mocha在浏览器加载SUT之前失败并出现TypeError套件 [英] Protractor+Mocha fails suite with TypeError before browser loads SUT

问题描述

我正在探索angular2 + angular-cli +打字稿.我的目标是确保如果我在打字稿中使用角度应用程序或节点应用程序，我将使用与使用Mocha的旧式节点应用程序相同的测试技术.为此，我试图重新配置angular-cli生成的protractor.conf.js以使用摩卡而不是茉莉花.

I'm exploring angular2 + angular-cli + typescript. My objective is to ensure that if I am doing an angular app or a node app in typescript I would be using the same testing technologies as legacy node apps that use mocha. To this end I am trying to reconfigure the angular-cli generated protractor.conf.js to use mocha instead of jasmine.

您如何正确集成angular-cli + mocha +量角器，以便与量角器一起执行测试，而量角器实际上为mocha规格提供了有用的浏览器/元素/组件?

我已经将protractor.conf.js更改为使用mocha和chai，并且测试已完成，但是与量角器组件的所有交互均失败，即element(by.css('app-root h1')).getText().

I've already changed the protractor.conf.js to use mocha and chai and the tests complete, however all interactions with protractor components fail i.e. element(by.css('app-root h1')).getText().

exports.config = {
  allScriptsTimeout: 11000, // The timeout for a script run on the browser. 
  specs: [
    './e2e/**/*.e2e-spec.ts' // pattern for the test specs
  ],
  baseUrl: 'http://localhost:4200/', // base url of the SUT
  capabilities: {
    'browserName': 'chrome' // browser to use
  },
  directConnect: true, // selenium will not need a server, direct connet to chrome
  framework: 'mocha', // Use mocha instead of jasmine
  mochaOpts: { // Mocha specific options 
    reporter: "spec",
    slow: 3000,
    ui: 'bdd',
    timeout: 30000
  },
  beforeLaunch: function() { // Do all the typescript 
    require('ts-node').register({
      project: 'e2e/tsconfig.e2e.json'
    });
  },
  onPrepare: function() {}
};

怀疑

感觉是问题在于浏览器甚至没有加载该应用程序之前，该套件正在执行(并且失败).这可能是量角器/浏览器的交互，据我所知应该与所使用的规范无关.也许这种理解是不正确的?

Suspicion

It feels like the issue is that the suite is executing (and failing) before the the browser has even loaded the app. This could be the protractor/browser interaction which from what I understand should be agnostic to the spec that's being used. Perhaps this understanding is incorrect?

我在GitHub上有一个正在运行的示例，用于测试和比较转换

I have a running example on GitHub which I am using to test and compare the conversion

• 使用摩卡(Mocha)断开的分支
• 使用茉莉花的工作大师

• Broken branch using mocha
• Working master using jasmine

在命令行node node_modules\protractor\bin\protractor protractor.conf.js --stackTrace --troubleshoot上运行量角器(通过节点)向我们展示了该套件已配置并在truthy测试，跳过的测试以及实际的应用程序测试中运行

Running protractor (via node) on the command line node node_modules\protractor\bin\protractor protractor.conf.js --stackTrace --troubleshoot shows us that the suite is configured and running with a truthy test, a skipped test, and the actual application tests

我们看到真实测试通过，跳过的测试被跳过，并且应用程序测试全部失败，并伴有相同的错误

We see that the truthy test is passing, the skipped test is skipped, and the application tests all fail with the same sort of error

1 passing 
1 pending
5 failing

 1) A descriptive test name that is irrelevant to the error:
     TypeError: obj.indexOf is not a function
      at include (node_modules\chai\lib\chai\core\assertions.js:228:45)
      at doAsserterAsyncAndAddThen (node_modules\chai-as-promised\lib\chai-as-promised.js:293:29)
      at .<anonymous> (node_modules\chai-as-promised\lib\chai-as-promised.js:271:25)
      at chainableBehavior.method (node_modules\chai\lib\chai\utils\overwriteChainableMethod.js:51:34)
      at assert (node_modules\chai\lib\chai\utils\addChainableMethod.js:84:49)
      at Context.it (e2e\search\search.e2e-spec.ts:14:40)
      at runTest (node_modules\selenium-webdriver\testing\index.js:166:22)
      at node_modules\selenium-webdriver\testing\index.js:187:16
      at new ManagedPromise (node_modules\selenium-webdriver\lib\promise.js:1067:7)
      at controlFlowExecute (node_modules\selenium-webdriver\testing\index.js:186:14)
  From: Task: A descriptive test name that is irrelevant to the error
      at Context.ret (node_modules\selenium-webdriver\testing\index.js:185:10)

出现TypeError的原因似乎是因为应用程序本身似乎不需要花时间在套件完成之前就真正地在浏览器中加载

It appears that the TypeError would be caused because the app itself never seems to have to time to actually load in the browser before the suite is complete

[09:26:33] D/launcher - Running with --troubleshoot
[09:26:33] D/launcher - Protractor version: 5.1.1
[09:26:33] D/launcher - Your base url for tests is http://localhost:4200/
[09:26:33] I/direct - Using ChromeDriver directly...
[09:26:36] D/runner - WebDriver session successfully started with capabilities Capabilities {
  'acceptSslCerts' => true,
  'applicationCacheEnabled' => false,
  'browserConnectionEnabled' => false,
  'browserName' => 'chrome',
  'chrome' => { chromedriverVersion: '2.28.455520 (cc17746adff54984afff480136733114c6b3704b)',
  userDataDir: 'C:\\Users\\abartish\\AppData\\Local\\Temp\\scoped_dir4596_5000' },
  'cssSelectorsEnabled' => true,
  'databaseEnabled' => false,
  'handlesAlerts' => true,
  'hasTouchScreen' => false,
  'javascriptEnabled' => true,
  'locationContextEnabled' => true,
  'mobileEmulationEnabled' => false,
  'nativeEvents' => true,
  'networkConnectionEnabled' => false,
  'pageLoadStrategy' => 'normal',
  'platform' => 'Windows NT',
  'rotatable' => false,
  'takesHeapSnapshot' => true,
  'takesScreenshot' => true,
  'unexpectedAlertBehaviour' => '',
  'version' => '56.0.2924.87',
  'webStorageEnabled' => true }
[09:26:36] D/runner - Running with spec files ./e2e/**/*.e2e-spec.ts

其他信息

有趣的是，如果您使用elementExplorer node node_modules\protractor\bin\protractor protractor.conf.js --stackTrace --troubleshoot --elementExplorer运行量角器，它将不会运行测试，但是我们确实会在启动的浏览器中看到SUT解析.这我无法解释.

Additional Info

Interestingly enough, if you run protractor with elementExplorer node node_modules\protractor\bin\protractor protractor.conf.js --stackTrace --troubleshoot --elementExplorer it will not run the tests but we do see the SUT resolve in the browser that gets launched. This I can't explain.

推荐答案

首先，我对Mocha不太熟悉.但是，我可以让您的测试通过.这是您需要做的:

First off, I am not that familiar with Mocha. However, I can get your tests to pass. This is what you'll need to do:

有时最好结合最新和最大的依赖关系.最新的chai-as-promised对我不起作用.我曾经尝试将量角器依赖项更新为最新版本的chai和chai-promise并运行问题.我不得不降级您的依赖关系并最终使用:

It sometimes is great to roll with the latest and greatest dependencies. The latest chai-as-promised did not work for me. I once tried to update the Protractor dependencies to the latest version of chai and chai-as-promised and ran issues. I had to downgrade your dependencies and ended up working with:

"chai": "~3.5.0",
"chai-as-promised": "~5.3.0",

这些是与Protractor package.json相同的版本.

These are the same versions as the Protractor package.json.

在量角器运行测试之前，按约定设置chai-promise:

Set chai-as-promised before Protractor runs the test:

onPrepare: function() {
  let chai = require('chai');
  let chaiAsPromised = require("chai-as-promised");
  chai.use(chaiAsPromised);
  global.chai = chai;
}

编辑测试:

添加或修改以下内容.

Edit the test:

Add or modify the following.

app.e2e-spec.ts

app.e2e-spec.ts

import {RootPage} from './root/root.po';
let expect = global["chai"].expect;

  // change the following lines to have "eventually"
  expect(page.getParagraphText()).to.eventually.contain('Car search POC');

  // if you don't want to use "eventually"
  page.getParagraphText().then(paragraph => {
    expect(paragraph).to.contain('Car search POC');
  });

root.e2e-spec.ts:

root.e2e-spec.ts:

let expect = global["chai"].expect;

describe('Home page', () => {

  // change the following lines to have "eventually"
  expect(page.getParagraphText()).to.eventually.include('Car search POC');
  expect(browser.getCurrentUrl()).to.eventually.include(homePage.uri());

home.e2e-spec.ts:

home.e2e-spec.ts:

import {RootPage} from './root.po';
import {HomePage} from '../home/home.po';
import {WaitCondition} from '../wait.conditions';
let expect = global["chai"].expect;

  // change the following lines to have "eventually"
  expect(page.getParagraphText()).to.eventually.equal('Car search POC');

  // This line will not work. getInnerHtml has been deprecated by both
  // Protractor and selenium-webdriver.
  //
  // If you want to use something similar, do something like:
  // let i = browser.executeScript("return arguments[0].innerHTML;", element(locator));
  // This is noted in the CHANGELOG under the Protractor 5.0.0 release
  expect(page.getListingContent()).to.exist;

search.e2e-spec.ts

search.e2e-spec.ts

import {SearchPage} from './search.po';
let expect = global["chai"].expect;

  // change the following lines to have "eventually"
  expect(page.getParagraphText()).to.eventually.contain('Car search POC');

控制台输出

这是运行测试的结果.请注意，将有内容"失败，因为getInnerHtml()无效.

angular-cli-seed App
  ✓ will do normal tests
  ✓ will display its title

Home page
  ✓ will display its title
  - will have content

root page
  ✓ will display its title
  ✓ will redirect the URL to the home page

search page
  ✓ will display its title


6 passing (5s)
1 pending

这是一个有趣的StackOverflow问题.因为您包括了行不通的分支，所以回答起来很容易.测试愉快！

This was a fun StackOverflow question to go through. It was easy to answer since you included a branch of what was not working. Happy testing!

这篇关于Protractor + Mocha在浏览器加载SUT之前失败并出现TypeError套件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！