在浏览器加载 SUT 之前，Protractor+Mocha 因 TypeError 导致套件失败

问题描述

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

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 + protractor，以便使用 protractor 执行测试，实际提供 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 破坏分支
• 使用茉莉花的工作大师

在命令行上运行量角器(通过节点)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 对我不起作用.我曾经尝试将 Protractor 依赖项更新到最新版本的 chai 和 chai-as-promised 并运行问题.我不得不降级您的依赖项并最终使用:

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.

在 Protractor 运行测试之前设置 chai-as-promised:

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!

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