DockerでDevOpsな環境を整える ここ数年、炎上してる案件にアサインされてる。。 傾向として、svnでブランチがいっぱい作ってマージでデグレしたり、 Excelでバグ表を管理したり、ガントチャートを手作業で管理したり、 結合テストの段階までプログラムを動かしたテストをしてない、 テストが自動化されていないと惨憺たる状況が見られる。。。 正直、付き合ってられない😭 チンパンジーを相手にしてる気分、 ということで、docker-composeを使って、進捗/バグ管理にRedmine ソース管理と自動テストのためにgitlab,gitlab-runnerの環境を整えてみました。 ソースコードやバグの管理、テストの自動化などに使っていただければ幸いです。 docker-compose.ymlファイル version: "3" volumes: # gitlab関連Volume gitla

GitHub Actions入門 ── ワークフローの基本的な構造からOIDCによる外部サービス認証まで GitHubが公式に提供するGitHub Actionsは、後発ながらよく使われるワークフローエンジンとなっています。本記事では、藤吾郎（gfx）さんが、典型的なCI/CDのユースケースに即したワークフローの設定と管理について解説するとともに、注目されているGitHub OIDC（OpenID Connect）の利用についても紹介します。 GitHub Actionsは、GitHubが提供するCI/CDのためのワークフローエンジンです。ワークフローエンジンは、ビルド、テスト、デプロイといったCI/CD関連のワークフローを実行し、定期実行するワークフローを管理するなど、開発におけるソフトウェア実行の自動化を担います。 ▶ GitHub Actions - アイデアからリリースまでのワーク

Vue.js アプリでユニットテストを書くには、Vue Test Utils や Jest など、知っておくべきことがそれなりにあります。 現在、Vue CLI でアプリを作っていますが、ユニットテストを書くために色々と調べないといけませんでした。 今回はその過程で理解した Vue.js でのユニットテストの基本を以下にまとめます。 Vue.js のユニットテスト まず、Vue.js では何を「ユニットテスト」として考えるのかを整理します。 ユニットテストの単位 Vue.js アプリは、複数のコンポーネントで構成され、それぞれのコンポーネントが連動しながら動きます。 そのため、ユニットテストの単位は「コンポーネント」となり、コンポーネントごとにテストを書いていきます。 何をテストすべきか？ コンポーネントごとにユニットテストを書くということですが、コンポーネントのどの部分に対してテストを書

https://d-cube.connpass.com/event/149831/ スライド中「エンジニアの斎藤」という謎の人物が出てきますが、「エンジニアの採用」の誤記でございました。お詫び申し上げます。

Webエンジニアの森脇です。LCLでは、以前より「Capybara + PhantomJS」でE2Eテストを行っていましたが、「Puppeteer + Headless Chrome」へ変更しました。 元々は、軽くPuppeteerを触ってみるだけのつもりでしたが、できが良く本格的にE2Eテストへ導入することにしました。 本記事では、変更の経緯や、PuppeteerでE2Eテストを実装する上でのTIPSを紹介します。なお、Capybara + PhantomJSを利用したE2Eテストは、以下の記事でご紹介しております。 techblog.lclco.com 変更の経緯 PhantomJSは古めのWebkitをベースにしているため、一部のCSSがうまく適用されず、Headless Chromeへ移行を以前より考えていました。そんな中、PhantomJSの開発が終了したこともあり、移行すること

E2Eフレームワークを触って、特徴を紹介する

2018/02/13追記：「サンプル用のドメインを使おう」の説明に “.example” と “.test” の使い分けについて追記しました。 Web システム開発時のテストデータを作成する時、また各種ドキュメントを書いている時など、サンプルの URL を使う場面は多いと思いますが、その時に適当なドメイン名を使うのはやめましょう、という話です。 知っている方には当たり前レベルの話ですが、意外と IT 企業のシステム開発現場等でも普通に見かけることがまだまだありますので・・・。 よく見かける例 例えば、こんなドメインの URL で開発中システムのテストデータを作っていたり、仕様書に説明が書かれていたりする場面をよく見かけませんか？ test.comaaa.comabc.comsample.comdummy.comhoge.com でも、これらのドメインって存在していて、また実際に利用されてい

