断言元素被聚焦

Question

根据How do I assert an element is focused? 线程，您可以通过切换到activeElement() 来检查元素是否获得焦点，并断言这是您期望获得焦点的同一元素：

expect(page.element.getAttribute('id')).toEqual(browser.driver.switchTo().activeElement().getAttribute('id'));

在我的例子中，当前聚焦的元素没有id 属性。

我应该怎么做而不是检查id？

奖励问题：此外，正如您从我尝试解决它的尝试中看到的那样，看起来我不能期望/断言一个元素（或 Web 元素）作为一个完整的对象。为什么？

---

我试过了：

expect(page.element).toEqual(browser.driver.switchTo().activeElement());

但是由于我什至无法理解的错误而失败 - 有一个巨大的回溯（在控制台中滚动大约需要 10 分钟），但内部没有用户友好的错误。

我也尝试过使用getWebElement()：

expect(page.element.getWebElement()).toEqual(browser.driver.switchTo().activeElement());

但这导致了以下错误：

错误：期望使用 WebElement 参数调用，期望一个 Promise。做过 你的意思是使用 .getText()？

使用最新的量角器开发版本。

Answer 1

在我的回答中，我将假设 activeElem 和 pageElem 都是量角器元素查找器，并且指向同一个网络元素。

首先回答你关于为什么的问题

expect(activeElem).toEqual(pageElem);

进入无限循环，这是因为量角器在断言之前修补了茉莉花的expect以解决promise，因此expect(activeElem.getText()).toEqual('text');之类的东西无需做就可以工作

activeElem.getText().then(function(text) {
  expect(text).toEqual('text');
})

你可以说，为什么不只解决一次承诺呢？但是还有嵌套的 Promise。

所以现在您可能会认为这是一个问题，但实际上并不是因为您永远不会在实际用例中比较两个 elementFinder。 Jasmine 的 toEqual 进行参考检查，而不是深度比较，所以expect(activeElem).toEqual(pageElem) 与简单的参考比较相同：(activeElem === pageElem).toToTruthy()，这样做真的没有意义。 （注意element(by.css('html')) === element(by.css('html')) 是错误的，因为它不是同一个引用。）

所以，回答这个线程的真正问题：如何查看两个 elementFinder 是否具有相同的底层 webelements：

expect(activeElem.getId()).toEqual(pageElem.getId());

Answer 2

奇怪的是，它只期待一个承诺并且无法处理 webdriver 元素......我和你有同样巨大的堆栈跟踪。

不管怎样，你会接受这种解决方案吗：发送一个“愚蠢的”承诺并附上一个很好的评论来证明你为什么必须这样做。这更像是一种解决方法，而不是我承认的语义解决方案。

expect(page.element.getInnerHtml())
  .toEqual(browser.driver.switchTo().activeElement().getInnerHtml());

它对我有用；）

编辑：奖励答案

您不能使用 WebElement 调用 expect 的原因来自 Webdriver Control Flow Principle（我相信您已经知道）和 this line in jasminewd，这是 Protractor 开发和使用的 jasmine 到 Webdriver 的适配器；）

Answer 3

对于未来的读者，我创建了一个 custom matcher 来断言元素是否处于活动/聚焦状态：

beforeEach(function() {
    jasmine.addMatchers({
        toBeActive: function() {
            return {
                compare: function(elm) {
                    return {
                        pass: elm.getId().then(function (activeElementID) {
                            return browser.driver.switchTo().activeElement().getId().then(function (currentElementID) {
                                return jasmine.matchersUtil.equals(currentElementID, activeElementID);
                            });
                        })
                    };
                }
            };
        }
    });
});

用法：

expect(element(by.css("#myid")).toBeActive();

Answer 4

如何使用 CSS 选择器和 :focus

expect(element.all(by.css('#myid:focus')).count()).toBe(1);

Answer 5

我使用量角器解决了这个问题： ElementFinder.prototype.equals

const activeElement = await browser.driver.switchTo().activeElement();
const potentialyFocusedElement = await component.$('your-locator');
const isFocused = await potentialyFocusedElement.equals(activeElement);

我不确定equals 究竟是如何工作的，它是进行深度比较，还是以某种方式比较实例。但它有效。

请注意，您不能调用 activeElement.equals(...)，因为它不是 ElementFinder，而是 WebElement。

Answer 6

您需要想出一种方法来告诉 Protractor/webdriver 如何在页面上找到您的元素。 Protractor 使用 JavaScript 来查找元素，因此可以使用任何可用于检查 DOM 的工具。 Protractor 和 webdriver 将这些 API 包装在各种 by 风格中：

http://angular.github.io/protractor/#/api?view=ProtractorBy

除了基本风格之外，Protractor 还添加了 Angular 感知风格（因此您可以通过 Angular 绑定等进行搜索）。

如果您的元素没有任何显着特征，那么可能值得添加一些内容以使其更易于测试。或者，（尽管这经常因为它太脆弱而不受欢迎），您可以使用 xpath。见https://github.com/angular/protractor/blob/master/docs/locators.md

Answer 7

您可以简单地检查元素的文本（或其他任何内容）：

var currentElement = browser.switchTo().activeElement();
expect(currentElement.getText()).toEqual(page.element.getText());