how to instantly set/send_keys a textarea in capybara how to instantly set/send_keys a textarea in capybara selenium selenium

how to instantly set/send_keys a textarea in capybara


The only way to instantly do it would be using execute_script to set the value via JS

element = find('textarea') # however you locate the elementexecute_script('arguments[0].value = arguments[1]', element, text_to_set)

Note: this won't trigger all the events a user would generate when inputting into the textarea


TL;DR: Use Javascript/JQuery (.val() function) to set the field's value via the .execute_script()/.evaluate_script() function. It will automatically send the full string. You have more details bellow.

Example:

def execute_script(script)  browser.execute(function() {     $('<yourSelectorHere>').val("blablabla");   })  nilend

Selenium team decided a LOOOONG way back to make it work this way, because it will actually simulate the real way a user would fill that input/textarea/field/etc.

Note: I wrote the command in WebdriverIO, but now have updated to Capybara as well.


Indeed, using the .setValue()/.set(), or the .keys()/.send_keys() methods will issue a POST action on the target element (presumably an <input>) in the form of an array of characters. See example:

Command: browser.setValue('input[connectqa-input="rename-device"]','stackoverflowstackoverflowstack');

Output:

> browser.setValue('input[connectqa-input="rename-device"]','stackoverflowstackoverflowstack'){ state: 'pending' }> [21:52:25]  COMMAND   POST     "/wd/hub/session/3d830ffd-21c6-4e5f-a6b3-4f8a03821991/elements"[21:52:25]  DATA                {"using":"css selector","value":"input[connectqa-input=\"rename-device\"]"}[21:52:25]  RESULT              [{"ELEMENT":"6"}][21:52:25]  COMMAND     POST     "/wd/hub/session/3d830ffd-21c6-4e5f-a6b3-4f8a03821991/element/6/clear"[21:52:25]  DATA                {}[21:52:25]  COMMAND     POST     "/wd/hub/session/3d830ffd-21c6-4e5f-a6b3-4f8a03821991/element/6/value"[21:52:25]  DATA                {"value":["s","t","a","c","k","o","v","e","r","f","(21 more items)"],"text":"stackoverflowstackoverflowstack"}

One quick and easy way to escape this is to go ahead and abuse the .val() JQuery function via the .execute()/.executeScript() methods:

Command: browser.execute(function() { $('input[connectqa-input="rename-device"]').val("dwadawdawdawdawdawdwadawawdadawdawdaw"); }) (WebdriverIO)

For Capybara syntax, see this question. It covers both .execute_script() & .evaluate_script(). (I don't want to mooch-off their views). Also you should document on the methods before-hand here.

Output:

> [21:59:38]  COMMAND   POST     "/wd/hub/session/3d830ffd-21c6-4e5f-a6b3-4f8a03821991/execute"[21:59:38]  DATA                {"script":"return (function () { $('input[connectqa-input=\"rename-device\"]').val(\"dwadawdawdawdawdawdwadawawdadawdawdaw\"); }).apply(null, arguments)","args":[]}

Hope it helped!