javascript - 使用 webdriverio 从 React 包裹的 span 获取文本

Question

我正在为 React 前端应用程序编写测试。其中一项测试必须检查如何从服务器返回值。也就是说，我有以下跨度:

<span id='result'>
    <!-- our version of react wraps the resulting text by default -->
    <span data-reactid>the actual result</span>
</span>


// test.js   
getResult() {
    let a = browser.getText('#result span');
    console.log('a:', a);
}  // unfortunately, getting it this way will mean having to rewrite the test once we upgrade to a newer version of React (after 15 is does not do the wrapping anymore)

所以，基本上..我怎样才能以这样的方式获取文本值，即react生成的span有一个id或class...或者任何其他方式，改变dom结构并不意味着必须重写测试？

Answer 1

我不确定如何仅使用 webDriver API 来完成此操作，但您可以使用一些 javascript 来获取该值。像这样的事情:

var id = 'result';

client.execute(function(a) {
    return document.getElementById(a).textContent;
}, id).then(function(ret) {
     console.log(ret.value); // outputs: the actual result
});

通过使用 textContent，即使您的选择器以父范围为目标，它也会忽略子范围 <span>输出文本时的标签。