Seleniumでtextareaに絵文字入りのテキストをReturnキーで送信できません。

Question

前提・実現したいこと

とあるチャットサイトで、Seleniumでtextareaに絵文字入りのテキストを入力＆Returnキーで
送信したいのですが、Returnキーが反応せず、送信できなくなりました。
テキスト入力まではできます。
対処方法を助言いただけないでしょうか。

このサイトでは、送信ボタンなどもなく、Returnキーのみのチャット送信になっています。
以前はReturnキーでテキストを送信できていましたが、期間を置いて試したところ、
送信できなくなりました。

SeleniumもしくはJavascriptでReturnキーを有効化&送信できるような方法がないか、
もしくは、そのほか対処方法があれば、助言いただけないでしょうか。

ソースコードは以下になります。

発生している問題・エラーメッセージ

下記コードをChromeで実行してますが、Pythonのログも、
Chromeデベロッパーツールのconsoleも、エラーは発生していません。

該当のソースコード

textarea_element = u"//textarea[contains(@class,\"hoge\")]"

text = u'''????test'''

JS_ADD_TEXT_TO_INPUT = """
console.log( "start" );
try {
	var elm = arguments[0], txt = arguments[1];
	elm.value += txt;
	
	elm.dispatchEvent(new Event('change'));
} catch(e) {
	console.log( e.message );
}
"""


elem = driver.find_element(by=By.XPATH, value=textarea_element)

driver.execute_script(JS_ADD_TEXT_TO_INPUT, elem, text)
# driver.find_element_by_xpath(textarea_element).send_keys(text)

driver.find_element(by=By.XPATH, value=textarea_element).send_keys(Keys.RETURN);

試したこと

・textは、「u'''test'''」に変えても送信できません。

・コメントアウトしているsend_keysで実行する場合、「u'''test'''」は送信できますが、
絵文字を交えた「u'''????test'''」で送信するとエラーが発生する
（unknown error: ChromeDriver only supports characters in the BMP）ため、
send_keysは使わず、execute_scriptを使っています。

・Seleniumでtextareaに自動入力後、手動でReturnキーを叩いても、
Returnキーが作動しません。
ただし、自動入力後のテキストに、手入力で先頭に任意の1文字入力した場合は、
正常にReturnキーが作動します。
※この挙動がよく分かっていないのですが、サイト側で、textareaのSeleniumの入力を検知して、
Returnキーの作動を止めているのでしょうか。。。

補足情報（FW/ツールのバージョンなど）

Google Chrome Canary:84.0.4134.0
ChromeDriver:83.0.4103.14
selenium（pipでインストール）：3.141.0
Python：3.7.6

Comments

[m.ts10806]

Retuenキー
とは何でしょうか

[masa0411]

キーボードのEnterキーです。

[m.ts10806]

"Return"では。

[masa0411]

修正しました。ご指摘ありがとうございます。

[otn]

ENTERでは？

[masa0411]

コメントありがとうございます。
下記ENTERでも試しましたが、反応はしません。

driver.find_element_by_xpath(textarea_element).send_keys(Keys.ENTER);
driver.find_element(by=By.XPATH, value=textarea_element).send_keys(Keys.ENTER);

Answer 1

最終的に、以下で解決することができました。
execute_scriptで絵文字入りテキストを入力後、
RETURNの前にsend_keysで任意の文字列を送ることで、解決しました。
send_keysで手入力で入力したように後処理することで、問題を回避しました。
コメントいただいた皆様ありがとうございました！

textarea_element = u"//textarea[contains(@class,\"hoge\")]"

text = u'''????test'''

JS_ADD_TEXT_TO_INPUT = """
console.log( "start" );
try {
    var elm = arguments[0], txt = arguments[1];
    elm.value += txt;

    elm.dispatchEvent(new Event('change'));
} catch(e) {
    console.log( e.message );
}
"""


elem = driver.find_element(by=By.XPATH, value=textarea_element)

driver.execute_script(JS_ADD_TEXT_TO_INPUT, elem, text)

driver.find_element_by_xpath(textarea_element).send_keys(" ")
driver.find_element(by=By.XPATH, value=textarea_element).send_keys(Keys.RETURN);