docker-composeで日本語対応のHeadless Chromeを「puppeteer」で操作する手順です。 🐡 Dockerfile日本語対応のChromeの入ったDockerfileは次のように記述します。 FROM ubuntu:latest MAINTAINER morizyun <@zyunnosuke> # For Japan RUN sed -i -E "s@http://(archive|security)\.ubuntu\.com/ubuntu/@http://ftp.jaist.ac.jp/pub/Linux/ubuntu/@g" /etc/apt/sources.list # Basic RUN apt-get update \ && apt-get install -y sudo curl wget zip unzip git nodejs npm fon

「2017年夏、ブラウザテストフレームワーク」の続き。 ServiceNowアプリケーションのブラウザテストをしたくて色々調べている。 前回は、フレームワークにWebdriverIOを使うと決めたところまで書いた。 今回、最終的に、WebdriverIO、WDIO、selenium-standalone、Jasmineと、Chromeのヘッドレスモードを使って、Dockerコンテナ(Alpine Linux)上でテストスクリプトを実行して、ServiceNowのログイン画面のスクリーンショットが取れるところまでできた。 そのコンテナイメージのDockerfileはGitHubに置いた。 とりあえずAlpine Linux テスト環境の作成は自宅でやってるけど、DockerイメージにしてDocker Hubとかに上げておけば、社内でダウンロードしてそのまま再現できる。 ダウンロードに係る社内

illustration by iwasawa Selenideとは Selenideとは、エストニアにあるCodeborne社のAndrei Solntsev氏を中心に開発が行われているWebDriverのJavaラッパーの一つで、同じJavaで実装されたFluentLeniumやGroovyでのGebに相当するものです。WebDriverはプログラムからブラウザを操作するAPIを提供していますが、基本的に低レベルAPIで自動テストを記述するには大量のコードが必要となります。SelenideはWebDriverを基盤としながら高水準APIを提供することで、WebDriverを素で使うよりも容易にかつ記述量を抑えてテストを記述することができます。 Selenideの特徴 以下ではSelenideの特徴を述べていきます。これらの中には上記で挙げたFluentLeniumやGebでも提供されて

ひとことで言えば、「レビュー文化は良くない」ということになるだろうか。 Slack導入、そして同時期に開始した服装の自由化、バイモーダルという考え方の浸透、AIやブロックチェーンを活用したPOC等の取り組みによって、SIerとしてのセゾン情報システムズは、社内の雰囲気もずいぶんと変わってきた。 しかし、こうした取り組みだけではどうにもならないものも少なからずあった。 そのひとつは、「悪い報告がしづらい」ことだった。 これは他のSIerでも同様のことが多いのではないかと思うが、問題プロジェクトに認定されると、品質管理部のモニタリングが強化されたり、第三者によるプロジェクト監査が始まったり、経営会議での定期的な報告が求められたり、何をやっているのかとレビューでこっぴどく叩かれたり、、、。 そうした責任感から、遅れをキャッチアップできるよう少しでもがんばろう、と励まし合う中で、それなのに四方から

はじめに 面倒なWEBブラウザの定型作業を自動化したくて。 WEBブラウザの自動操作には定番のSeleniumを利用する。 Seleniumは主にウェブブラウザのテストに利用されているが、テスト用途以外でも利用はできる。 なおウェブスクレイピングが目的であれば、scrapeとかgoqueryなどを利用するほうが簡単。 それでもSeleniumを利用するのは、 実際のブラウザが利用できるという点であり、以下のような利点があると思っている。 IEなど特定のブラウザのみをサポートしているサイトの自動操作 ごりごりのJavascriptやFlashを利用されているサイトの自動操作 証跡として画面のスクリーンショットを取得できる 前提知識 WebDriverを介することで、スクリプトとしてJava,C#,Pythonなど多くの言語から利用できる ブラウザごとにWebDriverが用意されており、１つ

