定制茉莉花匹配器和承诺

Question

故事：

我们一直在使用自定义茉莉花匹配器来期望元素具有手形/指针光标：

beforeEach(function() {
    jasmine.addMatchers({
        toHaveHandCursor: function() {
            return {
                compare: function(actual) {
                    return {
                        pass: actual.getCssValue("cursor").then(function(cursor) {
                            return cursor === "pointer";
                        })
                    };
                }
            };
        },
    });
});

它工作得很好并且使测试具有可读性：

expect(queuePage.sortByButton).toHaveHandCursor();

问题：

当期望失败时，目前我们会在控制台上看到一大块完全不可读的红色文本，格式如下：

• 预期 ElementFinder({ ptor_: Protractor({ getProcessedConfig: Function, forkNewDriverInstance: Function, restart: Function, controlFlow: Function, Schedule: Function, setFileDetector: Function, getSession: Function, getCapabilities: Function, quit: Function, actions: Function, touchActions ：函数，executeScript：函数，executeAsyncScript：函数，调用：函数，等待：函数，睡眠：函数，getWindowHandle：函数，getAllWindowHandles：函数，getPageSource：函数，关闭：函数，getCurrentUrl：函数，getTitle：函数，findElementInternal_：函数, findElementsInternal_ ...滚动 10 分钟 ... ,单击: Function, sendKeys: Function, getTagName: Function, getCssValue: Function, getAttribute: Function, getText: Function, getSize: Function, getLocation: Function, isEnabled: Function, isSelected : Function、submit: Function、clear: Function、isDisplayed: Function、getOuterHtml: Function、getInnerHtml: Function、getId: Function、getRawId: Function、serialize: Function、takeScreenshot: Function }) 获得手形光标。

问题：

为什么会发生这种情况？我们如何改进匹配器并输出用户友好的错误？就像是：

Expected 'auto' to be equal to 'pointer' cursor value.

---

据我了解，我们需要message为自定义匹配器提供一个值，但我不完全确定如何将实际元素的cursorCSS 值传递到消息中。这是我到目前为止所拥有的：

toHaveHandCursor: function() {
    return {
        compare: function(actual) {
            return actual.getCssValue("cursor").then(function(cursor) {
                return {
                    pass: cursor === "pointer",
                    message: "Expected '" + cursor + "' to be equal to 'pointer' cursor value."
                };
            });
        }
    };
},

我希望这能起作用，但是，由于某种原因，我在测试运行后在控制台上看到了相同的错误消息。

Answer 1

我们在控制台上得到的是自动生成的茉莉花匹配器失败消息，其中包含实例字符串表示形式- 出于某种原因，该消息似乎相当巨大。ElementFinder

现在，为了改进失败消息，我们需要将message密钥与 一起使用pass。不过，我们应该考虑到返回一个承诺，并且需要解析它才能在自定义错误消息中使用实际值：getCssValue() cursor

toHaveHandCursor: function() {
    return {
        compare: function(actual) {
            var result = {};

            result.pass = actual.getCssValue("cursor").then(function(cursor) {
                result.message = "Expected '" + cursor + "' to be equal to 'pointer' cursor value.";
                return cursor === "pointer";
            });

            return result;
        }
    };
},

现在，如果期望失败，我们会收到一条很好的错误消息：

- Expected 'auto' to be equal to 'pointer' cursor value.