javascriptでChatworkの検索を自動化させたいが検索実行ができない。

Question

chatworkで検索文字を入力させて、検索実行したいのですが、検索実行するタグ？がHTML上に出現していないので、クリックできない状態です。

検索BOXに文字を入力

document.querySelector("#_headerSearch > div > div > input[type=text]").value = 'test';

上記にて、検索窓に文字を入力することはできますが、そこから検索実行ができず困っています。

どうも、手入力で検索窓に文字を入力すると、HTML上に<div class="fade"></div>が出現し、そのdivの中に以下の検索実行できるタグが出てくるようです。

<div class="sc-fxMfqs eKhNyu">
    <span class="sc-eIvgmF ivIAwz" style="display: inline;">
        <span class="sc-bdVaJa vKQHu">
            <svg viewBox="0 0 10 10" width="16" height="16" class="sc-bkypNX kHhnYU sc-bwzfXH jhCIfQ" aria-hidden="true">
                <use fill-rule="evenodd" xlink:href="#icon_search"></use>
</svg></span></span>
    <span class="sc-jklikK koCLIz">"test"でメッセージを検索</span>
</div>

上記、手動で出現させたタグに対しては、以下のコードで検索実行できることは確認しています。

document.querySelector("#_headerSearch > div.fade > div > div > div > span.sc-jklikK.koCLIz").click();

しかしながら、出現させる方法がわかりません。
動作的には「文字を入力する」事と「フォーカスされている事」の2つが重なった場合に出現しているようすです。

検索BOXのinputに対してmouseoverやonchangeなど？GoogleChromeのデベロッパーツール上でConsoleに出てくるものをかたっぱしから試しましたが、どれも上記の出現をさせることができませんでした。

お手数ですが、ご教示いただけますと幸いです。
よろしくお願いします。

dispatchEventについてヒントをいただき、試した事

var hoge = document.querySelector("#_headerSearch > div > div > input[type=text]")

hoge.dispatchEvent(new Event('blur'));
hoge.dispatchEvent(new Event("input", {"bubbles": !0}));
hoge.dispatchEvent(new KeyboardEvent("keyup",{key: "a" }));

Comments

[plasticgrammer]

検索BOXのイベントリスナーを確認してみてください。
Chromeだと開発者ツールで対象要素選択後、Event Listenersタブにて確認できるかと思います。（どのイベントに検索ボタン表示処理が登録されているでしょうか）

[neji-thon]

Event Listeners画面は初めてみたのですが、出現する、クリックしたい検索BOXで右クリックしてEvent Listenersのclickの中の一番下に、
div.sc-fxMfqs eKhNyuというものが出てきます。

それが関係するのでしょうか？

[plasticgrammer]

検索BOXに値を設定する前に、検索BOXのクリックイベントを実行（dispatchEvent）すればいけそうな気がします。

[neji-thon]

ご教示ありがとうございます。
dispatchEventも初めて触る？のでいろいろ試して、以下のdispatchEventを実行後にテキストのvalueを入れ替えたりしてみましたが、
見た目上で検索実行ができる検索BOXが表示されず、検索実行はいまだできておりません。

イベント？はこのあたりを入れ替えてみたりしました。
change,focusout,input,blur

恐縮ですが、dispatchEventについてもう少しヒントをいただけますでしょうか。。
よろしくお願いします。

[plasticgrammer]

情報が少なくてすみません。
イメージしていたのは下記サイトにあるような処理です。
https://lab.syncer.jp/Web/API_Interface/Reference/IDL/EventTarget/dispatchEvent/

var element = document.getElementById( "hoge" ) ;
var event = new MouseEvent( "click" ) ;
element.dispatchEvent( event ) ;

[neji-thon]

ありがとうございます。
いただいた内容をもとにデベロッパーツールと改めてにらめっこしてましたが、ラッキーパンチは当たらないようです。
そもそものjavascriptの勉強が足りず恐縮です。
何をしたのか不明なのですが、検索BOXをいじってたらConsoleにEnterキーやら入力したイベントがリアルタイムに表示されるようになり、そこを追いかけていったら？該当のENTERしたい検索BOXのエレメント？の所まで行けまして、右クリックでプロパティのパスコピーというのをしてみたのですが、以下の内容でした。

srcElement.offsetParent.parentElement.nextElementSibling.firstChild.lastChild

すいません。さっぱりわからないのですが、何かわかりますでしょうか？

[plasticgrammer]

> srcElement.offsetParent.parentElement.nextElementSibling.firstChild.lastChild
発生したイベント要素から、選択（検索BOX）までの相対参照のためのコードになるかと思います。
今回の問題解決には役に立ちそうにないです。

[plasticgrammer]

一旦、現状の確認と整理のため回答させていただきました。

[neji-thon]

ありがとうございます！勉強不足ですいません。

Answer 1

当方の環境ではこれで動作しました。
React がよくわからないので、無駄なことをしてるかもしれませんが……

var target = document.querySelector("#_headerSearch > div > div > input[type=text]");

Object.getOwnPropertyDescriptor( HTMLInputElement.prototype, 'value' ).set.call( target, "hoge" );
target.dispatchEvent( new Event( 'change', { bubbles: true} ) );
target.dispatchEvent( new KeyboardEvent( "keydown", { keyCode: 13, bubbles: true } ) );

Comments

[neji-thon]

ありがとうございます！
bublesの所で（意味を勉強しないとですが・・・）出したかったタグが出てきて、javascriptだけで検索実行できました！

Answer 2

検索BOXのイベントハンドラから、「"test"でメッセージを検索」を表示させているものを見つけ、そのイベントハンドラを実行させるのが近道かと思います。

検索BOXのイベントハンドラのclickで、表示させているのであれば

var hoge = document.querySelector("#_headerSearch > div > div > input[type=text]")
var event = new MouseEvent("click");
hoge .dispatchEvent(event);

として表示させることはできないでしょうか。

Comments

[neji-thon]

ありがとうございます。
出現させたい検索BOXを手動で出している状態でその検索BOXを右クリックして
Event ListenersのAncestorsを外して（外さないと大量に項目があるので。。）、上にタグをたどっていくと、以下のパスの場所でclickのイベント？が唯一表示されました。（見方が正しいか不明で恐縮ですが）

以下を試しましたが、ダメでした。

var hoge = document.querySelector("#_headerSearch > div.fade > div > div > div")
var event = new MouseEvent("click");
hoge.dispatchEvent(event);

その後、元から見えている検索BOXにテキストを入れても隠れた方の検索BOXは出現してくれません。
何か少し進展した気がします。もう少し自分でもいろいろ試してみます。

[plasticgrammer]

> var hoge = document.querySelector("#_headerSearch > div.fade > div > div > div")
valueを設定するときの例とパスが違っていますが、これは検索BOXなのですよね。

検索BOXに間違いないのであれば、外したAncestorsのどれかのイベントでボタン表示させているのかもしれません。

[Lhankor_Mhy]

横から失礼します。

Chatwork 使っていますが、調べてみるとchangeイベントを拾っているようです。
検索実行は keydownを見てそうです。

[neji-thon]

＞Lhankor_Mhyさん
解決しました。
ありがとうございます。

＞plasticgrammerさん
いろいろご教示いただいて勉強になりました。ありがとうございます。