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

[jmitchell89]

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

[citizenchris099]

I am having the exact same issue as described. Same set up and everything.

[APshenkin]

@jmitchell89 @citizenchris099
Can you please provide site, where we can reproduce this issue? I tried to reproduce it on Github login page, but it works as expected

Here is my code:

Scenario.only('Check login page', function* (I) {
    I.amOnPage("https://github.com/login");
    I.fillField("#login_field", "hello");
    pause() <- I see hello
    I.clearField("#login_field")
    pause() <- I see empty field
    I.fillField("#login_field", "blabla")
    pause() <- I see blabla
    I.fillField("#login_field", "world");
    pause(); <- I see world
});

[APshenkin]

Close due inactivity

[jmitchell89]

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.

[jonijimenez]

Also happens with webdriverIO and puppeteer

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

[sskumar87]

@kennasoft

When I try ti fill a input field using codecept "fillField", it fills the input with randomly trimmed characters. It is a react project.
Any Suggestions

[kennasoft]

@kennasoft

When I try ti fill a input field using codecept "fillField", it fills the input with randomly trimmed characters. It is a react project.
Any Suggestions

HI @sskumar87,

I've never experienced this myself. Is there something about the component's state update that might be generating "trimmed characters"? I suspect this might not be an issue with codeceptjs itself.

I suggest you check the component or ask the developer that created it to check what might be going on internally.

Good luck

[kalam07]

I am having the exact same issue on webdriver.io

[MerlinDeb]

Same issue, is there any update on this?

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

[tlnd-frguo]

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

It works on webdriver.io, thanks very much

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

[Orodan]

+1 on a React project using codecept with puppeteer.

The workaround works fine but it would be better to have the clearField and fillField methods working correctly instead :)

[PeterNgTr]

@Orodan the fillField issue happens when an input field is controlled by frontend framework like React, so we can use this method to overcome the issue. https://codecept.io/helpers/WebDriver/#type

[Orodan]

@PeterNgTr thank you for your suggestion :) Do you know how I can take the focus on an input before typing into it ?

And I think my first comment is still valid ; at the very least, your explanation - a value being controlled by a frontend framework is not replaced by the fillField but only appended - should be directly on the documentation.