在 Electron 中使用量角器

Question

我正在尝试为应用程序设置单元测试和端到端测试运行 Electron using Protractor. I've been refering to many different posts (this one 确实有帮助），但我仍然收到我不明白的错误：

Message:
  Error while waiting for Protractor to sync with the page: "angular could not be found on the window"
Stacktrace:
  undefined

我的 conf.js 文件如下所示：

exports.config = {
    directConnect : true,
    seleniumAddress: 'http://localhost:4444/wd/hub',
    baseUrl:"file://home/me/workspace/testing-project/main.js",
    capabilities: {
        browserName: "chrome",
        chromeOptions: {
            binary: "/home/me/.linuxbrew/lib/node_modules/electron-prebuilt/dist/electron",
            args: ["--test-type=webdriver"]
        }
    },
    specs: ['todo-specs.js'],
    onPrepare: function(){
        browser.resetUrl = "file://";
        browser.driver.get("file://");
    }
};

考虑到 Protractor website 上提供的文档，我的印象是我不需要安装任何其他东西（例如 Jasmine）。
令我惊讶的是，即使 main.js 的路径（根据 Electron 的规范启动应用程序）是正确的，我在 Electron window 弹出。
你们中有人遇到过这个问题吗？你设法解决了吗？

Answer 1

Protractor 设计用于 angular 个应用，但您也可以将其用于 "non-angular" 个应用。

如果您将 angular 与您的 Electron 应用程序一起使用，那么它只会查看 ng-app 并同步。

如果您没有使用 angular 应用程序，您应该设置 isAngularSite(false)，然后它不会尝试同步。

Answer 2

显然，使用电子二进制文件不足以实际启动您的应用程序。但是，通过构建应用程序的二进制文件并将其链接到 conf.js 文件中可以工作。
我已经能够将我的文件缩减为：
conf.js

exports.config = {
    seleniumAddress: 'http://localhost:4444/wd/hub',
    specs: ['test-spec.js'],
    capabilities: {
        browserName: "chrome",
        chromeOptions: {
            binary: "./dist/myAwesomeApp/myAwesomeAppBinary"
        }
    },
    onPrepare: function () {
        browser.resetUrl = "file://";
    }
};

通过这种方式，无需描述 baseUrl 或使用 browser.get() 或 browser.driver.get() 在 Electron 中启动应用程序。
但是，我宁愿不必构建应用程序二进制文件，但我认为目前还不可能。

Answer 3

Protractor 不能很好地与 Electron 配合使用，因为它无法访问 Electron 特定的 APIs 并且无法正确控制渲染器。另一方面，Spectron 是专门为 Electron 设计的，并且具有与 Protractor 非常相似的 API。它使您可以同时测试主进程和渲染进程。

我不得不从 Protractor 复制一些代码，让它等待 Angular 2 正确加载。（如果您没有使用 Angular，请忽略。）这是一个工作示例：

const path = require('path');
const electron = require('electron-prebuilt');
var Application = require('spectron').Application
var assert = require('assert')

let appPath = path.join(__dirname, '..', 'dist');

function awaitAngular2(client) {
  client.timeoutsAsyncScript(5000);
  // From: https://github.com/angular/protractor/blob/master/lib/clientsidescripts.js
  // Returns a promise that resolves when all of Angular 2's components are loaded and stable
  return client.executeAsync(function(done) {
    try {
      var testabilities = window.getAllAngularTestabilities();
      var count = testabilities.length;
      var decrement = function() {
        count--;
        if (count === 0) {
          done();
        }
      };
      testabilities.forEach(function(testability) {
        testability.whenStable(decrement);
      });
    } catch (err) {
      done(err.message);
    }
  });
}

describe('application launch', function () {
  this.timeout(10000)

  beforeEach(function () {
    this.app = new Application({
      path: electron,
      args: [appPath]
    });
    return this.app.start().then(() => {
      return awaitAngular2(this.app.client);
    })
  });

  afterEach(function () {
    if (this.app && this.app.isRunning()) {
      return this.app.stop()
    }
  });

  it('shows an initial window', function () {
    return this.app.client.getWindowCount().then(function (count) {
      assert.equal(count, 1)
    })
  });

  it('shows a headline', function () {
    this.app.client.getText('app-banner h1').then(function (bannerText) {
      assert.equal(bannerText, 'Tour of Heroes');
    })
  });
});

如果您有多个要自动运行的 .spec 文件，那么您可以将其与 Jasmine 或 Mocha Node.js 测试运行用户集成。

Answer 4

假设您从 main.js 所在项目的根目录启动量角器，您应该能够像这样设置 protractor.conf.js：

exports.config = {
    directConnect: true,
    capabilities: {
        browserName: 'chrome',
        chromeOptions: {
            binary: 'node_modules/.bin/electron',
            args: ['app=main.js']
        }
    },
    onPrepare: function () {
        browser.resetUrl = "file://"
    }
}

capabilities.chromeOptions.args 的选项是传递给 electron 的选项。有关 capabilities、selenium has documentation on it here.

的更多文档

在 Electron 中使用量角器

Using Protractor in Electron

testing

angularjs

protractor

electron