使用 webdriverio 从 React 包装的跨度中获取文本

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)

所以，基本上..我怎样才能以这样一种方式获取文本值，即反应生成的跨度有一个 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 为目标，它也会在输出文本时忽略子 <span> 标签。

使用 webdriverio 从 React 包装的跨度中获取文本

Getting text from React wrapped span using webdriverio

javascript

reactjs

mocha.js

webdriver-io