CodeceptJS: 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"
}

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 4
Comments: 16 (1 by maintainers)

Most upvoted comments

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');
    }

+10

ggguser on Jul 23, 2019

@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
});

+10

kennasoft on Dec 19, 2018

I am having the exact same issue on webdriver.io

kalam07 on May 29, 2019

Sorry about not responding back, I managed to figure out the issue, and I thought others should know about it too. It only appears in apps using react and is an issue with nightmare. A work around is to create a helper that has a clearField function that calls: this.helpers.nightmare.browser.type(locator, '\u0008\u0008......'); \u0008 is the backspace key. I also tried to force onChange to get called after the input’s value is cleared. However I couldn’t get that solution to work sadly.

It’s an ugly workaround but it does solve the issue.

jmitchell89 on Jan 4, 2018