Python selenium テキストフィールドに値を入力できない

Question

前提

Python 3.11.1
selenium 4.7.2

実現したいこと

変数keyname1に設定した値をテキストフィールドに入力したいのですが出来ません。
send_keysの使い方が誤っていますでしょうか。
入力対象はCLASS_NAMEと考えていますが、何かお気づきの方がいらっしゃいましたら
ご教授頂けないでしょうか。
宜しくお願い致します。

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

Traceback (most recent call last):
  File "/selenium_input.py", line 81, in <module>
    driver.find_element(By.CLASS_NAME,"hoge-text-input").send_keys(keyname1)
  File "/webelement.py", line 233, in send_keys
    self._execute(
  File "/webelement.py", line 410, in _execute
    return self._parent.execute(command, params)
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/webdriver.py", line 444, in execute
    self.error_handler.check_response(response)
  File "/errorhandler.py", line 249, in check_response
    raise exception_class(message, screen, stacktrace)
selenium.common.exceptions.ElementNotInteractableException: Message: element not interactable
  (Session info: chrome=108.0.5359.124)

該当のソースコード

from selenium import webdriver
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.common.by import By

options = Options()
# ログインURL
url = "https://hoge.co.jp/“
driver = webdriver.Chrome()

# Chromeを起動
driver.get(url)

keyname1 = "*****"
driver.find_element(By.CLASS_NAME,"hoge-text-input").send_keys(keyname1)

■対象のhtml

<div class="hoge-hoge-select">
    <ul class="hoge-tag__wrapper"> </ul>
    <div class="hoge-hoge-select__filter">	
        <dl class="hoge-hoge-select__filter-head">
            <dt class="hoge-hoge-select__filter-name">
                <dd class="hoge-hoge-select__filter-input">
                    <div class="hoge-text-input__wrapper">
                        <input type="text" class="hoge-text-input" placeholder="key名を入力" value>

試したこと

変数keyname1に設定した値が入力されずエラーとなる
そこで14行目の代わりに下記の①〜⑤それぞれ試してみた

対象のclass名として下記の⑤つをそれぞれ試したが全て同様のエラーが発生
①driver.find_element(By.CLASS_NAME,"hoge-hoge-select__filter").send_keys(keyname1)
②driver.find_element(By.CLASS_NAME,"hoge-hoge-select__filter-head").send_keys(keyname1)
③driver.find_element(By.CLASS_NAME,"hoge-hoge-select__filter-name").send_keys(keyname1)
④driver.find_element(By.CLASS_NAME,"hoge-hoge-select__filter-input").send_keys(keyname1)
⑤driver.find_element(By.CLASS_NAME,"hoge-text-input__wrapper").send_keys(keyname1)

上記①〜⑤を試したが全て同様に下記のエラー

Traceback (most recent call last):
File "/selenium_input.py", line 81, in <module>
driver.find_element(By.CLASS_NAME,"①〜⑤のクラス名").send_keys(keyname1)
File "/webelement.py", line 233, in send_keys
self._execute(
File "/webelement.py", line 410, in _execute
return self._parent.execute(command, params)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "/webdriver.py", line 444, in execute
self.error_handler.check_response(response)
File "/errorhandler.py", line 249, in check_response
raise exception_class(message, screen, stacktrace)
selenium.common.exceptions.ElementNotInteractableException: Message: element not interactable
(Session info: chrome=108.0.5359.124)

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

Answer 1

ElementNotInteractableException は、何かしらの操作を行いたい要素がまだインタラクトできない状態である場合に発生するエラーです。つまり、ページのロードを待てば解決できます。

ロードの待機には、2 種類あり、特定の条件を満たすまで待つ方法と、要素が見つからない場合に常に一定時間待機する時間を設定する方法です。前者を明示的な待機、後者を暗黙的な待機と呼びます。以下に例を示します。詳しくは、ドキュメントを参照してください。

# 暗黙的な待機
from selenium import webdriver
from selenium.webdriver.common.by import By


url = "https://hoge.co.jp/“
driver = webdriver.Chrome()

# 要素が見つからない場合に、常に10秒まで待機する。10 秒を過ぎても見つからない場合は諦める
driver.implicitly_wait(10)

driver.get(url)
keyname1 = "*****"
driver.find_element(By.CLASS_NAME,"hoge-text-input").send_keys(keyname1)

---

# 明示的な待機
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.wait import WebDriverWait


url = "https://hoge.co.jp/“
driver = webdriver.Chrome()

driver.get(url)
keyname1 = "*****"

# 具体的な条件を提示し、それが満たされるまで指定した時間待機する
input_element = WebDriverWait(driver, timeout=3).until(lambda d: d.find_element(By.CLASS_NAME,"hoge-text-input"))
input_element.send_keys(keyname1)

Comments

[khaii21]

Demeraraさん
ご確認、ご教授ありがとうございます。
timeoutの値も調整して確認したのですが下記のエラーになりました。
NameError: name 'WebDriverWait' is not defined

要素が見つかるまで単純にtime.sleepでwaitしてみたのですが同エラーになりました。
要素の指定に誤りがありそうでしたらご教授頂けますと幸です。

File "/webelement.py", line 410, in _execute
return self._parent.execute(command, params)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

[Demerara]

from selenium.webdriver.support.wait import WebDriverWait
インポートし忘れてませんか？

time.sleep() はプロセス全体を止めてしまうのでこの場合は無意味だと思います

[khaii21]

Demeraraさん

大変失礼致しました。
ご指摘の通りimportを忘れていたましので設定しました。
not definedのエラーは解消しましたが、下記のエラーは解消しませんでした。
return self._parent.execute(command, params)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
根本的な私の設定の仕方に問題がありそうです。

[Demerara]

`.is_enabled()` というメソッドがあります。要素が有効なら True を返します。

input_element = WebDriverWait(driver, timeout=3).until(lambda d: d.find_element(By.CLASS_NAME,"hoge-text-input").is_enabled())

[Demerara]

もう一つの手は、`expected_conditions` を使うことです。

```python
from selenium.webdriver.support import expected_conditions as EC

WebDriverWait(driver, timeout=3).until(
EC.visibility_of_element_located((By.CLASS_NAME, "hoge-text-input"))
)
dirver.find_element(By.CLASS_NAME,"hoge-text-input").send_keys(keyname1)
```

[khaii21]

Demeraraさん

ご親切にありがとうございます。
ご教授頂いたことを参考に確認したのですが、十分に要素が表示される時間を待ってみましたが
タイムアウトエラーになりました。

input_element = WebDriverWait(driver, timeout=50).until(lambda d: d.find_element(By.CLASS_NAME,"hoge-text-input").is_enabled())
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "/wait.py", line 95, in until
raise TimeoutException(message, screen, stacktrace)
selenium.common.exceptions.TimeoutException: Message:

タイムアウトエラーになりますのでclass名に誤りがありそうです。
Chromeブラウザーのデベロッパーツールで要素名を確認しながら進めているので
間違いないはずなのですが下記の箇所だけ実行しても
input_element.send_keys(keyname1)

return self._parent.execute(command, params)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
こちらのエラーになりますのでclass名に誤りがありそうでしょうか？

[Demerara]

実際の HTML を見てないので何とも言えませんが、class name に誤りがあるようには見えません。
`(By.XPATH, "//input[@type='text']" )` とでも指定してみてはどうですか？

[Demerara]

css selector なら `driver.find_element(By.CSS_SELECTOR, "input.hoge-text-input")` ですかね

[khaii21]

Demeraraさん

ご親切に色々とありがとうございます。
下記をそれぞれ実行してみたのですが同エラーでした。
driver.find_element(By.XPATH, "//input[@type='text']").send_keys(keyname1)
driver.find_element(By.CSS_SELECTOR, "input.hoge-text-input").send_keys(keyname1)

エラー：
selenium.common.exceptions.ElementNotInteractableException: Message: element not interactable

[Demerara]

コメントが連投になってしまいましたが、こちらは試されましたか？

```python
from selenium.webdriver.support import expected_conditions as EC

WebDriverWait(driver, timeout=3).until(
EC.visibility_of_element_located((By.CLASS_NAME, "hoge-text-input"))
)
dirver.find_element(By.CLASS_NAME,"hoge-text-input").send_keys(keyname1)
```

[khaii21]

Demeraraさん

ご確認ありがとうございます。
>コメントが連投になってしまいましたが、こちらは試されましたか？
ご教授頂いたこちらも試したのですが同エラーとなりました。

一点気づいたことがありまして、該当の入力フィールドは下記の通りなのですが
<input type="text" class="hoge-text-input" placeholder="key名を入力" value>

テキストフィールド配下にはkeyの一覧が既に1行ずつ縦に並んで表示されており、
textフィールドには実行ボタンは無く、手入力でkey名の一部を入力すると
文字に引っかかったkeyのみが一覧に残ります。
仮に手入力で test と入力した場合、 htmlを見ますと value が下記のようになります。
<input type="text" class="hoge-text-input" placeholder="key名を入力" value="test">

入力したいフィールドの上にある別にテキストフィールドに対して
(By.XPATH, "//input[@type='text'][1]")
とした場合、そちらのテキストフィールドには正常に入力出来ます。
ただし、入力したいテキストフィールドは　type="text"になっていますが、
(By.XPATH, "//input[@type='text'][2]")
とするとタイムアウトになるため、普通のテキストフィールドとして認識されていない様子です。

スキル不足で大変申し訳ございません。
Selenium IDEを使って手入力で test と入力した状況を確認したところ下記の通りでした。
何かお気づきの事がございましたらご教授頂けますと幸いです。

css=.hoge-text-input__wrapper > .hoge-text-input
xpath=//input[@value='test']
xpath=//div[@id='__next']/div/main/div/div[2]/form/ul/li[2]/div[2]/div/div/dl/dd/div/input
xpath=//dd/div/input

[Demerara]

申し訳ないですが、文章を読んだだけではいまいちよくわかりません。
テキストフィールドというのは、画像の検索欄のことを指してるんでしょうか？しかし、文章を読むとテキストフィールドは複数あるような感じに受け取れます。

これがページロードに関係してないのであれば別で質問を立てた方がいいかもしれません。より具体的に、「こういう条件下の時のテキストフィールドの指定方法」みたいな感じで。もしくは、該当URL を提示できないのであれば、似たような挙動をするページの URL でもあれば、力になれるかもしれません。自分には説明の内容がいまいちピンときませんでした。

[khaii21]

Demeraraさん

説明が不明瞭で申し訳ございません。
>テキストフィールドというのは、画像の検索欄のことを指してるんでしょうか
はい。そちらのhtmlが下記になります。
<input type="text" class="hoge-text-input" placeholder="key名を入力" value>
type=textの入力欄をテキストフィールドと呼ばせて頂いておりまして、ページ内には合計で2つあります。

>テキストフィールドは複数あるような
はい。ページ内には2つのテキストフィールドがありますが、
最初の1つ目はチェックボックスをONにしないと有効にならないフィールドになっており
現在のSeleniumによる入力テストではOFFにしているため、ページ内にはテキストフィールドが
1つだけ存在している状態で確認しています。
ただし現状では入力ができない状態が続いているため、無効にしていたテキストフィールドを一旦有効にして
文字入力が出来るか確認したところ、そちらに対しては問題なく入力出来ました。
ただし、該当のフィールドに関しては type=text 扱いでは入力出来ず、CLASS_NAMEである
hoge-text-input を指定しても上手くいかない状況です。

[Demerara]

ブラウザで開発者ツールを開く。該当の要素をエレメントピッカーで取得する。該当する HTML の要素を右クリック、コピー >「CSS Selector」もしくは「Full XPath」としてはどうですか？該当要素までのフルパスなら確実だと思います。

[khaii21]

Demeraraさん
とてもご丁寧にご教授頂きましてありがとうございます。
ご指示頂いた方法で問題なく入力出来ることが確認出来ました。
大変助かりました。