I.clearField and I.fillField not working as expected.

What are you trying to achieve?

Replace text in field using I.fillField or clearing text with I.clearField.

What do you get instead?

If the field has the following text already in it: “hello” and I try to replace with “world” I get “helloworld”. If I try to use I.clearField the text in the field does not change.

Provide console output if related. Use --verbose mode for more details.

No errors thrown.

Provide test source code if related

I.clearField(selectors.name);
I.fillField(selectors.name, name);

Details

• CodeceptJS version: 6.2
• NodeJS Version: v7.8.0
• Operating System: MacOS Sierra v10.12.4
• Nightmare version: 2.10.0
• Nightmare Upload version: 0.1.1
• Configuration file:

{
  "output": "./output",
  "helpers": {
    "nightmare": {
      "url": "http://localhost:1079",
      "restart": true,
      "show": true,
      "typeInterval": 5,
      "windowSize": "1440x1024"
    }
  },
  "include": {
    "I": "./e2e-tests/steps/steps.js"
  },
  "mocha": {
    "reporterOptions": {
        "reportDir": "output"
    }
  },
  "bootstrap": false,
  "teardown": null,
  "hooks": [],
  "tests": "./e2e-tests/tests/**/*_test.js",
  "timeout": 10000,
  "name": "testing"
}

[ggguser]

Same issue, is there any update on this?

You can use this custom step, works perfectly:

Add to steps_file.js:

    updateField(fieldName, value) {
      this.appendField(fieldName, '');
      this.pressKey(['Shift', 'Home']);
      this.pressKey('Backspace');
    }

[kennasoft]

@jmitchell89 is correct, that this affects react projects, as I’ve also observed. I created a custom helper, which solves the problem. Add this to your custom_steps.js (or whatever you named it) file:

'use strict';
module.exports = function() {
  return actor({ 
    ... // other custom helpers
    clearReactField: async function(locator) {
      this.doubleClick(locator);      // set focus on element found by locator and highlight content
      this.pressKey('Backspace');  // delete content of element
    }
  });
}

Then you can do for example:

const assert = require('assert');
Feature('"Edit Field"');

Scenario('locate and edit text field', async (I) => {
    // do other things
    const oldText = await I.grabTextFrom('#form1 input[type="text"]');
    I.clearReactField('#form1 input[type="text"]');
    I.fillField('#form1 input[type="text"]', `${oldText} has been Edited!`);
    I.wait(1);
    const newText = await I.grabTextFrom('#form1 input[type="text"]');
    assert.ok(newText === `${oldText} has been Edited!`, 'Old Text was cleared and replaced successfully');
    // do more things
});