角度 e2e 测试：如何检查元素是否获得焦点？

Question

我有一个 angular.js 应用程序，它应该在做某事时将焦点设置为特定元素（即，将焦点设置为无效的表单字段以让用户更正错误）。

我正在尝试在 angular-e2e 测试中测试这种行为：

it('should set the focus to the invalid field', function() {
  input('email').enter('foo'); // this is not a valid email address
  element(/* submit button */).click(); // try to submit the form

  // How do I do this?
  expect(element(/* email input element */)).toHaveTheFocus();
});

我怎么能期望某个元素（不）有焦点？我已经尝试过 ':focus' 选择器

expect(element('input[id="..."]:focus').count()).toBe(1);

但没有成功（受测试某些元素是否可见的启发）。

为了设置焦点，我使用了如何在输入字段上设置焦点的想法？

我也在为此编写单元测试，最终使用了 DOM focus() 函数的间谍（据我所知，e2e 测试不可能/不希望这样做）。

Answer 1

我在这里看到两个选择。第一个，我真正推荐的，特别是在 E2E 测试中，是使用Jasmine-jQuery，它提供了toBeFocused处理这个问题的匹配器。

如果您不想包含 Jasmine-jQuery，因为它太大或者您不喜欢它，那么您有两个选择：

• 将按钮与文档的活动元素进行比较，可以通过以下方式访问它：document.activeElement
• 通过从元素本身获取按钮与文档的活动元素进行比较（这是 jasmine-jquery 的方式）：DOMELEMENT.ownerDocument.activeElement