如何使用WebdriverIO为指定textarea设置文本？

先看你提供的HTML代码：

<form> 
  <p> 
    <label for="import-textarea">Use the "Export board" menu item in a board's menu, then copy the json from the resulting file.</label> 
  </p> 
  <textarea class="js-import-json" placeholder="Paste your valid JSON data here" autofocus=""/> 
  <input class="primary wide" type="submit" value="Import"> 
</form>

你尝试的几种写法存在几个问题：

• $('textarea')太宽泛，如果页面有多个textarea，很可能选到错误的元素；
• selectByAttribute不是WebdriverIO元素的正确操作方法，应该先用选择器定位元素再操作；
• .js-import-json=Paste your valid JSON data here不是有效的CSS选择器，而且textarea的内容不能用getText获取，应该用getValue。

下面是可行的解决方案：

步骤1：精准定位textarea #

优先使用专属类名.js-import-json来定位，这是最可靠的方式：

const importTextarea = browser.$('.js-import-json');

如果担心页面有重复类名，可以结合标签名进一步缩小范围：

const importTextarea = browser.$('textarea.js-import-json');

步骤2：等待元素就绪 #

很多时候元素还没完全加载就操作会失败，所以要先等待元素可见且可交互：

// 等待元素显示出来，超时时间5秒
importTextarea.waitForDisplayed({ timeout: 5000 });
// 等待元素处于可操作状态
importTextarea.waitForEnabled({ timeout: 5000 });

步骤3：正确设置文本值 #

使用WebdriverIO元素的setValue方法即可，建议先清空原有内容避免追加：

// 清空文本框内容
importTextarea.clearValue();
// 设置新的JSON文本
importTextarea.setValue('{"boardName": "My Imported Board", "items": [...]}');

如果setValue不生效（比如遇到特殊的前端框架拦截），可以尝试模拟输入或者直接操作DOM：

// 模拟逐字符输入
importTextarea.addValue('你的JSON内容');

// 或者直接通过JS设置元素的value属性
browser.execute((el, text) => {
  el.value = text;
}, importTextarea, '你的JSON内容');

步骤4：验证文本是否设置成功 #

不要用getText，textarea的内容需要用getValue获取：

const currentText = importTextarea.getValue();
console.log('当前文本框内容:', currentText);

完整可运行示例 #

// 定位目标textarea
const importTextarea = browser.$('.js-import-json');

// 等待元素就绪
importTextarea.waitForDisplayed({ timeout: 5000 });
importTextarea.waitForEnabled({ timeout: 5000 });

// 清空并设置文本
importTextarea.clearValue();
importTextarea.setValue('{"key": "imported-board", "data": "sample-content"}');

// 验证设置结果
const result = importTextarea.getValue();
console.log('设置成功，内容为:', result);

内容的提问来源于stack exchange，提问作者Gobliins