2013-11-22 13 views
6

https://developers.google.com/webmasters/ajax-crawling/docs/html-snapshotによると、HtmlUnit(2.13)を使用して、AngularJS(1.2.1)を使用してWebページのスナップショットを作成しようとしています。私はhttp://htmlunit.10904.n7.nabble.com/htmlunit-to-scrape-angularjs-td29931.html#a30075を認識していwebClient.getPage(...)は、任意の例外をスローしませんが結果の文字列は、まだそのようHTMLUnitがAngularJSで動作しない

<div> 
    {{name}} 
</div> 

として「未評価の角度の表現」が含まれてい

WebClient webClient = new WebClient(); 

webClient.setAjaxController(new NicelyResynchronizingAjaxController()); 
webClient.setCssErrorHandler(new SilentCssErrorHandler()); 

webClient.getOptions().setCssEnabled(true); 
webClient.getOptions().setRedirectEnabled(false); 
webClient.getOptions().setAppletEnabled(false); 
webClient.getOptions().setJavaScriptEnabled(true); 
webClient.getOptions().setPopupBlockerEnabled(true); 
webClient.getOptions().setTimeout(10000); 

webClient.getOptions().setThrowExceptionOnFailingStatusCode(true); 
webClient.getOptions().setThrowExceptionOnScriptError(true); 
webClient.getOptions().setPrintContentOnFailingStatusCode(true); 

HtmlPage page = webClient.getPage(new WebRequest(new URL("..."), HttpMethod.GET)); 
webClient.waitForBackgroundJavaScript(5000); 
String result = page.asXml(); 

しかしrecomendation:

私のJavaコードがあります与えられてもどちらもうまくいきません。

もちろん、同じGETリクエストは、現在のすべてのブラウザで例外なく動作します。

AngularJSでHtmlUnitを使用するにあたってどのようなアイデアや経験がありますか?

更新:

私はHTMLUnit bug reportを作成しました。
現時点では、実装をPhantomJSに切り替えました。たぶん、このコードスニペットは、同様の問題で他の人を支援します。

System.setProperty("phantomjs.binary.path", "phantomjs.exe"); 
DesiredCapabilities caps = new DesiredCapabilities(); 
caps.setJavascriptEnabled(true); 
caps.setCapability("takesScreenshot", false); 

PhantomJSDriver driver = new PhantomJSDriver(caps); 
driver.manage().timeouts().implicitlyWait(30, TimeUnit.SECONDS); 
driver.get(new URL("...")); 
String result = driver.getPageSource(); 

アップデート2: 私は、Googleのクローラが今

答えて

0

私が持っているようなコードが時に正常に動作角度サイト自体をレンダリングするよう手動で私のページのレンダリング立ち止まっ私のシングルページアプリケーションはangularjs 1.0.4を使用しています。私がしなければならない異なった唯一のことは、htmlunit 2.12ではなくデフォルトIE8のFIREFOX_17を使用するようにhtmlunitを伝えました(あなたが提供されたリンクに似ていますが、代わりにFIREFOX_10のFIREFOX_17)

final WebClient webClient = new WebClient(BrowserVersion.FIREFOX_17); 

は私が1.2をangularjsブームにアップグレード私のすべての角度のプレースホルダがページに表示されます。

1

HtmlUnitを使用すると、「評価されていない角度表現」と同じ問題がありました。解決策はbootstrap application manuallyです。再現手順:ブラウザでの作業アプリの

最小限の例ではなく、HtmlUnitと:

<!doctype html> 
<html ng-app> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script> 
</head> 
<body> 
    <div> 
     <label>Name:</label> <input type="text" ng-model="yourName" 
      placeholder="Enter a name here"> 
     <hr> 
     <h1>Hello {{yourName}}!</h1> 
    </div> 
</body> 
</html> 

変更の手順:

  1. Bootstrap manually
  2. Remove ng-app to not bootstrap app twice
  3. If you use $http or like you should re-sync it with

    ウェブクライアント。setAjaxController(new NicelyResynchronizingAjaxController());

そして今、作業例:

<!doctype html> 
<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script> 
    <script> 
     angular.element(document).ready(function() { 
      angular.module('myApp', []); 
      angular.bootstrap(document, ['myApp']); 
     }); 
    </script> 
</head> 
<body> 
    <div> 
     <label>Name:</label> <input type="text" ng-model="yourName" 
      placeholder="Enter a name here"> 
     <hr> 
     <h1>Hello {{yourName}}!</h1> 
    </div> 
</body> 
</html> 

がテスト:

WebClient webClient = new WebClient(); 
webClient.setAjaxController(new NicelyResynchronizingAjaxController()); 
HtmlPage page = webClient.getPage("http://localhost:8080/index.html"); 

// Initial state 
assertEquals("Hello !", page.getElementsByTagName("h1").get(0).asText()); 

// Set value 
((HtmlInput)page.getElementsByTagName("input").get(0)).setValueAttribute("world"); 

// New state 
assertEquals("Hello world!", page.getElementsByTagName("h1").get(0).asText()); 

それは解決策ではなく、本当に喜びソリューションを働いています。私はそれがHtmlUnitまたはAngularjsの問題であるかどうかはわかりません。

8

私は同じ問題を抱えていましたが、角度e2eテストが明示的なブートストラップでは機能しないため、明示的なブートストラップは使用できませんでした。

私の代わりに仕事とE2Eテストは同様に動作

<html ng-app="appmodule"> 

htmlunit試験の

<html id="ng-app" class="ng-app: appmodule;"> 

を使用して問題を解決しました。

おそらく、htmlunitはdocument.querySelectorAll()を(完全に)サポートしていません。このメソッドは、angiInit()によってng-appディレクティブを検索するために使用されます。

ng-appディレクティブの構文バリアントは、angularInit()のdocument.querySelectorAll()呼び出しを処理します。

+0

これは、HTMLUnitが角度指示を解決していないという問題を解決したため、これが受け入れられる回答になるはずです。ありがとう! – chaitanya

+0

これは、HtmlUnitのAngularJSに対する貧弱なサポートのために役立つようですが、すべての問題を解決するわけではありません。うまくいけば、2.15はより良いでしょう... – Splaktar

1

HtmlUnitの問題が修正されました。 AngularJS式が正しく評価されるようになりました。 SVNで固定報告のため

https://sourceforge.net/p/htmlunit/bugs/1559/

+0

これは固定ですか?私は2.14を使用していて、BrowserVersion.CHROMEまたはFIREFOX_24を使用すると評価されていないAngularJS式が返されますが、BrowserVersion.INTERNET_EXPLORER_8を使用するとこれらの式が評価されます。 – Splaktar

+0

これはまだリリースされていないようです(2.14は2月にリリースされました)。この修正は3月に行われ、リリースの一部ではありません。私は最新のSVNからビルドしようとしましたが失敗しました:https://sourceforge.net/p/htmlunit/bugs/1596/ – Splaktar

+0

私は2.15の最新のSVNブランチでこれを再度テストしました。 @stephanmeの答えで言及された古いハック。私はAngularJS 1.0.8を使用しています。 – Splaktar

0

おかげで、。すぐにHtmlUnit 2.15をお試しください。

テストケースがChromeシミュレーションで動作するようになったため、querySelectorAll()をdocument/elementで定義する必要がありました。

HtmlUnitチームに最小限のテストケースを与えることで、非常に短時間で解決できる可能性があることに注意してください。

フィードバックをお寄せいただきありがとうございます。

関連する問題