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の準
Atomic Designでのテストを考える【初級】 - Qiita
概要 初Atomic Designを導入して開発をしてて、どこにどうやってテスト書けばいいんだっけ？ という旨の備忘録です。 仕様言語とかツールとか TypeScript React+Redux redux-saga Jest AtomicDesign ※Atomic Designの説明はしません（Atomic Designの説明はこちらが分かりやすいです） ※超初歩&限定的な内容な気がするので、書いてないメソッドやパターンについては適宜調べていただけると嬉しいです 概要 Jestを使います。 やること インタラクションテスト ロジックテスト テスト対象 AtomicDesignにより分類された各コンポーネント 本記事での例題はatomsのButton インタラクションテストする Reducer ロジックテストする 対象外 middleware 別途書く予定です Jestって？ 公式HP
getComputedStyle()がJestで期待通りに動作しない件について - Qiita
import React from 'react'; class App extends React.Component { getWidthFromDiv() { const computedStyle = window.getComputedStyle(this.refDiv); const widthInString = computedStyle.getPropertyValue('width'); const widthInInt = parseInt(widthInString); console.log("div.width:", widthInInt); console.log("window.getComputedStyle(div):", computedStyle); return widthInInt; } getRFromCircle() { const comp
ChromyとPhantomJSによるスクレイピングで困っていること - Qiita
今回は技術Tipsではなく、個人的に試していて壁にぶち当たったのでアドバイスを 誰かから貰えればいいなと思い、記事にしています。 はじめに 環境 ・一般共有不可、SSOを挟んでログインする必要のあるG Suite ・Google ドライブのドライブFileStreamなどインストール不可 ・GASにて、doPost()で受け取ったデータをドライブに保存するウェブアプリ つまり、未ログインの状態から何をするにもログインが求められるという環境だ。 やっていること PCで生成したデータ（JSONなり、CSVなり）を上記G Suiteの環境のドライブにアップロードするべく、GAS製のウェブアプリへpostで通信。 また、これを自動化。 経緯 元々はPhantomJSを使って上記を実現していたのだが、Chromeが正式にヘッドレスモードを実装したこと、それにともないPhantomJSが開発終了したこ
単体テストで開始時にモックサーバを起動し、終了時に停止する: その 2 - Qiita
やりたい事 前回の、単体テストで開始時にモックサーバを起動し、終了時に停止する - Qiita では json-server をライブラリとして使ってサーバを起動・終了する手順を書きました。 json-server はコマンドラインからの実行もできるので、そちらを利用した書き方です。 前回の記事は、mocha 単体では実行できたのですが mocha-webpack を使った時に、うまく動かなかったので、そういう場合の回避策として調べました。 どうやるか child_process.spawn を使ってコマンドを (background で) 起動し、標準出力への出力内容から起動したかどうかを確認します。 終了は、起動時の PID を記録しておき、それを kill することで実現します。 実装例 import * as child_process from "child_process";
単体テストで開始時にモックサーバを起動し、終了時に停止する - Qiita
やりたい事 JavaScript の単体テストで、テスト対象のコードがサーバと通信して JSON 形式で受信を受け取る場合、サーバと通信する部分を置き換えてテストコード内部で完結するようにしたい。 しかし、通信する部分をモックで置き換えるのはしたくないので、テスト用に JSON を返すサーバを立てたい、そしてサーバは開始時に起動、終了時に停止させたい。 どうやるか json-server は こんな感じに サーバの実装をすればできる。 json-server は、パスと返る JSON の内容をコードから指定できるので、テストケースに合わせてテストコード内で修正できる。 実装例 var jsonServer = require("json-server"); var assert = require("assert"); var http = require("http"); describ
Vue.js+Vuexで作成したカウンターアプリのユニットテストを作成する - Qiita
概要 Vue.js+Vuexを利用したカウンターアプリのテストクラスを作成します。テストツールはJestを使用。 この記事では、カウンターアプリのテストとして適切であるかという点よりも、Vue.js+Vuexのテストのサンプルとなるように意識して書いています。 これからテストを書こうと思っている方の参考になれば幸いです。 テスト対象 今回のテストの対象となるコンポーネントとカウンターモジュールです。 Counterコンポーネント カウントされる数値とincrement!と decrement!ボタンが表示されています。 <template> <div> <p>{{ counter }}</p> <button @click="increment">increment!</button> <button @click="decrement">decrement!</button> </div
JavaScriptでコンテンツが生成されるサイトのスクレイピング【Selenium+PhantomJS】 - Qiita
はじめに JavaScriptによってコンテンツが生成されるサイトは、よく使用されるBeautifulSoup4だけではスクレイピングできません。 例えば「最後までスクロールすると次のコンテンツが表示される」といったサイトです。 URLが変化するわけでもないし、どうすればいいのでしょうか…。 そんなときに登場するのがSelenium+PhantomJSです。 背景 さまざまなケースでWebスクレイピングができるようになりたいという想いのもと、今回も『Pythonクローリング＆スクレイピング』という本を参考に実践していきます。 単純に、Webスクレイピングは楽しいです。 やること 「note」というサイトのスクレイピングを行います。 トップページに表示される投稿の タイトル URL 概要 を抽出し、MongoDBやcsv、RSSで保存します。 何ができるのか 以下のようなページからスクレイピ
ブラウザレンダリング後の要素をスクレイピングする - Qiita
自分で作っているプロダクトで、一部他のサイトからスクレイピングをする必要があったものの、JSで動的に生成されている要素だったため、スクレイピングができませんでした。 そのため調べてヘッドレスブラウザを使うことにしたのですが、いろいろあってスクレイピングする必要がなくなり、調べた時間を無駄にしたくないと思いまとめました。。 ヘッドレスブラウザとは 調べてみるとGUIのないブラウザと説明をよく見ます。 ヘッドレス Chrome ことはじめによると下記のような説明がありました。 ヘッドレスブラウザは、GUI を持つ必要のない自動テスト環境やサーバー環境にとてもよいツールです。例としては、実際のウェブページに対してなにかテストを実行する、そのページの PDF を生成する、またはただ、そのページがどう表示されるかを検証するなどが挙げられるでしょうか。 GUIはないけどブラウザが行ってくれている処理を
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Istanbul - おかしなレポートまとめ - Qiita
Istanbulで出力されるレポートのハイライトがおかしい件 - Qiita
Istanbulで出力されるレポートのハイライトがおかしい件 - TS - Qiita
ESLint&mochaで’describe’ is not definedと言われないために - Qiita
楽天市場の商品レビューをスクレイピングして全件取得 - Qiita
TypeScriptとioredisのコードをJestでテストしたらコンストラクタじゃないと言われた件 - Qiita
ESLint&mochaで’describe’ is not definedと言われないために - Qiita
Jestを使ったReact + AtomicDesignユニットテスト【初級】
WebStorm のテスト開発を Live Template でちゃっちゃか書く - Qiita
next の引数指定で saga の call の戻り値を差し替えてテストを進める - Qiita
Capybaraで特定の要素の出現を待つwait処理を考えた - Qiita
