Cypress测试中如何在textarea输入带换行的JSON内容？

我在Cypress测试中遇到一个问题，需要在textarea中输入如下带换行的JSON内容：

{
"collapsible": true
}

我尝试了多种写法，比如：

'{{} ' + '\n' + '"collapsible": true' + '\n' + ' {}}'
'{{} {enter} "collapsible": true {enter} {}}'
'{{}' + {enter} + ' "collapsible": true' + {enter} + '{}}'
...

但都没有成功，最终总是得到单行的结果：

{ "collapsible": true }

更新：结果截图显示输入后的内容仍为单行，未保留预期的换行格式。

解决方案 #

方法1：用type命令结合{enter}转义符 #

确保正确使用Cypress的特殊转义符，可拆分输入步骤或用模板字符串：

// 拆分输入步骤
cy.get('textarea')
  .type('{{}')  // 转义输入左大括号
  .type('{enter}')  // 模拟回车换行
  .type('"collapsible": true')
  .type('{enter}')
  .type('}');

// 或用模板字符串一次性输入（注意转义大括号）
cy.get('textarea').type(`{{}
"collapsible": true
}`);

方法2：直接设置textarea的value属性（更可靠） #

如果组件有自动格式化逻辑，type命令可能失效，直接操作DOM设置值并触发输入事件：

const targetJson = `{
"collapsible": true
}`;
cy.get('textarea')
  .invoke('val', targetJson)
  .trigger('input');  // 触发输入事件以更新页面状态

失败原因说明 #

• 之前的写法错误地将{enter}当作变量拼接，它是Cypresstype命令的专用转义符，需直接写入输入字符串
• 部分textarea组件自带自动格式化、防抖处理，会将输入的换行自动合并，此时直接设置value属性更有效

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