Question

我有以下标记，我需要能够为这些项更改textContent的值：

<div class=".react-grid-HeaderCell-sortable">Jamie</div>
<div class=".react-grid-HeaderCell-sortable">Hutber</div>
<div class=".react-grid-HeaderCell-sortable">Stackoverflow</div>

我知道如何更改输入字段的值，但目前不知道如何处理文本，可能使用自定义命令？

输入

  .setValue('.someSelector', 'anewString')

Answer 1

 Array.from(document.getElementsByClassName('react-grid-HeaderCell-sortable'))
     .forEach(x => x.innerHTML = 'new text')

说明： document.getElementsByClassName返回HTMLCollection，需要将其转换为Array.from的数组才能进行迭代。

要修改div的文字，您需要设置innerHTML属性。请注意innerHTML可以替换为textContent，有关差异的更多信息，请参阅W3C文档。

Answer 2

如前所述，唯一的方法是使用.execute()并从页面上下文中修改DOM。

但是，根据您的特定用例，您可能希望使用更复杂的选择器，因此我建议使用querySelector()。

此外，您还可以为此操作创建快捷方式，如下所示：

module.exports = {
  'Test': function(client) {
    client
      .url('http://some.url')
      .execute(setElementValue, ['table.selector > .child-selector', 'new value'])
      .end();
  }
};

function setElementValue(selector, value) {
  document.querySelector(selector).textContent = value;
}

您也可以为此创建一个自定义命令，这样您就可以在其他测试中重复使用它并使您的代码看起来很好：

// ./lib/custom-commands/setElementValue.js

exports.command = function(selector, value) {
  this.execute(function(selector, value) {
    document.querySelector(selector).textContent = value;
  }, [selector, value]);

  return this;
};

// Test case

client
  .url('http://some.url')
  .setElementValue('table.selector > .child-selector', 'new value')
  .end();

通过设置配置文件的custom_commands_path属性，不要忘记将Nightwatch指向保存自定义命令的目录。

守夜改变textContent或innerHTML的值

2 个答案: