Protractorでスクロール関連のテスト - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
Protractorを利用してAngularJS appsをテストする - Qiita
http://qiita.com/drafts/b60766d9017a1eaeada0/edit （Testing AngularJS apps with Protractor の訳） もし、AngularJSアプリケーションを開発するならば、テストにはProtractorを使いなさい！なぜかって？ ProtractorはAngularJSアプリケーションのためのend-to-endテストフレームワークで、強力なツールや技術（NodeJSやSeleniumやwebDriverやJasmineやCucumberそしてMochaなど)を結合するような ソリューションの結合に作用する。 AngularJSアプリケーションのテストをより簡単に作るためにSeleniumからのたくさんのカスタマイズをProtractorは持つ。 また、Protractorは、テストにたくさんの"sleeps"や"w
HTML5/JSでインスタントサーチ（入力中に検索結果表示） - Qiita
3. JS: インスタントサーチのスクリプト この節がいちばんの肝です。 まず、lists = document.querySelectorAll('.line-shell-main-users-li');で検索対象を取得します 次に、for文内でinnnerTextでタグ内の文字列を取得します 最後に、.hiddenクラスをトグルします searchUsersList = function(event){ var i, id, name, lists, input_text = $(this).val(); console.log(input_text); // listのdomを取得 lists = document.querySelectorAll('.line-shell-main-users-li'); for (i = 0; i < lists.length; i++){ id
Karma+istanbulを利用して、AngularJSで構築したプロダクトのCoverage計測 - Qiita
Advent Calendarを通じて、公式ページの各種情報を参考に文章化したことと他の方々の投稿を読み進めることによって、AngularJSの基本的なところを大分理解できてきました。改めて、テストを通して開発できるAngularの良いところやUJSに沿った形の仕組みを構築でき、無理なくHTMLページをリッチにできる仕組みであることを感じてきています。 当初から、Angularのテストを手軽に行えるところが良いという理由を散々述べてきました。 今回、さらに、テストについて踏み込んだ記事として、若干Angularから離れますが、コードカバレッジの計測方法を取りまとめます。 Angularのようにテストを書き易いフレームワークを導入したとして、製造フェーズをテストファーストにして、テストコードを書いてプロダクトの品質をある程度担保できたとしても、結局、テストコードを書くのは人です。場合によって
MongoDB+Express+AngularJS+Node.jsでCSRF対策 - Qiita
CSRF対策 リクエスト強要（CSRF：Cross-site Request Forgery）とは、別のサイトに用意したコンテンツ上の罠のリンクを踏ませること等をきっかけとして、インターネットショッピングの最終決済や退会等Webアプリケーションの重要な処理を呼び出すようユーザを誘導する攻撃です。 (see https://www.ipa.go.jp/security/awareness/vendor/programmingv2/contents/301.html) この対策として、画面遷移毎にトークンを発行し、ブラウザからのリクエストトークンとサーバで保持しているトークンを比較して、不正な画面操作が行われないようにする方法があります。 MEAN 一連の仕組みを実現するためにクライアントサイドもサーバサイドもJavaScriptで書くことができるMEAN Stack(MongoDB+Expr
AngularJSを選択する見解 - Qiita
jQueryやjQuery関連のライブラリを利用して製造を行ってきたのですが、 テストに苦労しています。人出でやるにも、自動化するにも環境面など準備するのに苦労するため、 JavaScriptのテストをするにあたってもっと簡単に行える仕組みを探していました。 何で気が付いたのか忘れましたが、だれかからの紹介だったような、どこかの記事をよんだような TDDのJavaScript開発には、AngularJSがおすすめであると教えてもらいました。 現状の使いたいと感じている理由を取りまとめると以下のようになります。 HTMLのマークアップに沿った実装が可能 AngularUIを使ってリッチなUIをわりと簡単に書けそう。 TDDやend-to-end testsをベースに製造できるしくみが最初からサポートされている。Ajaxなどはサーバ側 から独立させ、仮で想定したテストが書ける。 HTML側とC
Angular.js レンダリング処理をカスタマイズする - Qiita
Angular.jsを使っていてこんな風に思ったことはないだろうか。 ループ内のDOMをテンプレート化したいな レンダリング処理を部品化してカスタムタグで呼び出したい jQuery UIとかを使いたいけど、どこで処理すればいいのか(document.readyだと新規追加したものに適用されない) そんな願いをかなえるのがAngular.jsのdirectiveです。directiveは、一言で言えば ModelとDOMを受け取ってレンダリング処理(compile)を行う関数 で、これを使って上記のようなカスタマイズをすることができます。 そんなわけで、作成したサンプルはこちら。このコードを使って解説をしていきたいと思います。 テンプレート化する テンプレート化は、以下のようにかけます。 <disp-destination ></disp-destination>、これがdirectiveを
Angular.jsで実践 アニメーション - Qiita
スライドの動きやフリック時の画面遷移、昔アニメーションといえばゲームなイメージでしたが、モバイル端末が登場して以来結構身近なものになりました。 ただ、身近だから簡単というわけでもなく、動作にアニメーションをつけるのは結構面倒。「これちょっとさ、下からひゅっと出てくる感じにしてよ」と言われてそんな簡単じゃないんだよとイラッとすることもあるだろう。 「アニメーションはもうデザインみたいなもんだし、CSSで書いてよろしくやってくれたらな・・・」とJQueryで実装しながら見るはかない夢・・・を現実にしてしまうのが、Angular.jsのng-Animateなのであります！ 準備 アニメーションを使用するには、angular.js本体意外にangular-animate.jsが必要となります。Googleがホスティングしてくださっているので、ありがたく使わせていただきましょう。 Google Ho
AngularJsで、Angular Drag and Dropを使ってdndを実践。 - Qiita
はじめに AngularJsでDrag&Dropを実装する際に、便利そうなライブラリを発見したので利用してみた。 ライブラリ Angular Drag and Drop 使い方 本家サイトのサンプルコードを確認しよう。 自分の例 自分の場合は、あるリストを一覧表示して、その各アイテムをdrop先のリストに登録するといったことをやった。 drag側のリスト側 <table><tr> <td ng-repeat="xxxxx in dragItems" data-drag="true" ng-model="dragItems[$index]" jqyoui-draggable="{index: {{$index}}, animate: true, placeholder: 'keep'}" data-jqyoui-options="{revert: 'invalid', helper: 'cl
AngularJSのテスト(Unit Test/end-to-end test)って何が良いの？ - Qiita
AngularJSを利用したのなら、絶対にKarmaとか Protractorを活用すべきです。ちゅうか、活用しなさい。と言いたいです。システムを保守フェーズに安定的にメンテナンスするならそう考えるのがふつうになるべき。 （※Protractorについては、こちらの記事がとても参考になります） 例によって「Mastering web application development with AngularJS」を読んで書かれていたポイントを読んだ感想をこちらにまとめてますが、 2章のテスト解説部分に下記の文章があります。 There is a quote saying that writing code without a Version Control system (VCS) is like skydiving without a parachute. Today one would
Protractor × CoffeeScript × AngularJS （導入編） - Qiita
npm install --save-dev coffee-script npm install --save-dev protractor npm install --save-dev grunt-protractor-runner npm install --save-dev protractor-coffee-preprocessor npm install --save-dev grunt-exec coffee-script CoffeeScript のコンパイラ はじめ -g で入れていたのだがプロジェクトの中に入れないと使えなかった protractor angularJS 御用達の E2E テストフレームワーク selenium を angularJS プロジェクトで使えるようによしなにカスタマイズしている grunt-protractor-runner protracto
AngularJS用テストフレームワーク「Protractor」チュートリアル日本語訳 - Qiita
Protractorとは、AngularJSアプリケーションのためのエンド・トゥー・エンド（E2E）テスト・フレームワークです。これはProtractor Tutorialの日本語訳です。 チュートリアル これはシンプルなチュートリアルです。内容は、Protractorをセットアップし、テストを走らせ始める方法です。（訳注：protractorは分度器のことです） 訳注：本チュートリアルのサンプル・リポジトリを作りました。参考になれば幸いです。 準備 ProtractorはNode.jsのプログラムです。動かすには、Node.jsをインストールしておかなければなりません。ProtractorはNode.jsについてくるnpmを使ってダウンロードすることができます。node --versionと打って、Node.jsのバージョンをチェックして下さい。v0.10.0以降でなければなりません。
Protractorの小ネタ - Qiita
AngularJSリファレンスの落ち穂拾いその3ということで、今回はProtractorの小ネタを紹介したいと思います。 手前味噌ですが、Protractorの説明についてはこちらをごらんください。 Protractor: AngularJSの次世代E2Eテストフレームワーク AngularJSの処理の完了を待たない Protractorには、browser.waitForAngularというAPIが用意されています。 このAPIを呼び出すと、AngularJSの描画処理や、$httpによる通信処理、$timeoutによるタイムアウト待ち処理などが完了するまで待つことができます。 Protractorは、要所要所で内部的にこのbrowser.waitForAngularを呼び出しています。 これによりテストを書く人は、AngularJSの処理が完了するまで待つという処理を書く必要がなくなる
こわくない Protractor - Qiita
Angular Advent Calendar 2014 の 17 日目の記事です。Angular そのものではなく、AngularJS 用の E2E テストツールである Protactor について書きます。（日付越えてしまいました。すみません・・・。） Angular チームが作っているという Protractor。Angular アプリの E2E テストをするならこれに違いないと思いつつも、使い始める前はいろいろこわい点がありました。 コードがどこで動いているかわからなくてこわい。 処理がどういう順序で実行されるかわからなくてこわい。 この記事ではこれらの点について説明し、Protractor を自信を持って使えるようになることを目的としています。 読者としては以下のような方を想定します（主に先日の自分）。 Protractor のインストールをして動かしてみた。 日頃から Prom
AngularJSでD3.jsをラップしてみよう. - Qiita
はじめに 以前にも書いたことがあるが、D3.jsをAngularJS向けにラップしたライブラリは下記等がある。 Radian.js http://openbrainsrc.github.io/Radian/index.html Danglue.js http://www.fullscale.co/dangle/ しかしながら、いずれも、特定の用途に特化したAPIの提供であり、D3.jsの表現の幅としては大分狭められてしまう感ある。 良いものが無ければ自分で作ればいいじゃない、ということで、自分でD3.jsとAngularJS向けにラップして好きに使ってしまおう。どうすれば、良い感じでAngularJSとD3.jsが統合出来るか、色々試行錯誤している過程のメモである. 対象 このエントリの対象者は↓な人たちです(狭いなぁ...) データ可視化 + クライアントサイドMVCに興味がある. An
D3.js on AngularJSの実装パターン比較 - Qiita
はじめに 以前, AngularJSでD3.jsをラップしてみようのエントリで, 「いかにしてAngularJSとD3.jsを統合するか」を記載した. その後, 自分で幾つかAngularJSとD3.js両方を使ったApplicationを作ったり, http://alexandros.resin.io/angular-d3-svg/ のブログを読んだりした上で, 双方のライブラリ両方を使う際の知見が増えたので, これを機にもう一度整理してみようかと. ライブラリとしての比較 AngularJSとD3.js, 双方を触ってみて思うのは, 特にコアな部分について, 備えている機能が重複していたり, 同等機能への実装アプローチが異なるなぁ、ということ. # 比較項目 Angular's way D3's way
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Angular.js入門 (5)ディレクティブ その2 - Qiita
Protractor: AngularJSの次世代E2Eテストフレームワーク - Qiita
gulpとprotractorでAngularJSを自動テストする - Qiita
Yeomanを使ったAngularJSアプリをチームで共同開発して公開するまで - Qiita
