方法：CasperJSを使用してiFrameでラジオオプションボタンを選択しますか？

Question

私はJavaScriptが新しく、CasperJSなどが初めてです。しかし、私はいくつかのYouTubeビデオを見て、CasperJSを使っていくつかの例を試しました。この眺めから、私は基礎をかなりよく理解していて、私が現在取り組んでいる私の最初のプロジェクトの準備が整ったと思いました。 ラジオオプションボタンをクリックするにはどうすればいいですか？

私はそれが私の理解のいくつかの追加の穴と一緒に働いているサイトにユニークなものかどうか分かりませんが、何も試してみることはできません。私はどんな入力をも大変感謝しています。私は暗闇の中で遠くまでぼんやりとしています...

私はこれに新しいので、私は間違ってやったいくつかの事柄があるかどうかを詳しく説明します。

問題

私はサイトのURLを開く

： http://www.ddbst.com/unifacga.html私は4つのオプションで迎えています： だから私は、コントロールを右クリックし、要素に関する情報を取得するデベロッパーツールを使用します。

<input name="selection" value="Upload" id="ID1" type="radio" onclick="this.form.submit()"> 
<input name="selection" value="MolinspirationJME" id="ID2" type="radio" onclick="this.form.submit()"> 
<input name="selection" value="Insert" id="ID3" type="radio" onclick="this.form.submit()"> 
enter code here 
<input name="selection" value="DDBSearch" id="ID4" type="radio" checked="checked" onclick="this.form.submit()"> 

を

DDBSearch（オプション番号4）に興味があります。私はラジオボタンの例はまだ持っていません。値=真、その後私は、値が実際にテキスト文字列であることがわかり、私はそのアクティブ状態がどのように見えるかを確認するには、ボタンをクリックしてください：だから私は、私は何とかプロパティを有効にする必要があることを知っている

<input name="selection" value="DDBSearch" id="ID4" type="radio" checked="checked" onclick="this.form.submit()"> 

をチェックしましたが、私はXPath、ID、Nameなどでこれを行うことができませんでした。問題の内容を知らずに、Webから他の例を使ってエラー情報をさらに報告しようとしました。

キャスパーコンストラクタオプション

私のセットアップ私のキャスパーのオブジェクトは、次のように

var casper = require("casper").create({ 
    logLevel:"debug", 
    verbose:true,    // log messages will be printed out to the console 
    pageSettings:{    // the WebPage instance used by Casper will use these settings. 
     loadImages: false,  
     loadPlugins: false, 
     webSecurityEnabled: false 
    }, 
     onDie: function(){ 
      console.log("Script complete."); 
     }, 
     // Display message every time any page successfully initializes: 
     onPageInitialized: function(){ 
      console.log("\rPage initialized.\r"); 
     }, 
    waitTimeout: 10000, 
    stepTimeout: 10000, 
     onWaitTimeout: function(){ // invoked when you are waiting for an element to be visible, e.g. after clicking a button, and waitTimeout has been exceeded. 
      this.echo("** Wait-TimeOut **"); 
     }, 
     onStepTimeout: function(){ // NOT REALLY SURE WHAT THIS IS USED FOR ??? 
      this.echo("** Step-TimeOut **"); 
     } 
}); 

は、例えば次のようなコードを使用して、追加のエラー情報をキャッチしようとすると、

追加機能を必要と

casper.on('remote.message', log); 
casper.on('error', logError); 
casper.on('complete.error', logError); 
casper.on('page.error', logError); 

：私はからこれを得たところ

function log(msg){ 
    console.log("\r"); 
    console.log('Remote msg>: ', msg); 
    console.log("----------------------------------------------------","\r"); 
} 

function logError(msg,traceback){ 
    console.log("\r"); 
    console.log(msg); 
    console.log(traceback); 
    console.log("----------------------------------------------------","\r"); 
} 

本当にわからない、またはどのようにそれは本当に動作しますが、それは追加のエラー情報を報告しなければならないようにそれが見えたので、私は破産のために行ってきました。

ページ構造

を確認してください私はあなたが最初のページの構造を確認する必要があることをどこかで読んので、私はラジオのオプションが中に含まれているフォームopeform、上に基づきました。この時点で、私は実際に（オプション番号4を選択した後に）取得することになっている追加の入力フィールドがページ上に隠されていることに気づいた。これは重要かどうかわからない？

フォームの隠れ要素を扱う方が簡単だと思います。私は現在持っている無線オプションの問題をバイパスしていますか？ （今のところバックグラウンドで燃え尽きる想い..

...すべてが太陽の光をバラされ、この時点まで

var selector = "#unifacga"; 
casper.then(function(){ 
    console.log("\r>>> Check if the element exists."); 
    console.log(">>> If the element does not exist, the test (i.e. our script) will fail, otherwise it will simply continue.\r"); 
    this.waitForSelector(selector, 
     function pass() { 
      this.capture("open.png"); 
      console.log("\r",">>> Element found"); 
      console.log("1: ",this.evaluate(function(sel){return !!document.querySelector(sel)},selector)); 
      console.log("2: ",this.evaluate(function(sel){return document.querySelector(sel).textContent;},selector)); 
      console.log(">>> Continue.","\r"); 
     }, 
     function fail() { 
      this.capture("fail.png"); 
      this.die(">>> Did not load element... something is wrong T_T","\r"); 
     } 
    ); 
}); 

