在Nightwatch中如何修改元素的textContent或innerHTML？

嘿，我懂你遇到的痛点——setValue()确实只对输入框这类表单元素生效，要修改普通div的文本内容，咱们完全可以通过Cypress的DOM操作能力实现，甚至封装成自定义命令让测试代码更简洁！

直接在测试中修改文本 #

你可以用Cypress的.invoke()方法调用jQuery的text()函数，直接设置元素的文本内容，这是最简洁的方式：

// 修改第一个目标div的文本
cy.get('.react-grid-HeaderCell-sortable').first().invoke('text', 'New Jamie Text');

// 修改第二个目标div的文本
cy.get('.react-grid-HeaderCell-sortable').eq(1).invoke('text', 'New Hutber Text');

// 修改第三个目标div的文本
cy.get('.react-grid-HeaderCell-sortable').last().invoke('text', 'New Stackoverflow Text');

这里的invoke('text', '新文本')本质是调用了jQuery的.text()方法，它会自动覆盖元素原有的文本内容，兼容性也很好。

如果需要更底层的原生DOM操作，也可以用.then()获取元素后直接修改textContent：

cy.get('.react-grid-HeaderCell-sortable').eq(2).then($el => {
  // 拿到原生DOM元素，修改textContent
  $el[0].textContent = 'Custom Stackoverflow Text';
});

封装成自定义命令 #

如果需要频繁修改文本内容，把逻辑封装成自定义命令会更高效。打开cypress/support/commands.js，添加以下代码：

Cypress.Commands.add('setText', (selector, text) => {
  // 支持选择器直接定位
  cy.get(selector).invoke('text', text);
});

// 可选：支持针对已获取的元素链调用
Cypress.Commands.add('setText', { prevSubject: true }, ($subject, text) => {
  cy.wrap($subject).invoke('text', text);
});

之后在你的测试代码里就可以这样用：

// 直接通过选择器设置文本
cy.setText('.react-grid-HeaderCell-sortable', 'Global Text');

// 针对特定元素设置文本
cy.get('.react-grid-HeaderCell-sortable').eq(0).setText('Specific Jamie Text');

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