Protractorを使ったE2Eテストの準備 - Qiita
はじめに E2EテストとはEnd to End（エンドツーエンド）の略らしいです。最初から最後までということのようです。 ブラウザを使ったテストの自動化のために今回はProtractorを使うことにしました。 ちょうど仕事で担当になった運用サイトがAngular製アプリケーションだったこともあります。 ProtractorはAngular製のサイトに向いているとのことです。ただAngular製ではないサイトでも利用可能です。 Protractorはwebdriver-managerというものを使ってSeleniumを利用します。 準備するものはnodejsです。 前回書いた次の記事でnodejsを用意していただければ動作します。 windows10でnode.jsのバージョンを切り替えて使う( nvm-windows ) 今回はwindows10の環境で進めます。 Protractorの準
Windows環境でProtractor動かしてみる - Qiita
nodeを入れる 入っている方は読み飛ばしてください。 nodeのバージョン管理ソフト「nodist」を入れる 公式サイトからインストーラを取得する。 https://github.com/marcelklehr/nodist#installing-with-the-official-installer 特に問題がなければデフォルトのままインストールする。 参考： http://qiita.com/yokoh9/items/20d6bdc6030a3a861189 Gitクライアントを入れる Gitクライアントにパス通っていれば良い。 無ければ入れる。 Git GUIを入れる。 ここからインストーラを取得する。 http://git-scm.com/download/win 設定を二か所、デフォルトから変更する。 cmd.exe以外からも使うように設定変更する。 checkoutとcomm
protractorでAzure AD ログインしてみる - Qiita
protractor 実行下でAzure AD（以下、AAD）にログインしてみた。 ※AADログイン画面へのURL生成手順等は割愛。 自アプリから画面遷移してAADでログインする際、 browser.driver.sleepを使用してProtractorのコード実行タイミングを調整。 'use strict'; describe('My App', function() { // 認証情報 var EMAIL = "test@test.onmicrosoft.com"; var PASSWORD = "Abc1234567"; // AngularJSを使用していないページでのテストを許可 browser.ignoreSynchronization = true; // AADログイン画面へのURLなどを指定、遷移するページ var LOGIN_URL = "http://localhos
ProtractorとAngularJSではじめてのE2Eテスト - Qiita
この記事は前回からの続きとなります。 AngularJSのE2Eテストといえば、Protractorですね。公式ページにもあるfor AngularJSの記述がなんとも心強いです。 ProtractorはAngularJSのために開発されているだけあり、テスト実行時に何も考えずともAngularJSと同期してくれるという最強に素晴らしい機能を備えています。 何を同期してくれるのか AngularJSはモデルの変更を検知するためにScope Life Cycleという機構を備えています。この機構によりモデルの変更は即座に検知され、同時にビューを最新の状態に保ちます。Protractorはこのライフサイクル中に実行される$digestループの完了を検知（同期）してくれるので、ビューの再レンダリングが完了する前にテスト処理が実行されてしまうといった事態を確実に回避してくれます。 また、$time
gulpでProtractor(Selenium+Jasmine)を動かす - Qiita
ProtractorはAngularJSのためのE2E(End To End)テストのフレームワークです。 AngularJSのための、といっても中身はSelenium(ブラウザの自動操作ツール)とJasmine(javascript用のテストフレームワーク)なので、普通にWebシステムのE2Eテストとして使うことができます。 今回は、Protractorのインストールからgulpで実行するまでについてまとめます。 インストール npm(node.js)とgulpは入っている前提で。 Protractorはnpmからインストールし、webdriver-managerのupdateを実行します。 npm install protractor node node_modules/protractor/bin/webdriver-manager update Protractor単体で動かす S
ProtractorのテストコードをTypeScriptで書く - Qiita
前の記事でProtractorの導入を行いました。 しかし、JavaScriptでそのまま書いていたので、できればTypeScriptで書きたい。 さらにその上で、webpackを使って複数のテストコードをbundle化し、一つのjsファイルにします。 準備 今回使うパッケージを一通り入れておきます。 前回入れたprotractor関連は書いてないので、そちらは前の記事を参考にしてください。 typescript webpack ts-loader gulp gulp-typescript gulp-webpack glob npm install typescript webpack ts-loader gulp gulp-typescript gulp-webpack glob TypeScriptでコードを書く 今回もProtractorのデモサイトを使ったテストコードを書きます。
Ionic + Typescript + Protractor でe2eテストをする - Qiita
過去記事 TypeScriptでモバイルアプリケーションを作ってみる: Ionic準備 Typescriptでモバイルアプリケーションを作ってみる2: Class化、webpack編 Typescriptでモバイルアプリを作ってみる その3 ユニットテスト Karma Protractorでe2eテストする 前回はkarmaでユニットテストを行う方法を紹介しました。ですので今回はprotractorでe2eテストをする方法を紹介します。 モバイルアプリ作成用フレームワークIonicはAngularベースなので、e2eテストはProtractor http://www.protractortest.org/#/を使うのがベストです。ProtractorはそもそもAngularjs用に開発されているので非常に相性が良いためです。一応Protractorを使えば普通のユニットテストも可能ですが、
[Protoractor][E2Eテスト] ブラウザを使用したテストを行う - Qiita
環境 Ubuntu 16.04 必要なもの node.js npm Chromeブラウザ Yeomanとprotractorジェネレータ Yeomanが入っていなければインストールします。 % yo protractor Welcome to the protractor code generator. ? Choose a name for the protractor configuration file protractor.conf.js ? Choose a base URL http://localhost:8000 ? Which browsers do you want to run? Chrome create package.json create protractor.conf.js create spec/example_spec.js create README.
![[Protoractor][E2Eテスト] ブラウザを使用したテストを行う - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/beb0eb93f270e6c190c1cc4f4942248dcf1684c7/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCUHJvdG9yYWN0b3IlNUQlNUJFMkUlRTMlODMlODYlRTMlODIlQjklRTMlODMlODglNUQlMjAlRTMlODMlOTYlRTMlODMlQTklRTMlODIlQTYlRTMlODIlQjYlRTMlODIlOTIlRTQlQkQlQkYlRTclOTQlQTglRTMlODElOTclRTMlODElOUYlRTMlODMlODYlRTMlODIlQjklRTMlODMlODglRTMlODIlOTIlRTglQTElOEMlRTMlODElODYmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPTVjODlmZWNlODdiMDdhMzkwYWYyZTg5YTNiYzI0ZDJk%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBzZW5nb2t1JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1lYWNiYmI4Yzk1MmVkYjkwODY3MTMxMTVkMzMzNGY1Nw%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Dc258c073835b57acf8ad445444cf06b6)
protractorのノウハウあれこれ - Qiita
Protractorを利用していていろいろノウハウが溜まってきたので、残しておきます。 Angular.jsではないフレームワーク(knockout.jsを使ってます)を使って画面を構築しているアプリで、いい感じにテストできるように改善しています。 Angular.jsではないフレームワークで利用するために Angular.jsとの同期を切る まずはAngular.jsとの同期をオフにしておきます。 ProtractorはAngular.js用のE2Eフレームワークなので、Angular.jsの初期化が終わるまで待つ処理がデフォルトで入っています。 Angular.jsを利用していない場合にはオフにしておかないとエラーになります。 また、URLをgetする前に実行しておかないと意味ないので、注意しましょう。 エレメントを取得するとき、エレメントの存在チェックをする knockout.jsな
angular-cli(Protractor)でMicrosoft Edgeのe2eテストをする - Qiita
初心者向け あんまり分かっていないけど、とにかくEdgeでもe2eテストしたい方向けです。 テスト環境 @angular/cli@1.0.0-rc.0 1. 事前準備 今回はEdgeでテストしたいので下記からEdgeのWebDriverをダウンロードし、 ダウンロードしたパスを覚えておく。後で使います。 https://developer.microsoft.com/en-us/microsoft-edge/tools/webdriver/ ※右下 Downloads の Release 14393 をクリックするとダウンロード出来る。 2. protractorの設定 以下の“ここ追加！”の部分を追加、“ここコメントアウト！”はコメントアウトしていく。 // Protractor configuration file, see link for more information // h
Protractorで爆速sendKeys - Qiita
こんにちは。Qiita見る歴3年くらいの @mumum です。 記事を書くのは初めてなので、なまあたたかく見てみてください。 はじめに これはなに？ ここを見てくださっているかたは多分ご存じSeleniumのAngular(JS)向けフレームワークProtractorを使ったe2eUI自動テストに関する、コストパフォーマンス改善の記録をコードを交えて説明させていただきます。 最後まで読むと文字入力部分のテスト時間の短縮方法がわかります。 前提 テスト対象 AngularJSで書かれたソフトウェアのUI テストツール・環境 Windowsで、Protractor上で書いたテストケースをchromedriverで実行しています。 テストフロー テスト対象のUIにinput要素が10000個あるのでそれぞれに、1000キャラクタの文字列を入力していきます。 sendKeys遅い問題 実際に上記条
Protractor,Cucumberjs,ChaiによるAngularアプリケーションのテスト - Qiita
はじめに 株式会社サイシードのインターンシップにて利用しているテストツールについてまとめました。 Protractor,Cucumberjs,ChaiによるAngularjsアプリケーションのテストについて紹介します。 ・Protractor（ http://www.protractortest.org/ ）： アプリケーションのテストを行う場合はProtractorを使いましょう。 ビューの再レンダリングが完了する前にテスト処理が実行されてしまうといった事態を回避してくれます。 ・Cucumberjs（ https://github.com/cucumber/cucumber-js/ ）： 自然言語に近い形で誰にでもわかりやすいテストコードを書くことができます。 featureとstepDefinitionがあり、featureにはテストのステップを書き、stepDefinitionには
アプリとSeleniumの2つのDockerコンテナでE2Eテスト - Qiita
概要 Protractor＋SeleniumによるE2Eテスト導入 →AngularアプリをDocker化 →あれ、E2Eテスト動かなくなってる・・！ となっていたので、Selenium Server, Angularアプリをそれぞれ異なるコンテナ上で起動してテストできるようにしました。 Docker初心者として苦労したので、その時の方法を共有します。 （Protractor、Seleniumコンテナ、docker-composeの詳細は別の記事を参考にしてください） 参考 docker-selenium 使って見た Seleniumコンテナの基本的な使い方を大いに参考にしています 行ったこと docker-composeで以下の構成を作りました テストコードからE2Eテスト実行環境としてSeleniumサーバを指定 E2Eテスト対象としてアプリを指定 Selenium Serverはdo
Protractorのwebdriver.createSessionのエラー対処 - Qiita
ダメだったら CircleCIで、browersを使っているのでfirefoxもインストールされているはず! [06:00:30] I/launcher - Running 1 instances of WebDriver [06:00:30] I/hosted - Using the selenium server at http://localhost:4444/wd/hub [06:01:31] E/launcher - connection refused Build info: version: '3.13.0', revision: '2f0d292', time: '2018-06-25T15:32:19.891Z' System info: host: 'f2e822041889', ip: '172.20.0.3', os.name: 'Linux', os.arch:
Testing Angular apps with Protractor
angularを使用したwebアプリケーションにおけるE2Eテストに関するスライドです。また、こちらは2017年6月16日に行われたD-cubeの資料となっています。
TravisCIで実ブラウザ環境のテストを行う方法 | チャットワーククリエーターズブログ
骨折しました。@kyo_agoです。 今日はTravisCI上で実ブラウザ環境のテストを行う方法を紹介したいと思います。 弊社ではこれまで実ブラウザ環境のテストではTravisCIからProtractorを使ってSauceLabsへ接続してテストを行っていました。 しかし、これには以下のような問題があったため、ProtractorとSauceLabsを使用しない構成へ移行しました。 テストが高頻度で失敗するテストに影響しない部分の修正ですらテストが失敗し、コードの修正よりテストを通すほうが難しい状況になっていました。 （これは社内では「e2eガチャ」と呼ばれ、レビュー依頼のコメントには「e2eガチャ 1/5」と成功率が書かれていました。ちなみに「1/5」はわりといい確率です。悪い時は「1/12」くらいになります） 遅いSauceLabsへの接続時間、WebDriver経由のテスト実行などは
Protractor ＋ mocha ＋ power-assert ＋ TypeScriptを用いてOnsenUIで作成したサイトのE2Eテスト - Qiita
Protractor ＋ mocha ＋ power-assert ＋ TypeScriptを用いてOnsenUIで作成したサイトのE2EテストTypeScriptmochapower-assertProtractoronsenui 概要 『こういったサイトを作ってみたかったんだよ!』 OnsenUIでスマホアプリみたいなサイトを作ってみる より http://qiita.com/igara/items/92d0b58c4df21141429a サイトでもアプリのように動きのあるものを扱っていたとき、 これどうやってテストコード化できるのだろうと疑問に思ったため やってみたという記事です。 ソースは下記のレポジトリにあります。 https://github.com/igara/syonet/ 使ってみたもの Protractor WebDriverとテストフレームワークを繋げてブラウザベー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
iPhone SimulatorでJavaScriptの自動テストを動かす - Qiita
Angular2を使ったサイトのテストで protractorを使うときの備忘録 - Qiita
Protractor 関連のパッケージ - Qiita
