Playwright MCP を使って、自然言語で E2E テストを実行してみた - Qiita
はじめに Playwright MCP を使って、自然言語から E2E テストを実行できるかどうかを試してみました。今回は、デスクトップ版の Claude を利用して、プロンプトを入力してテストを実行してみます。テスト対象のアプリケーションは、ブラウザベースで操作可能な TODO を管理するサンプルアプリを対象としました。 Playwright MCP の詳細については、公式のドキュメントを確認してください。 実行環境 Claude for Mac: 0.9.1 Claude Pro プラン（Free プランでも制限内で、実行はできます） @playwright/mcp: 0.0.9 テスト対象のサンプルアプリについて テストを実行するサンプルアプリケーションは TODO タスクを CRUD できるようなシンプルな WEB アプリです。以下のような機能があります。 タスクを新規作成、編集、
生成AIは日本語の画像をどこまで理解できるのか？ - Qiita
はじめに こんにちは！AI エンジニアのヤマゾーです。 ここ数年生成 AI の進化が目覚ましく、生成テキストの品質だけでなく画像の理解力も各段に向上しつつあります。例えば以下の記事を書いた時の ChatGPT は画像中に書かれた日本語を殆ど読めなかったのですが、現在は難しい漢字もスラスラ読めるようになっています。 その他にも、X ではインフルエンサーの「〇〇を読めた！」「〇〇を扱えた！」という投稿を毎日のように見かけます。中には再現性や新規性が怪しい投稿も含まれるようですが、ここまで活発かつ継続的に多くの進展が報告されるのは異例の事態です。 それでは、現時点における生成 AI は実際どこまで日本語の画像を理解できるのでしょうか？ 本記事ではこの疑問に答えるべく、三大生成 AI である ChatGPT、Gemini、Claude を対象にオリジナルのテストを行い、初学者向けに解説しようと思い
なぜJestのmockライブラリに混乱してしまうのか？ - Qiita
はじめに JavaScriptのモックライブラリでは、 sinon などが有名であるが、テスティングフレームワークに Jest を使ってるならば Jest組み込みのモックライブラリで済ませたほうが学習コスト少なくて済むだろうと思える。 しかし、 sinon の感覚でJestのモックライブラリを使おうとすると違和感というのか、モックへの考え方の違いに気づかされる。 ということで今回は、Jestのモックライブラリの考え方と使い方を整理していきたいと思う。 モックの用語整理とJestモックライブラリの位置づけ モックと一言でいっても、それが指す内容は微妙に異なる。 ここでは、モックを 広義のMock Object と 狭義のMock Object と分けて整理してくれているテスト駆動開発を参考に用語を整理する。 テスト駆動開発では、モック用語を、下図のとおり、テストダブルとそのサブクラスとして
JavaScriptの上限・限界値 - Qiita
JavaScriptの文字列や配列は最長でどこまで格納できるか、気にしたことはありますか？関数は何個まで引数を取れるのでしょうか？ブロックのネストは何段まで？ この記事では、そんな素朴な疑問に答えてみます。 テストに使った環境は、 macOS 12.3.1 (Arm64) Node.js v17.7.2 Firefox Nightly 102.0a1 (2022-05-29) です。当たり前ですが、この記事に載せる数値は環境によって変わる可能性があります。 テストに使ったスクリプト類は https://github.com/minoki/javascript-limits に置いてあります。 文字列の長さ まずは文字列の長さです。 規格には The String type is the set of all ordered sequences of zero or more 16-bit
Docker for Macの新しいファイルシステムVirtioFSを試してみた
2022/03/24追記 この記事内ではIntelチップでVirtioFSを使ったパフォーマンスが低い結果となっていますが、この問題はDocker for Macに起因するものではなくmacOS側にボトルネックがあり、 macOS 12.3で解決されたと報告されています。 https://github.com/docker/roadmap/issues/7#issuecomment-1028943179 背景 Docker for Macのファイルアクセスは遅く、本家のGitHubにもissueがあり長年議論が重ねられてきています。 https://github.com/docker/for-mac/issues/77 https://github.com/docker/roadmap/issues/7 これらの経緯は以前Qiitaにまとめたので興味があれば参照ください。 https://
理想的なStorybookのワークフローとは - Qiita
こちらの記事は、Dominic Nguyen 氏により2018年 5月に公開された『 The Delightful Storybook Workflow 』の和訳です。 本記事は原著者から許可を得た上で記事を公開しています。 あなたのチームのアドオン、コンフィギュレーション、APIといった一連のニーズに合わせてカスタマイズできる事は、Storybookの大きな利点です。しかし、Storybookは指先一つで様々なオプションが操れるが故に、全体像ーStorybookのワークフローを見失いがちです。 今回、私は4つのプロフェッショナルチームとStorybookのメンテナー達にインタビューを行い、彼らの「生産性、セットアップ、メンバーの満足度」のバランスを取るためのコアワークフローを要約しました。この記事では、StorybookでUIコンポーネントを生産するための効率的な反復プロセスについて説明
Androidのテストで利用できるスクリーンショット取得APIのまとめ - Qiita
はじめに Android開発でUIテストを実装していると、画面の表示確認やVisual Regression Test等の用途でスクリーンショットを取りたい場面が出てきます。 しかし、スクリーンショットを取得できるAPIは複数あり、適したものを選択しないと思ったようなスクリーンショットが取れないことがあります。 本記事では、Androidのテストで使用できるスクリーンショットのAPIを紹介し、それらを使うと実際にどのようなスクリーンショットが取れるのかを見ていきたいと思います。 こちらは Mobility Technologies Advent Calendar 2020 の14日目の記事です。 スクリーンショットを取得できるAPI スクリーンショットは以下のAPIを利用して取得することができます。 View#getDrawingCache API level 28からdeprecated
未経験からコロナ禍でも自社開発企業へ転職できました - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? この記事について 24歳(2019年末)でWebエンジニアの転職を決意し、未経験から自社開発企業への転職を成功させた道筋を書いた記事となります。 私と同じように技術力のない未経験エンジニアの方に先にお伝えしますが、毎回志望理由を考えて200社近く応募して受かったのが１社のみです。それくらい現在の未経験からエンジニアへの転職活動は厳しいものとなっております。 追記 記事を評価してくださった皆さんありがとうございました。 目次 1.僕のスペック 2.内定をもらうまでのざっくりとした流れ 3.転職活動に使用した自作のポートフォリオ&GitHu
go modulesとCircle CIのキャッシュを使ってビルド＆テストを高速化する - Qiita
version: 2 defaults: &defaults jobs: setup-build: docker: - image: golang:stretch working_directory: /workspace environment: GOPATH: / GOCACHE: /.cache/go-build GO111MODULE: "on" steps: - run: go env - checkout - restore_cache: keys: - go-module-cache-v1-{{ checksum "/workspace/go.sum" }} - go-module-cache-v1- - run: go mod download - save_cache: key: go-module-cache-v1-{{ checksum "/workspace/go.
Storybook6をVue.jsのプロジェクトに導入し、新機能であるStorybook Argsを活用してVue.jsのDXを最高にした話 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 最近iCAREさんの所でVue.jsを一緒にやらせていただいているのですが、フロントの技術スタックがかなりモダンであり、開発体験が良く、ノウハウをどんどん公開して良いと言っていただけたので、その内容を共有するシリーズです. 今回は2日前にリリースされたStorybook6をVue.js + TypeScriptのプロジェクトに導入した話をします(執筆時点). 前置き Storybook自体はずっと使っていたのですが、6系に関してはbetaの頃からrfcとreleaseノートを全て追っかけて追っかけはじめ、使っていました. そし
TypeScript 3.7の`asserts x is T`型はどのように危険なのか - Qiita
TypeScirptの動向を少し熱心に追っている方ならば、8月頭にAnders HejlsbergさんがTypeScriptリポジトリに次のプルリクエストを出したことは記憶に新しいでしょう。 Assertions in control flow analysis これはTypeScript 3.7で導入される予定の機能で、関数の返り値の型宣言においてasserts x is T （xは引数名でTは型）という構文を書くことが可能になるというものです。 この機能はたいへん面白いのですが、誤った使い方をするととても危険です。そこで、この記事では、assertsという新しい型述語1を正しく使いこなせるように皆さんをガイドします。 3行でまとめると assertsによる宣言はTypeScriptにより正しさがチェックされるわけではありません。 よって、assertsを使う場合安全性を保証する責任はコ
スナップショットテスト実戦投入 / Practical Snapshot Testing
2019年9月7日に行われたiOSDC Japan 2019 Day2での発表資料になります。 ## 補足 本資料内での「スナップショットテスト」という単語は、より一般的には「画像ベーステスト」や、「ビジュアルリグレッションテスト」と呼ばれています。 ## 参考リンク・書籍 株式…
DI って何でするのかわからない人向けに頑張って説明してみる「本来の意味」 - Qiita
DI (依存性注入) って何のためにするのかわからない人向けに頑張って説明してみる を、単体テストにフォーカスしたら単体テストが本来の目的では無い的なコメントが散見されました。 確かに DI コンテナは元々は SOLID 原則の D に該当する依存性逆転の原則 (Dependency inversion principle) の「具体ではなく、抽象に依存しなければならない」に大きく関係するものになります。 Wikipedia から引用します。 ソフトウエアモジュールを疎結合に保つための特定の形式を指す用語。 この原則に従うとソフトウェアの振る舞いを定義する上位レベルのモジュールから 下位レベルモジュールへの従来の依存関係は逆転し、結果として下位レベルモジュールの 実装の詳細から上位レベルモジュールを独立に保つことができるようになる。 例えば以下のように上位レベルのモジュール（Present
DI (依存性注入) って何のためにするのかわからない人向けに頑張って説明してみる - Qiita
追記 2022/11/12 追記 この記事読んで、DI 便利だなって思ったらこちらも併せて読んでみてください。クリーンアーキテクチャーの開設の中で依存性逆転の説明が出てきます。難しいかもしれませんが、一度理解すればつぶしが効く考え方なので腰を据えて読んでみてください。 本文 ここでは、最近のそこそこの規模のアプリだと大体使われてる（と私は思ってる）Dependency Injection（DI）について、何故使ってるのか？というのを私の理解で書いていきたいと思います。 今回の対象言語は C# ですが、DI 使ってる言語であれば大体同じ事情なのかなと思います。 単体テストしたいよね アプリケーションを作るとうまく動いているかテストをすると思います。 たとえ、そのアプリがハローワールドだとしても動かして目視で確認してると思います。 もうちょっとアプリの規模が大きくなってくるとクラス単位やクラス
WPTをChromeで実行してHTML5 APIを理解する - Qiita
WPTとは WPT (web-platform-tests)という、ブラウザを作っている人のためのテストスイートがある。これは、ブラウザがどう動くべきかを定義している様々なWeb標準を、各ブラウザが満たしていてるかを確認するためのテストなのだが、Webサイトを作っているWebデベロッパーが新しいWebのAPIをどう使ったらいいかを調べるときにも役立つと思う。 という話を、電車で横に座っていたとある人に話したら「じゃあ、やり方を(日本語で)紹介してくださいよ。」と言われたので、簡単に紹介したい。 手軽に試す 手軽に試したければ、https://w3c-test.org 以下にある目的のテストファイルを開くといい。 例えば、Service Worker Navigation Preloadのテストであれば https://w3c-test.org/service-workers/service
リモートワークで実機が無くてもネットワーク機器ベンダーの製品を体験できるサイト - Qiita
はじめに## 昨今の事情でリモートワークを余儀なくされているケースも出てきているのでは思うのですが、そんな時だからこそ自分が触ったことのないネットワーク機器がどんなもんか調査するチャンスでもあります。 とは言いつつも最近はクラウド上にベンダー製品のコンパネがあって機器検証とか普通にできるよ!!って人も多いと思いますが・・・。 ※自分もCisco Merakiあたりは普通に設定したり見たりしてます。 本記事では実物の機器が無くてもどんなものか調査したり確認できるよってサイトを記載してみます。 Cisco Devnet### CiscoSystems社の製品に特化した内容以外にもPython等の技術の基礎コース等も無償で提供してくれているサイト。 Cisco.com IDを持ってなくともGithubやGoogleのアカウントを持っていれば入れたりする。 自分はCisco.com ID持っている
技術的負債を作らないためのReact Hooks入門 - Qiita
React Advent Calendar 2019 - Qiita の 12/4 です。12/5も終わろうとしていますが、僕の中ではまだ12/4です…。ほんとすみません…。 さて、技術的負債は、常に注意深く設計しない限り、必ず積み重なっていくものです。ウェブフロントエンドを含めたGUI開発では、テストがかかれないことも多いため、技術的負債を作らないために、React Hooks入門記事を書いてみました。 もっと詳しく！とかここが分からない！とかがあればぜひコメントなりいただければ、追記できる気力がある限り追記していきたいと思います。 サンプルコードは https://github.com/erukiti/react-hooks-without-debt に置いています。 React Hooks の基本 React Hooksの考え方や個々のAPI仕様に関しては、公式ドキュメント を読むと
テストの可読性と保守性を改善したいよねって話 - Qiita
この記事は NIJIBOX Advent Calendar2019 の20日目の投稿です。 #背景 この記事は「仕様の変更に強いコードを書きたいよねって話」のテストについて掘り下げたお話になります。 題材は「ページネーションにおける関数」です。 ※ 以下currentは現在いるページ、totalは総ページ数、sizeはページネーションの表示するページサイズを指します。 #書くこと ページネーションのロジック部分のgetPageNums関数のテストコードがわかりにくかったのでクラス設計を導入し、修正した。 テストコードを書くときに気をつけたいぞい！ってこと #参考にしたもの テスト駆動開発(TDD)の第一人者のtwadaさんにアドバイスをいただきました、ありがとうございました！ 書籍「リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック」 #手順 テストには、Faceb
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Reactでレンダリング回数やレンダリングにかかる時間をユニットテストでテストできるライブラリを開発しました - Qiita
Rustのツール周りがモダンだって話 - Qiita
