angularjs - Angular e2e 测试 : How can I check if an element got the focus?

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);

但没有成功(受到 Testing whether certain elements are visible or not 的启发)。

为了设置焦点，我使用 How to set focus on input field? 的想法

我还为此编写了单元测试，最终在 DOM focus() 函数上使用了 spy (据我所知，这对于 e2e 测试来说是不可能/不可取的)。

Answer 1

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

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

• 将按钮与文档的事件元素进行比较，可以通过以下方式访问它:document.activeElement
• 通过从元素本身获取按钮与文档的事件元素(这是 jasmine-jquery 的做法)，将按钮与文档的事件元素进行比较:DOMELMENT.ownerDocument.activeElement