簡単！ JavaScriptで自動UIテスト (NodeJS, Selenium Webdriver, WebdriverIO, mocha, gulp) - Qiita
簡単！ JavaScriptで自動UIテスト (NodeJS, Selenium Webdriver, WebdriverIO, mocha, gulp)JavaScriptNode.jsSeleniummochagulp はじめに Webアプリ開発において、UIのテストは手動になりがちで、 専門のQAチームがいないと、なおざりになるケースが多いかと思います。 本記事では、オープンソースウェアのSelenium Webdriverを主軸に 現時点で筆者が最善だと思う 「JavaScriptで自動UIテストを行う」 方法をご紹介します。(ES6準拠) ポイント ワンライナーで実行可能にする (CI向き) テスト修正が容易 (保守性 高) Windows/Mac環境に依存しない (チーム開発向き) 環境 Windows 10 (Version 1607) / macOS Sierra 10.1
面倒な作業も発狂しない！Web制作を超効率化するgulp.jsの始め方（2017年版）
面倒なWeb制作の作業を効率化できるタスクランナー。もう使っていますか？ 現在もっともポピュラーなタスクランナーであるgulp.jsの使い方を解説します。 開発者は、限りある大事な時間をコーディングに費やします。たとえ面倒な会議をさぼっても、仕事時間の大半は地味な作業に奪われています。 テンプレートとコンテンツファイルからHTMLを生成する 新しい画像と変更された画像を圧縮する SassをCSSコードにコンパイルする スクリプトからconsoleとdebuggerのステートメントを削除する ES6をブラウザーとの互換性が高いES5に変換する コードの埋め込みと検証 CSSとJavaScriptファイルの連結と縮小 開発サーバー、ステージングサーバー、運用サーバーにファイルを展開する なにか変更があるたびに、作業は繰り返されます。作業を繰り返すうちに、一番優秀なエンジニアでさえ画像のひとつや
2016年、サーバーサイドエンジニアがゼロからReact/Reduxを学習したときの方法を振り返る
こんにちは。スタジオ・アルカナのサーバーサイドエンジニアなっちゃん(@natsumican63)です。 この記事はReact Advent Calendar 2016の13日目の記事です。 それは2016年も後半へ差し掛かったある日のことでした… 上司「次の案件、この辺の技術使うから軽く勉強しておいてー」 つ React.js + Redux.js + redux-saga + Cordova + ES6 + Babel + OnsenUI + Gulp + Webpack ( ﾟдﾟ) (つд⊂)ｺﾞｼｺﾞｼ (；ﾟ Дﾟ) !?!? (; ﾟдﾟ)「…わ、わかりました」 ※「何でもやります！やらせてください！」が私の口癖なので、決して無茶振りしてくる弊社ではありませんよ！ほんとだよ！！ 斯くして2016年、サーバーサイドエンジニアがはじめてフロントエンドへの門戸を開くこととなった際の学
npm-scripts で Web フロントエンド開発を管理する - アカベコマイリ
gulp なしの Web フロントエンド開発から 1 年あまり。その間、特に問題もなく npm-scripts で Web フロントエンド開発を管理できているので、この間に得られた運用知見や所感などをまとめてみる。 npm-scrips とは？ 最近の Web フロントエンド開発では AltJS/AltCSSのビルドやリリース用イメージ作成などに Node.js + npm を利用することが一般化してきた。そのためプロジェクトは package.json で管理することになる。package.json の提供する代表的な機能として プロジェクト情報の定義 プロジェクトの成果物を npm として配布するための情報 プロジェクト名、バージョン、作者などのメタデータを定義する 依存モジュール管理 プロジェクトが依存する npm とバージョンを管理する この情報へ基づき npm install コ
【Angular2入門】TypeScriptをコンパイルからのWatchifyでファイル結合、ブラウザで動作確認するところまで - Gulpで作るwebフロントエンド開発環境 | PSYENCE:MEDIA
【Angular2入門】TypeScriptをコンパイルからのWatchifyでファイル結合、ブラウザで動作確認するところまで - Gulpで作るwebフロントエンド開発環境 wakamsha 2016.10.03 70 15101629 正式版もリリースされたことだし、そろそろ Angular2 を始めてみませんか？ 2016年9月15日に Angular2 の正式版がしれっとリリースされました。前バージョンの AngularJS 1.x は独自の路線で HTML や Web フロントエンドを拡張するといった志向のフレームワークでしたが、2系は 1.x系の魅力でもある豊富な機能は引き継ぎつつ、より web 標準に寄り添った実装となっているのが特徴です。 One framework. - Angular これまでは β版の期間が続いていたためになかなか手を出せずにいましたが、ここにきてよう
Riot.jsを快適に動かすgulpタスクの話とRiotControlを用いたFluxデザインを実現してみた話 - Qiita
はじめに 仮想DOMのフレームワークが乱立する殺伐としたJS界隈ですが、Riot.jsが神すぎたので少しでも人口が増えればなーと思い書きます。 Riot.js自体の素晴らしさは以下の記事で十二分に伝わると思いますのでこの記事では省略ということで。 Riot.js 2.0 を触ってみた — まだReactで消耗しているの? Riotjsのいいところ また、最後の方に出てくる今回作ったプロジェクトは以下にリポジトリを置いてますので適当にお持ち帰ってくださっても結構です。 gaogao-9/testriot - GitHub 環境説明 今回はタイトルの通り、環境構築の話をメインでしていきます。使用するバージョンは以下のとおりです。 Node.js 6.x npm 3.x gulp 4.x (※執筆時点でβ版です！) babel 6.x Riot 2.x rollup 0.36.x gulp 4.
Jasmine × Karma × Gulp でつくるユニットテスト環境 入門 - AngularJS + TypeScript #3 | Recruit Tech Blog
テストランナーとは、様々なブラウザでテストを実行し、その結果をまとめてレポートするためのツールを指します。Karma は Node.js 上で動作するテストランナーです。元々はTestacular という名称で Google が AngularJS の開発で使うために作ったものですが、2012 年にオープンソース化されたタイミングで業 ( カルマ ) を背負った名称に変わりました。 Karma - Spectacular Test Runner for Javascript 本記事では、Jasmine をベースにしてテストコード ( 実処理 ) を記述し、それらを Karma から実行してレポート ( テスト結果 ) を確認するという流れで進めていきたいと思います。 環境構築 前提条件 Mac OS X Yosemite node.js インストール済み (v5.4.0 ~) npm イン
最近のフロント系ビルドツールまとめ
JavaScriptタスクランナーを広めた Grunt grulnt GruntはRuby製のGuardに影響を受けて、後のタスクランナーに影響を与えました。 grantの設定ファイルは、初期化部分と実行タスクに別れ、それが故にコードが大きくなると可読性＆メンテナンス性が悪くなると言う弊害があります。しかし、タスクの責任範囲が明確になっているので、大きなプロジェクトでは各担当の管理部分がわかりやすいというメリットがあります。 1. グローバルにgruntのCLIパッケージをインストールします。 $ npm install -g grunt-cli 2. プロジェクトのディレクトリに移動し、npmコマンドでpackage.jsonを生成します。 $ npm init 2. gruntのパッケージをインストールします。 $ npm install grunt-contrib -save-dev
gulp-tslintを使ってみた - Qiita
TypeScriptを使い始めているのですが今のとこGulpでタスクを組んでコンパイルしています。で、Lintも当然ほしくなるので入れてみました。 使ったパッケージ gulp-tslint Lint本体 gulp-plumber watch時にLintでこけても止まらないように gulp-notify Lintでこけたときに通知する こんな感じで表示される タスク gulp.task("tslint", function() { gulp.src([ "./ts/**/*.d.ts" ]) .pipe(plumber({errorHandler: notify.onError('Error: TSLint!!')})) .pipe(tslint({ configuration: "Gulp/tasks/config/tslint.json" })) .pipe(tslint.report(
はじめてのVue.js - 単一ファイルコンポーネントを作れる環境構築編 (npm + gulp + browserify + babel + vueify)
はじめてのVue.js - 単一ファイルコンポーネントを作れる環境構築編 (npm + gulp + browserify + babel + vueify) browserifyVue.jsvueifybabel この記事では、Rails や PHP といったサーバーサイドのプログラミングをメインでやっている人向けに Vue.js を用いた簡単な TODO 管理アプリを作るまでを、2回に分けて解説します。 なお、著者の作業環境の都合上、Mac OSX を対象として記事を執筆しています。 1回目では、Vue.js を用いたアプリのモダンな開発環境構築について説明いたします。 Vue.js とは？ Vue.js は「リアクティブなデータバインディング」と「コンポーネントシステム」に主眼を置いたフロントエンド向けの JavaScript ライブラリです。 最も簡単な vue.js の始め方 (
gulp.srcのglobからtsconfig.jsonのfilesを更新するプラグインを作った - Qiita
[追記] Gulpプラグインで受け取れるファイルストリームが順不同で、実行するたびにfilesの順序が変わる可能性がある。 ので、atom-typescriptと同じようにfilesGlobを展開するだけのCLIを作ったのでこっちを使って欲しい。 laco0416/tsconfig-cli Globの展開に使ってるのはatom-typescriptの内部でも使われてるTypeStrong/tsconfigなので、割と信用していいはず。少なくともnpmにある他のtsconfig展開系CLIはどれも独自にglob展開しているので使いたくなかった。 tsconfigに設定を集める、タスクランナーに設定を持たないべきという思想のメモという意味でこの記事は残す @laco0416です。gulp.srcのglobパターンからtsconfig.jsonのfilesを更新するプラグインを作りました。 gu
Gulp + browserify + watchify + gulp-sass で自動高速コンパイル環境
Gulp とは Gulp は Web 制作に関するいろいろな作業を自動化するためのツールです。Sass のコンパイルや Gulp の使用には node.js や Sass などのインストールが必要なので、ちょっと古い記事ですが下記を参考に適当にインストールしてみてください。 browserify とは そんなに詳しくないのですが、browserify はざっくりと言えば js で requireを使えるようにするためのツールです。今までであれば複数の js ファイルが必要な場合、例えば、a.js と、a.js がないと動かないb.js を読み込む場合だと、HTML ファイルに下記のような記述が必要でした。 // index.html <script src=".js/a.js"></script> <script src=".js/b.js"></script> browserify を使
GWに復習したいフロントエンドエンジニア開発系勉強記事まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアの稲葉です。 世間はGWですが「どこかに行く気力もお金もないし、どこに行っても混んでるからもう引きこもるに限る」という方にぜひ読んでもらいたい、LIGブログの技術系記事をピックアップしてみました。 ゴロゴロするだけじゃもったいない！ GWの時間を、知識・技術のレベルアップにあててみませんか？ もちろん旅行や帰省の際の移動時間にもおススメです。携帯でも読めますので！（きっとPC開きたくなっちゃうだろうけど） 開発環境 ちょっと前まではクライアントサイドのビルドツールといえばgruntでしたが、最近はgulpに置き換わりつつあるのかなという印象です。 依存関係の管理もBrowserifyやwebpackと新しいものがどんどん出てきてめまぐるしいですが黒い画面と仲良くなると色々と幸せになれます。 gulpのおすすめ記事 「Gulp.js入門 – コーディングを
Gulp入門 - コーディングを10倍速くする
2014/9/12に行われた週末ランサーズでのGulpハンズオンで使用したスライドです。 LIGブログでこの内容をさらにまとめています。 http://liginc.co.jp/web/tutorial/117900
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
イマドキのコーダー環境構築2016