Javascript 在量角器中获取元素属性值

get element attribute value in Protractor

提问by exbuddha

I'm writing a Protractor test that has to wait for an element attribute to have a non-empty value and then I want to return that value to the caller function. This has proven to be more difficult to write than I expected!

我正在编写一个量角器测试，它必须等待元素属性具有非空值，然后我想将该值返回给调用者函数。事实证明，这比我预期的更难写！

I am able to correctly schedule a browser.wait()command to wait for the element attribute to have a non-empty value and I have verified that this value is in fact what I am expecting to get inside the callback function, but for some reason, I am not able to return that value outside of the callback function and onto the rest of the test code.

我能够正确安排browser.wait()命令以等待元素属性具有非空值，并且我已经验证该值实际上是我期望在回调函数中获得的值，但由于某种原因，我不是能够在回调函数之外返回该值并返回到测试代码的其余部分。

Here is how my code looks like:

这是我的代码的样子：

function test() {
    var item = getItem();
    console.log(item);
}

function getItem() {
    var item;
    browser.wait(function() {
        return element(by.id('element-id')).getAttribute('attribute-name').then(function(value) {
            item = value;
            // console.log(item);
            return value !== '';
        });
    });
    return item;
}

I can tell that the order of execution is not as I expect it to be, because when I uncomment the console.log()call inside the callback function, I see the expected value printed out. However, the same call in the test()function prints 'undefined'.

我可以看出执行顺序并不像我期望的那样，因为当我取消console.log()对回调函数中的调用进行注释时，我看到打印出预期值。但是，test()函数中的相同调用会打印“未定义”。

What is going on here? What am I missing? How can I get the attribute value out of the callback function properly?

这里发生了什么？我错过了什么？如何正确地从回调函数中获取属性值？

I appreciate your help.

我感谢您的帮助。

回答by alecxe

I would not combine the wait and the getting attribute parts - logically these are two separate things, keep them separate:

我不会将等待和获取属性部分结合起来 - 从逻辑上讲，这是两个独立的东西，将它们分开：

browser.wait(function() {
    return element(by.id('element-id')).getAttribute("attribute").then(function(value) {
        item = value;
        // console.log(item);
        return value !== '';
    });
});

element(by.id('element-id')).getAttribute("attribute").then(function (value) {
    console.log(value);
});

Note that, you may simplify the wait condition this way:

请注意，您可以通过以下方式简化等待条件：

var EC = protractor.ExpectedConditions;
var elm = $('#element-id[attribute="expected value"]');

browser.wait(EC.presenceOf(elm), 5000);
elm.getAttribute("attribute").then(function (value) {
    console.log(value);
});

---

---

Just FYI, you may have solved your current problem with the deferred:

仅供参考，您可能已经解决了您当前的问题deferred：

function test() {
    getItem().then(function (value) {
        console.log(value);
    });
}

function getItem() {
    var item = protractor.promise.defer();
    browser.wait(function() {
        return element(by.id('element-id')).getAttribute('attribute').then(function(value) {
            var result = value !== '';
            if (result) {
                item.fulfill(value);
            }
            return result;
        });
    });
    return item.promise;
}

回答by exbuddha

After doing some more reading about how protractor works with promises and schedules/registers them with the control flow, I found an easier work-around close to the first solution @alecxe provided. Here it goes:

在阅读了更多关于量角器如何使用承诺和调度/将它们注册到控制流的阅读之后，我发现了一个更简单的解决方法，接近 @alecxe 提供的第一个解决方案。它是这样的：

function test() {
  var item = getItem().then(function(item) {
    console.log(item);
  });
}

function getItem() {
  return browser.wait(function() {
    return element(by.id('element-id')).getAttribute('attribute-name').then(function(value) {
      return value;
    });
  });
}

Since browser.wait()returns a promise itself, it can be chained with another then()inside the caller and this way the right order of execution is guaranteed.

由于browser.wait()返回一个承诺本身，它可以与then()调用者内部的另一个链接在一起，这样可以保证正确的执行顺序。