Answer 2

・Seleniumでtextareaに自動入力後、手動でReturnキーを叩いても、

Returnキーが作動しません。

ただし、自動入力後のテキストに、手入力で先頭に任意の1文字入力した場合は、

正常にReturnキーが作動します。

とあるので、JavaScriptでtextareaに文字入力をした後、必要なイベントが発火していないのでは？
elm.dispatchEvent(new Event('change')); でChangeイベントは発火させているようですが、DevToolsで他に登録されているイベントリスナーが無いかどうか確認してみてください。
(確認の仕方は、 https://developers.google.com/web/tools/chrome-devtools/console/events?hl=ja のEvent Listeners Inspector などを参照してください)

Comments

[masa0411]

大変助かります、助言ありがとうございます。
今検証しているChromeのUIが、お知らせいただいた記事と異なりましたので、下記の記事が参考になりました。
https://teratail.com/questions/258591#

```
Event Listeners では Ancestors と Framework listeners のオプションがあります。Ancestors は、現在選択されているノードのイベントリスナーに加えて、そのノードの祖先のイベントリスナーも表示するオプションです。Ancestors のチェックがオフになっている場合、現在選択されているノードのイベントリスナーのみが表示されます。
```

対象のtextareaを選択し、Ancestorsをオフにすると、以下のイベントリスナーのみ存在することが分かりました。

```
Invalid
◻︎◻︎▼textarea.hoge
◻︎◻︎◻︎◻︎▼handler: f(e,t,n)
◻︎◻︎◻︎◻︎◻︎◻︎▶︎[[Scopes]]: Scopes[2]
◻︎◻︎◻︎◻︎◻︎◻︎◻︎[[FunctionLocation]]: <unknown>
◻︎◻︎◻︎◻︎◻︎◻︎▶︎__proto__: f ()
◻︎◻︎◻︎◻︎◻︎◻︎▶︎prototype: {constructor: f}
◻︎◻︎◻︎◻︎◻︎◻︎◻︎name:
◻︎◻︎◻︎◻︎◻︎◻︎◻︎Length: 3
◻︎◻︎◻︎◻︎◻︎◻︎◻︎caller: (...)
◻︎◻︎◻︎◻︎◻︎◻︎◻︎arguments: (...)
◻︎◻︎◻︎◻︎◻︎◻︎once: false
◻︎◻︎◻︎◻︎◻︎◻︎passive: false
◻︎◻︎◻︎◻︎◻︎◻︎useCapture: false

```

そのため、elm.dispatchEvent「change」を「invalid」に変えて再度実行しましたが、状況変わらずでした。
concoleエラーログも吐かれてません。

```
JS_ADD_TEXT_TO_INPUT = """
console.log( "start" );
try {
var elm = arguments[0], txt = arguments[1];
elm.value += txt;

elm.dispatchEvent(new Event('invalid'));
} catch(e) {
console.log( e.message );
}
"""
```

f(e,t,n)となっているので、引数をセットしないといけないのかもしれませんが、ひとまず状況報告させていただきます。
ありがとうございます。

Answer 3

最終的に、以下で解決することができました。
execute_scriptで絵文字入りテキストを入力後、
RETURNの前にsend_keysで任意の文字列を送ることで、解決しました。
send_keysで手入力したように後処理することで、問題を回避しました。
コメントいただいた皆様、ありがとうございました！

textarea_element = u"//textarea[contains(@class,\"hoge\")]"

text = u'''????test'''

JS_ADD_TEXT_TO_INPUT = """
console.log( "start" );
try {
    var elm = arguments[0], txt = arguments[1];
    elm.value += txt;

    elm.dispatchEvent(new Event('change'));
} catch(e) {
    console.log( e.message );
}
"""

elem = driver.find_element(by=By.XPATH, value=textarea_element)
driver.execute_script(JS_ADD_TEXT_TO_INPUT, elem, text)
driver.find_element_by_xpath(textarea_element).send_keys(" ")
driver.find_element(by=By.XPATH, value=textarea_element).send_keys(Keys.RETURN);