Updating field in React Applications

Cookbook
1

In some React applications fillField does not clear the field and value gets appended.
This is how you can overcome this issue and update fields in React.

Add to steps_file.js:

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

With append field we select the field, by pressing Shift-Home we select the whole text (can be different on Mac), and then we replace that with the new input.

1 Like
2

Why do you use
pressKey(value)
instead of
fillField(fieldName, value)
?

3

Because the field is already focused and I don’t need to specify a field name to reactivate it.

4

But according to this or that pressKey accepts only special values like ‘Enter’ or ‘Control’ not just any ‘value’.

6

pressKey() in WebDriver doesn’t allow typing words. You have to send char by char, e.g.:

for (const char of text) {
   I.pressKey(char);
}

CC: @ggguser

7

Good point by @mirao

We added type method for that
https://codecept.io/helpers/WebDriver/#type

1 Like
8

Yes, type() is very useful, @davert . It’s faster than my pre-2.5.0 solution, and so far reliable in my scenarios.