2017-04-08 52 views
2

サイトのWebオートメーションを作成しようとしています。私はクリックをシミュレートしています。通常は、以下のような要素にIDを追加して、Chromeデベロッパーコンソールを使用してクリックをトリガーすると、常に動作します。JavaScript - コンテキストメニューをクリックしてシミュレートする

PS:質問の下にoutdated.Iが実際にweb.whatsapp.com

<div id="myapp">button1</div> 

<script> 
    $("#myapp").click(); 
</script> 

それとも、それが動作しない場合は、私が使用してmousedownイベントを使用して、コンテキストメニューから項目をクリックしようとしていますされます以下のような純粋なJavaScriptであり、スムーズに動作します。

function triggerMouseEvent(node, eventType) { 
    var clickEvent = document.createEvent('MouseEvents'); 
    clickEvent.initEvent(eventType, true, true); 
    node.dispatchEvent(clickEvent); 
} 

var targetNode = document.querySelector("#myapp"); 
triggerMouseEvent(targetNode, "mousedown"); 

今、私の質問は:これはjQueryのプラグインcontextMenuを介して生成されたメニューのために働いていません。

contextMenu hereのデモを見ることができます。デベロッパーコンソールから上記のテストを行っています。あなたは右のコンテキストメニューをクリックしたとき

は、手動でのメニューの一つに、コードの下に、それはまた、デベロッパーコンソールを経由して、正しい要素を選んでいるとID #myapp追加ulli tags.Iに記載されているメニュー項目のリストがあります。

var targetNode = document.querySelector("#myapp"); 
targetNode; 

ただし、コンテキストメニューから生成されたメニュー項目をクリックすることはできません。私は24時間以上それと苦労していた。私はmouseup,mousedownmouseenterのような、私が考えることができるJavaScriptのすべてのイベントを試しました。

答えて

2

コンテキストメニューが作成されたときにのみメニュー項目をクリックできます。これは、プラグインによって動的に実行されます。したがって、まずメニューを起動する必要があります。

私が知る限り、ネイティブコンテキストメニューをトリガすることはできません。ただし、is possibleを右クリックすると、contextmenuイベントを使用する必要があります。

特に、$(el).trigger('contextmenu')を使用するとうまくいくようです。これはプラグインが明示的にsupports thisのため動作しているようです。それが完了したら、クリックしたいメニュー項目をクリックする必要があります。

// first, trigger the context menu 
$('.button-that-has-contextmenu').trigger('contextmenu'); 
// then click the menu item you want to click 
// substitute the correct index in `eq(X)` here 
$('.context-menu-item:eq(1)').trigger('mouseup'); 

このプラグインはCDNでホストされていないため、ここでスニペットを作成するのは簡単ではありません。私はJSFiddleを完全にデモするために作成しました。そこでは、プラグインソースをコピーしてフィドルにコピーします。


コメントでは、約web.whatsapp.comと尋ねました。私はWhatsAppアカウントを持っていて、そこでテストしました。彼らはではなく、jQuery contextMenuプラグインを使用していると思われます。$関数が実際に定義されていますが、jQueryではないようですが、document.querySelectorへのショートカットです。

カスタムコンテキストメニューのコードはわかりませんが、私はそれをトリガーすることができました。基本的に、私は上記のコードのバニラJSバージョンを使用し、どの要素をトリガするかを把握しなければなりませんでした。後者は思ったよりも簡単でした。開いているチャットの一覧は.infinite-list-itemです。 DOMでの順序は視覚的な順序と一致しませんが、必要なものを見つけることはブラウザのインス​​ペクタを使って行うことができます。それがあるとすれば、そのリスト項目の内側に.chat要素が必要です。次のように我々はそれを選択することができ、我々は2番目の項目に興味があると言う:

var target = $('.infinite-list-item:nth-child(2) .chat'); 

あなたは右の要素を持っブラウザコンソールで確認することができます。次に、次のようにイベントを発生させます。

var evt = new MouseEvent('contextmenu', { 
     bubbles: true, 
     cancelable: true, 
     view: window, 
     buttons: 2 
    }); 
target.dispatchEvent(evt); 

これは、コードがthis exampleに基づいており、近代的なMouseEventコンストラクタを使用しています。

上記の操作で、ブラウザの左上隅にあるコンテキストメニューが開きます。 clientXclientYプロパティをウィンドウ内の位置を表すMouseEventコンストラクタに渡すことで、位置を変更できます。

これが完了したら、コンテキストメニューの項目をクリックすることができます。 JavaScriptを使用してこれを自動化することはできません。私はソースを覗いて、メニュー項目のクリックハンドラはevent.isTrustedかどうかをチェックします。つまり、プログラム上でクリックをトリガすることはできません。

Selenium 2.0(WebDriver)やその周りのラッパー(WebdriverIO)のような低レベルのクリックをエミュレートできるものを使用してみるとよいでしょう。

+0

おかげで解決策はありますが、実際にテストしている場所ではうまくいきません...実際にはweb.whatsapp.com ..右クリックすればこのコンテキストメニューが表示されます。私はそれのサンプルHTMLコードをここに入れましたhttps://jsfiddle.net/adjmpw/ympnzb1c/4/ ..それはそこで動作します。 web.whatsapp.comでは機能しません。親が絶対配置されているかもしれませんか? 。私が助けてください、私はあなたがほしい賞金をどれくらい与えるのですか – Vishnu

+0

こんにちは、本当にありがとう、ありがとう、私は実際にmouseoverイベントを使用してコンテキストメニューをトリガーし、.icon-downをクリックすることができますが、ミュートボタンをクリックすることはできません私はなぜ知っているのですか?信頼されています。私はセレンを使用する予定です。セレンは、isTrustedがあってもそれらのボタンをクリックできますか?このアクションとアクションが可能なセレンのための良いjavascriptラッパーを教えてください。 – Vishnu

+0

あなたは大歓迎です!はい、それはSeleniumで動作します。なぜなら、クリックやマウスの動きをより低いレベルでシミュレートするからです。私は個人的にJSラッパーの経験はありませんが、WebdriverIOを試してみると、私の答えでリンクしました。 –

関連する問題