seleniumでinputタグやtextareaではない場所にテキスト入力（代入）したい

Question

前提・実現したいこと

seleniumでinputタグやtextareaではない場所にテキスト入力（代入）するテストシステムを作っています。

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

テキストを代入するsendkeysでは効かないようになっています。表示はできるが、操作はできない
オブジェクトのようです。

 >>AttributeError: 'NoneType' object has no attribute 'send_Keys'

該当のソースコード

xxx = "txt"
#文字を入れる
post = driver.find_element_by_css_selector("#creator_studio_sliding_tray_root > div > div > div._7-iu._3qn7._61-3._2fyi._1a9e > div._7-i- > div > div._8525 > div._7-2a._5yk1.ads-text-suggestions-focusable > div > div > div._5rpb > div > div > div > div")
post.send_Keys(xxx)

試したこと

javascriptを直接実行させようと試しましたが稼働しませんでした。

execute_script('document.getElementsByClassName("div._7-2a._5yk1.ads-text-suggestions-focusable").value="%s";' % xxx)

参考：　https://srbrnote.work/archives/3025

補足追記：できれば絵文字emoji入力もできれば幸いです。その時のseleniumの取得方法も教示いただけると助かります。

devlopツールのスクリーンショットを添付します。

選択中のHTMLが下記になります。

<div class="_7-2a _5yk1 ads-text-suggestions-focusable" role="presentation">
<div class="_5yk2" tabindex="-1"><div class="_5rp7"><div class="_5rpb">
<div aria-autocomplete="list" aria-controls="js_2u" aria-expanded="false" class="notranslate _5rpu" contenteditable="true" role="combobox" spellcheck="false" style="outline: none; user-select: text; white-space: pre-wrap; overflow-wrap: break-word;"><div data-contents="true">
<div class="" data-block="true" data-editor="8e4re" data-offset-key="6im0h-0-0"><div data-offset-key="6im0h-0-0" class="_1mf _1mj"><span data-offset-key="6im0h-0-0"><span data-text="true">あああ????</span></span></div></div></div></div></div></div></div></div>

追記：
HTMLでのnodeで追記したい部分をイメージで囲い追加しました。
この中にselenium実行中にテキストが入ってくれればOKなのですが、、。

Comments

[m.ts10806]

「入力」ではないからでは。

[yayaya22]

どういった意味でございましょうか。

[m.ts10806]

そのままです。
例えば、入力コントロール以外の場所をクリックして何かキー押しても文字入りませんよね（contenteditable属性というのはあるけど）
それは「入力を受け付ける要素ではないから」です。

[yayaya22]

承知しました。

Answer 1

createTextNodeして、appendChildするのでは？

Comments

[yayaya22]

seleniumで新しくtextの要素を作り出して、追加することができるのでしょうか。
具体的な話法としてexecute_scriptで実行の方法で可能でしょうか

[otn]

seleniumにはHTMLを変更するメソッドは無いので、execute_scriptでそういうJavaScriptを実行します。

[yayaya22]

ありがとうございます。具体的にどのようにすればよろしいでしょうか。

[otn]

> createTextNodeして、appendChildするのでは？
と書いたのですが。

JavaScriptをほとんど知らないと言うことなのでしょうか？

[otn]

何らかの手段でノードを特定.appendChild(document.createTextNode("テキスト"));

ですが、ノードの特定が出来ますかね。

[yayaya22]

ありがとうございます。
恥ずかしながら、JavaScript はほぼ無知です。execute_script('document.getElementsByClassName("div._7-2a._5yk1.ads-text-suggestions-focusable"). appendChild(document.createTextNode("テキスト"));で試してみますね。

[otn]

getElementsByClassNameの返り値は、ノードじゃなくてノードの配列なので、添え字を書いて配列からノードを取り出さないと駄目です。

引き数のクラス名の中に div というノード名っぽいのが混じってますが、大丈夫でしょうか？
getElementsByClassNameの引き数は、関数名の通り、クラス名です。

[yayaya22]

上記の方法でできませんでした。まったくお手上げ状態となりました。

[otn]

やはり自力ではノードの特定が出来ないと言うことですね。

どのHTMLのどの部分に追加したいかを質問文に書いてもらえば、アドレバイスできるかも知れません。

[yayaya22]

お手数かけます、イメージを追記しました。

[otn]

<span data-text="true">はHTML内で唯一でしょうか？

[yayaya22]

はい、こちらだけだと思います。
画面上に入力すると、このJavaScript が変化していきます

[otn]

spanを全部取得してdata-text属性で判断します。

execute_script('let x=document.getElementsByTagName("span");for(let i=0; i<x.length; i++) if(x[i].getAttribute("data-text")=="true")x[i].appendChild(document.createTextNode("あああ");')

> 画面上に入力すると、このJavaScript が変化していきます
これは意味がわかりません。

[yayaya22]

下記文で実行したらエラーとなりました。
driver.execute_script('let x=document.getElementsByTagName("span");for(let i=0; i<x.length; i++) if(x[i].getAttribute("data-text")=="true")x[i].appendChild(document.createTextNode("あああ");')

>>raise exception_class(message, screen, stacktrace)
selenium.common.exceptions.JavascriptException: Message: javascript error: missing )
after argument list

＞> 画面上に入力すると、このJavaScript が変化していきます
＞これは意味がわかりません。
画面上に「あああ」と入力するとdevelopツールでこの部分が点灯し、文字追加されていくという意味でした。

下記のサイトで、creatpost>instagramfeed>Yourpostの中に代入をしたいのです。
https://business.facebook.com/creatorstudio/?tab=instagram_content_posts

[otn]

最後に閉じ括弧が足りなかったですね。足して置いて下さい。

> 画面上に「あああ」と入力するとdevelopツールでこの部分が点灯し、文字追加されていくという意味でした。

今回の質問とどういう関係なのか分かりません。

[yayaya22]

閉じかっこを入れたら
driver.execute_script('let x=document.getElementsByTagName("span");for(let i=0; i<x.length; i++) if(x[i].getAttribute("data-text")=="true")x[i].appendChild(document.createTextNode("あああ");'))
　　　^
SyntaxError: invalid syntax

構文エラーとなりました。

[otn]

いや、JavaScriptのエラーなので、JavaScript部分の最後です。言われたことを一旦咀嚼しましょう。
～～("あああ"));')

[yayaya22]

失礼しました。修正ありがとうございます。
実行したら、エラーにはなりませんが、何も起きませんでした。

[otn]

そうですか。リモートでの限界ですね。

[yayaya22]

色々とありがとうございました。