JenkinsのUXをモダンにする新プロジェクト「Blue Ocean」登場。統一的デザインのためのJenkins Design Language（JDL）も開発中 ビルドやテスト、デプロイなどの自動化を実現してくれるツール「Jenkins」は、2カ月前の4月に最新のメジャーバージョンアップ版となる「Jenkins 2.0」が登場したばかりです。 そのJenkinsのUXをモダンで魅力的なものにする新プロジェクト「Blue Ocean」が発表され、ソースコードの公開が始まりました。 シンプルで魅力的なUXへ Blue Oceanの開発理由は、「Introducing Blue Ocean: a new user experience for Jenkins」で次のように説明されています。 In recent years developers have become rapidly attr

2016-8-8 ※webpack単体の記事を書きました。よろしければこちらもどうぞ step by stepで始めるwebpack 2016-5-16 ※karma単体の記事を書きました。よろしければこちらもどうぞ step by stepで始めるKarma 本記事は画面のJavaScriptのテストとかまったくやったことない方 Mocha？webpack？karma？それぞれの解説記事はよく見るけど全体像がよくわからんという方向けです。（数日前の自分です） 全体を通して導入の流れを解説した記事があると全体像が理解しやすいのではと思い書いてみました。 前提 Nodejs,npm,chromeが導入済みであること 流れ Step 表題 目的

ノンプログラマーがはじめてWebサービスを作ってみた記録です。 2016.3.28 追記: リリース1年後について書きました。 はじめてのOSSリリース記 〜なぜ無料でソースコードを公開するのか？ 自己紹介 趣味でたまにプログラムを書く程度のノンプログラマー。 本業は SHIFT（ http://www.shiftinc.jp ） という会社でテスト自動化エンジニアをしています。 20代最後の年に何か新しいことを！と思い立ち、勢いでWebサービスを作ってみました。 作ったもの Chibineko - 世界で最もシンプルなテストツール https://chibineko.jp 面倒なテストはサクッと終わらせよう Chibinekoはテストケースの作成と実行管理を行うためのシンプルなテストツールです。 テスト項目を箇条書きにするだけで、あなた専用のテスト実行ページが瞬時に作成されます。 あとは

クライアントからシステム開発案件を受注し、開発成果物を納品する際に、エビデンスとして、Excel上に貼り付けたスクリーンショット（以下、スクショ）を、成果物の仕様書や納品書と共に納品する場合がある。この作業は、クライアントに「こういったテストを実行しました」という証拠を提示するものとなる。クライアントに成果物の機能や制限事項などを説明する場合に大変に有効なものとなっているのが現状だ。 実際、Excel上に記述したテスト仕様書や納品書にスクショを張り付けて、成果物の一部として納品しておくと、後々何らかのトラブルが発生した場合も問題解決に大きく寄与することになる。 しかし現実問題として、成果物の機能のスクショを、Excel上に手作業で延々と張り付けていく作業は単純作業であることもあり、開発者にとっては苦痛この上ない作業だ。 そこで、そのような作業を自動化し手助けをしてくれるツールとして「Sel

色の正確な認識に影響する要因はたくさんあります。テストの結果が毎回異なる場合は、下記の理由が考えられます。 照明：照明は色覚に大きく影響する要因の一つです。脳が認識する色は、照明色によって左右されていることをご存知でしたか？照明装置などを用いて、常に管理された光源下で色を判断するようにしましょう。 背景色の影響：人間の目が認識する色は、周囲の色に影響されます。この現象を同時対比と呼びます。色を判断する際、常にニュートラル色の環境で行ってください。 目の疲労：私たちの目は疲れやすく、物体を2、3秒以上眺めると目の化学物質が消耗され、間違ったカラー情報が脳に送信されてしまいます。色の目視評価を行う際は、再度観察する前に目を休めてください。 乏しい色の記憶力：どんな色でも、詳細を記憶するのは非常に難しいことです。わずかな色差を効果的に判断するには、サンプルが人の心を動かす程に印象的でなければいけ