を：）

<form name="opeform" method="post" action="http://ddbonline.ddbst.com/OnlinePropertyEstimation/OnlineUNIFACGroupAssignmentSA.exe"> 
<hr> 
<table border="0" style="white-space: nowrap; font-size:10pt;width: 560px; text-align: left;" cellpadding="2" cellspacing="2"> 
<tbody><tr><td> 
<h3>Input Method</h3><input name="selection" value="Upload" id="ID1" type="radio" onclick="this.form.submit()"><b>Upload</b> a Mol- or CTC-file directly from your hard drive<br> 
<input name="selection" value="MolinspirationJME" id="ID2" type="radio" onclick="this.form.submit()"><b>Molinspiration JME</b> allows to draw and edit molecules (Java required)<br> 
<input name="selection" value="Insert" id="ID3" type="radio" onclick="this.form.submit()"><b>Insert</b> the content of a Molfile in a textfield<br> 
<input name="selection" value="DDBSearch" id="ID4" type="radio" onclick="this.form.submit()"><b>DDB Search</b> (retrieves a structure from the chemical structure database ChemDB)</td> 
</tr> 
</tbody> 
</table> 
<input type="hidden" id="ID9" name="molstruct" value=""> 
</form> 

だから私はCasperJSフォームopeformを続行する前に所定の位置にあることを確認するシステムを主張使用します

XPathで選択

私は最初にXPathを使ってみましたが、これは多くの例がfボタンをクリックするか：

のように私はエラーを取得する

いる

var x = require("casper").selectXPath; 
// //*[@id="ID4"] is the XPath statement. 
// input type that has the attribute id as radio. 
casper.thenClick(x('//*[@id="ID4"]')); 
casper.wait(5000).then(function(){ 
    casper.capture("option_sel4.png"); 
}); 
casper.run(); 

：それはnonexistantセレクタを言いますが、構文は（私の知る限り）、右に見える、とIDが最も間違いなく「ID4」である （DevToolsの上に示されているように）。

てみてください2号 - ラジオオプションID（と名前）によって選択

だから私は次のID（と名前）でオブジェクトで作業してみました：

casper.evaluate(function(){ 
    document.getElementById("ID4").checked=true; 
}); 
casper.run(); 

今、私は別のを取得しますエラー： これでタイプエラーが発生しました。 getElementByIDメソッドのように見えますが、オブジェクトや何かを返さないかもしれません。例えば、同様のエラーでgetElementByName結果...

てみてください第3番 - Casper.Click

私もCasperJS.clickを試してみました：

：XPathのような別のエラーになり

casper.then(function() { 
    this.click('input[id="ID4"][checked="checked"]'); 
}); 
casper.run(); 

結論付録：

問題の解決方法がわかりません。ラジオオプション4を選択しようとするもののように見えますが、何らかのエラーが発生します。しかし、私はJavaScriptやCasperJSについては、私がすでに持っているよりもずっと複雑なものを解決するために十分ではありません。私がオンラインで試した他の解決策はこれまで私のために働いていませんでした。どんな助けでも大いに賛美されるでしょう。

Answer 1

私の関数click2iframeを使用し、--web-security=noオプションを忘れないでください。 ./casperjs --web-security=no snap.js

function click2iframe(sel_of_the_iframe,sel_in_the_iframe){ 
var event=document.createEvent('MouseEvents'),element=document.querySelector(sel_of_the_iframe).contentDocument.querySelector(sel_in_the_iframe);event.initMouseEvent('click',1,1,window,1,0,0,0,0,0,0,0,0,0,null); element.dispatchEvent(event); 
} 
var casper = require('casper').create(); 
casper.start('http://www.ddbst.com/unifacga.html').wait(5000).then(function(){ 
this.capture('test0.png'); 
this.evaluate(function(click2iframe){ 
click2iframe('iframe[name="ircframe"]','input[id="ID4"]'); 
},click2iframe); 
}); 
casper.wait(5000).then(function(){this.capture('test.png');}).wait(2000); 
casper.run(); 

ボーナス例：click3_iframe機能、あなたは第三iframe内に配置されている要素をクリックする必要がある場合：

<iframe id="1"><iframe id="2"><iframe id="3"> 
<a id="some_id" href="">some text</a> 
</iframe></iframe></iframe> 

function click3_iframe(sel_of_the_iframe,sel_of_the_iframe2,sel_of_the_iframe3,sel_in_the_iframe){ 
var event=document.createEvent('MouseEvents'), 
element=document.querySelector(sel_of_the_iframe).contentDocument.querySelector(sel_of_the_iframe2).contentDocument.querySelector(sel_of_the_iframe3).contentDocument.querySelector(sel_in_the_iframe); 
event.initMouseEvent('click',1,1,window,1,0,0,0,0,0,0,0,0,0,null); element.dispatchEvent(event); 
} 
click3_iframe("iframe#1","iframe#2","iframe#3","a#some_id");