0

简单案例：小显示器的汉堡菜单，需要测试一下。

问题是：如何在 ember.js 测试环境中更改 chrome 浏览器的显示大小？

加法：仅用于一项测试

4

2 回答 2

2

直接回答这个问题：在撰写本文时，无法在验收测试期间调整 Chrome 窗口的大小。

允许的 Chrome API 似乎总是在不断变化，但截至今天，我可以从 Chrome 窗口打开一个新的弹出窗口，然后对弹出窗口进行断言。

this.popup = window.open('/index.html?inTestPopup', 'resizable', `resizable=yes`);
this.popup.resizeTo(200, 500);

您可以在我的 Ember 插件 Ember Screen 中看到这种方法的示例。

然而，这是为您的应用程序进行验收测试的一种尴尬且脆弱的方式。我建议您决定一个真正的“端到端”（黑盒）测试是否有价值，足以证明与更便宜的白盒样式单元测试相比的成本是合理的。

对于端到端测试，您应该考虑针对真实设备（手机、平板电脑、计算机）运行测试。使用诸如browserstack之类的服务或在诸如 testem 之类的测试运行器中使用配置选项（如 @jelhan 建议的那样）是一种更经济的方法。当然，这些方法实际上并不能满足在测试期间更改显示尺寸的要求。仍然可能是费用与测试价值的良好权衡。

如果单元测试方法更适合您的应用程序，您可以研究类似ember-screen的库。window它在API 和您的应用程序之间提供了一个层，支持在单元测试中直接存根。然而，这种方法与实现细节或您的应用程序耦合在一起：它要求您在 JavaScript 中处理相关的显示更改，而不是 CSS 媒体查询。

不幸的是，这里没有一种万能的方法。对于 Ember 验收测试，我的第一步是确保测试适用于“桌面”和“移动”尺寸。换句话说，如果汉堡包在那里，请在选择菜单项之前单击它。如果不存在，则直接选择菜单项。然后，您可以使用不同的宽度配置运行验收测试，并确保所有测试都通过。如果单元测试方法看起来更经济，请使用 Ember Screen 的单元测试方法。如果设备测试是关键任务，请评估Percy、BrowserStack或自定义测试平台等服务。

于 2019-07-08T05:26:57.730 回答
-1

鉴于您使用的是最新版本的 ember，ember-test-helpers为与浏览器和 DOM 交互提供了有用的实用程序。您可以在该元素的验收测试中尝试triggerEvent1 。body这是我在新的 ember 应用程序中生成的验收测试示例ember g acceptance-test resize：

import { module, test } from 'qunit';
import { visit, currentURL, triggerEvent } from '@ember/test-helpers';
import { setupApplicationTest } from 'ember-qunit';

module('Acceptance | resize', function(hooks) {
  setupApplicationTest(hooks);

  test('visiting /resize', async function(assert) {
    await visit('/resize');

    assert.equal(currentURL(), '/resize');
    await triggerEvent(window, 'resize');
    assert.equal(currentURL(), '/resize');
  });
});
于 2019-06-25T13:25:35.127 回答