@kosk_posted at 2024-01-18

JavaScriptでDOMの操作をしているが期待通りの動作をしない

Q&A

解決したいこと

Chromeの拡張機能を作成しています。
Amazonの料金シミュレータでテキストを入力したあと、検索ボタンをクリックしたいです。
https://sellercentral.amazon.co.jp/hz/fba/profitabilitycalculator/index?lang=ja_JP

発生している問題・エラー

テキストを入力後検索ボタンをクリックしても商品検索が実行されません。

該当するソースコード

// テキストボックスへ"test"を入力
const inputAsin = document.querySelector('.input-asin');
const inputElement = inputAsin.shadowRoot.querySelector('#katal-id-4');
inputElement.value = "test";

// "検索"ボタンをクリック
const searchButton = document.querySelector('.button-search');
const button = searchButton.shadowRoot.querySelector('.button');
button.click();

自分で試したこと

対象ボタンのクリックイベントにトリガーを設定し、クリックの判定がされていることは確認しました。
テキストボックスへスクリプトから文字列入力後、マウスでテキストボックスにフォーカスし、入力した後フォーカスを外すと検索ボタンで検索できます。
ただし、下記のコードでフォーカスしてみようと思いましたがフォーカスもできませんでした。

const inputAsin = document.querySelector('.input-asin');
const inputElement = inputAsin.shadowRoot.querySelector('#katal-id-4');
inputElement.focus();  // フォーカスを当てる

かれこれ４時間以上格闘していますが全く解決の糸口がつかめません。
よろしくお願いします。

1Answer

@HalHarada posted at 2024-01-18

const searchButton = document.querySelectorAll('.button-search');

で取得し、alert(length(searchButton))
にて該当のボタン数を確認しましょう。

F12キーを押し、表示された画面の左上のアイコンにて該当のボタンを指し示し、マウス右ボタンからコピーを選択することで、妥当なキーワードを取得しては？

2Like

Comments

@kosk_
Questioner
ご回答ありがとうございます。
下記の通り、１つだけ要素があります。
@HalHarada
document.querySelectorAll('.button-search')[0].click()
で１個目のボタンが押せます。
'.button-search' をクラス、属性、タグ、id、複数指定で色々なオブジェクトを操作できます。
@kosk_
Questioner
続けてご回答ありがとうございます。
恐れ入りますが、ご教示いただいた内容は存じ上げております。

可能であれば実際に上記のwebページで検索していただくことは可能でしょうか。
私としては検索ボタンのクリックイベントが発火するところまでは確認しています。
ただ、検索結果が表示されません。。。

通常のマウスとキーボードの操作であればテキストボックスへテキストを入力し、その後テキストボックスからフォーカスを外して検索ボタンをクリックすると検索結果が表示されています。そのあたりの動作をシミュレーションして動作させてみたのですがどうしてもうまくいかないのです。
質問が分かりづらく申し訳ありませんん。よろしくお願いします。
@HalHarada
上記url にてゲストとして。。。を押し、　jp のまま　ff を手入力し、手入力で検索ボタン押すと,　商品画像が表示されますよ

versionはChrome120です. Android
@HalHarada
スクレイピング(クローリング)の話ですね。Amazonからの許可の明言がないのでお茶を濁した話になります。

スクレイピングの主な手法は３つ在ります。
1. Selenium
2. BeautifulSoup
3. JavaScriptによるiframe操作
@kosk_さんは他人のWEBサイトをJavaScriptで自由に操作できると勘違いしていると思います。

JavaScriptは自分のWEBサイトのみ操作できます。但し、CORSの許可指定されている場合、iframe内のコンテンツをJavaScriptで操作できます。

上記urlをiframeで指定して、iframe内の表示されたコンテンツを手入力で操作できるか確認して下さい。
@kosk_
Questioner

@kosk_さんは他人のWEBサイトをJavaScriptで自由に操作できると勘違いしていると思います。

ご指摘の通り、拡張機能を自作してユーザーの操作と同じにすれば可能だと思っておりました。
本ページのDOM要素はiframe内にあることも理解できていない為、勉強になりました。
詳細なご回答ありがとうございました。

Are you sure you want to delete the question?