Playwright MCPを使ってE2Eテストを楽に書く
ナレッジワークでは、お客様に安定したサービスを提供するため、E2Eテストを活用した品質保証に取り組んでいます。ただし、E2Eテストの開発・保守には多くの時間と労力が必要で、正直なところ手間だと感じる場面も少なくありません。本記事では、そうした課題を Playwright MCP を活用して解消した取り組みをご紹介します。 ※ Playwright MCP は Playwright をAIエージェントなどから実行し、ブラウザ操作を行えるようにする MCP（Model Context Provider）です 課題 主に次の3点に課題がありました。 ロケーターの記述に手間がかかる テストケースの記述に手間がかかる テストのデバッグに時間がかかる それぞれ具体的に説明します。 ロケーターの記述に手間がかかる E2Eテストでは、ページ上で行いたい操作に必要なボタンやインプットなどのロケーター（セレク
Building a C compiler with a team of parallel Claudes
Published Feb 05, 2026 We tasked Opus 4.6 using agent teams to build a C Compiler, and then (mostly) walked away. Here's what it taught us about the future of autonomous software development. Written by Nicholas Carlini, a researcher on our Safeguards team. I've been experimenting with a new approach to supervising language models that we’re calling "agent teams." With agent teams, multiple Claude
モダンなフロントエンドにおけるテストについて ［Modern Featured Test］ | gihyo.jp
本連載について はじめまして！ サイボウズ フロントエンドエキスパートチームのnus3です。 本連載では、Webフロントエンドに関してもう一歩踏み込んだ知識について、サイボウズフロントエンドエキスパートチームのメンバーによって不定期で解説記事を掲載しています。 本記事では、モダンフロントエンドにおけるテストについて、その種類や導入方法などを紹介します[1]。 モダンフロントエンドでのテスト ここ数年のWebフロントエンドでは次のように、さまざまな変化がありました。 ReactやVue.jsといった宣言的UIを採用したライブラリの普及 TypeScript中心としたエコシステムの発展 ES Modulesの採用の広がり ViteやSWC、RspackやTurbopackなどの新しいビルドツールの登場 この変化に合わせて、Webフロントエンドを対象にしたテストのツールや手法も増えてきました。
Appleが提唱した「AIの推論能力の限界」にAI専門家が反論
「AIの推論能力は過大に宣伝されている部分があり、言うほどではない」と指摘するAppleの論文に対して、AI専門家が「Appleの調査結果のほとんどは基本的な推論の限界ではなく、実験的な設計上の欠陥」と反論する論文を発表しました。 The Illusion of the Illusion of Thinking A Comment on Shojaee et al. (2025) https://arxiv.org/html/2506.09250v1 New paper pushes back on Apple’s LLM ‘reasoning collapse’ study - 9to5Mac https://9to5mac.com/2025/06/13/new-paper-pushes-back-on-apples-llm-reasoning-collapse-study/ 2025年
Storybook Play functionでAHA testingのすゝめ - LayerX エンジニアブログ
バクラク事業部でソフトウェアエンジニアをしている @ta1m1kam です。 フロントエンド開発において「どのテストをどれだけ書くべきか？」という問いは、誰もが一度は悩むテーマです。ユニットテスト？E2Eテスト？ビジュアルリグレッション？それぞれに役割があり、バランスが求められます。 Testing Trophy そんな悩みに対する一つの指針として、Kent C. Dodds氏が提唱した 「Testing Trophy（テスティング・トロフィー）」 という考え方あります。（提唱自体は2021年ごろなので、今では割と一般的になっているかなと感じています。） kentcdodds.com ポイントは「ピラミッド」ではなく「トロフィー」 この考えでは「最も費用対効果が高いのは統合テスト」だと指摘しています。 実際、アプリケーションでのユースケースを1つのコンポーネント単位でシナリオベースに検証で
E2Eテストにおける要素選択のベストプラクティス
こんにちは。Autifyの品質エバンジェリストの末村です。 もう5年前にもなりますが、なぜE2Eテストでidを使うべきではないのかという記事を書きました。この記事はありがたいことに長い間閲覧されており、弊社ブログの人気コンテンツの一つとなっています。 一方で、5年という歳月はソフトウェア開発のトレンドを変化させるには十分すぎるほどに長いです。テストツールの面では Playwright が新たな選択肢として加わった他、 testing-library によるアクセシビリティ属性を用いた要素探索が新たなベストプラクティスとして登場しています。 この記事では、E2Eテストにおける要素探索の考え方の変遷をおさらいしつつ、ベストプラクティスについて説明します。 要素選択の考え方 まずは、要素選択の考え方についておさらいしておきましょう。要素選択とは、読んで字の如く、Webページ内の特定の要素を探すこ
自分のコーディングスタイル(TDD/DDD/FP)をAIに叩き込む
AI に自分のスタイルでコードを書かせたい。 自分のコーディングスタイルを端的にまとめると、たぶんこう。 TDD でミニマルにはじめるのが好き でも DDD で段階的にドメインモデリングもしたい 実装は関数型ドメインモデリングに寄せる これをAIに叩き込みたい。資料を読ませてプロンプトを作って、それにそって実装させる。 エヴァンスのDDDと軽量DDDの2つでやらせてみる。 コードはここ 自分のコーディングスタイルに合わせたプロンプトを作成する MCPエージェントで検索とURL展開を使える状態で次のように指示をした。(自作ディープサーチみたいなもの) インターネットでDDDについて調べさせる インターネットで関数型ドメインモデリングについて調べさせる インターネットでTDDについて調べさせる プロンプトとして使えるように要点を圧縮しろ 端的に圧縮しろ もっと圧縮しろ で、でてきたのがこれ。こ
生成AIが自律的にテストを生成、実行しバグや脆弱性を発見してくれる「Spark」、Code Intelligenceが正式リリース
生成AIが自律的にテストを生成、実行しバグや脆弱性を発見してくれる「Spark」、Code Intelligenceが正式リリース ドイツのCode Intelligence社は、生成AIが人間の介在なしに自律的にソフトウェアテストを生成し実行することで、対象となるソフトウェアのバグや脆弱性などを発見してくれるAIテストエージェント「Spark」の正式リリースを発表しました。 Meet Spark, an AI Test Agent That Autonomously Uncovers Vulnerabilities!!#AI #AITESTAGENT #CIFUZZ #SPARK #TESTING #SECURITY #SOFTWAREhttps://t.co/wr6CBydIA6 pic.twitter.com/RApYEHsXAH — Code Intelligence (@CI_F
ローカルで GitHub Actions が実行できる act のお作法を整理する
はじめに GitHub Actions (GHA) 、便利ですね。 便利なんですが、動作確認するのに PR 出してマージするのが煩わしい...。そもそも PR する前に動作確認しておきたいし、やたらに PR 作りたくもない...。 そんな悩みを解消してくれるのが act でした。これならローカルで動作確認できるので GHA 開発が捗ります！！ act 使ってみた記事は沢山ありますが、動かすまでに詰まったポイントをお作法として整理 してみました。act の使い方に悩まれている方の参考になれば幸いです。 2024/5/8 追記 act の実行に IAM ロールに追加設定が必要な点を追記しました。 AssumeRole するために sts:TagSession 権限を付与する 対象読者 GitHub Actions を使っている / 使おうとしている方 GitHub Actions の動作確認に
生成AIが人間の介在なしに自律的にソフトウェアテストを生成し実行、バグや脆弱性を発見してくれるAIテストエージェント「Spark」登場
生成AIが人間の介在なしに自律的にソフトウェアテストを生成し実行、バグや脆弱性を発見してくれるAIテストエージェント「Spark」登場 ドイツに本社を置き、コード分析ツールなどを提供するCode Intelligence社は、起動すればあとは生成AIが人間の介在なしに自律的にソフトウェアテストを生成し実行することで、対象となるソフトウェアのバグや脆弱性などを発見してくれるAIテストエージェント「Spark」を発表しました。 An exciting milestone in software security testing: ???? ???????????? ???????? ?????, ??? ?? ???? ????? ???? ????? ???? ??????? ????? ???????????! Read the PR: https://t.co/wfuautln8i#AI
音を鳴らす
JavaScriptで音を鳴らすことができます。ご自分の耳が何Hzまで聞こえるか試してみてください（23000Hzまで聞こえたというかたがおられたので24000Hzまでに増やしてみました）。 1000 Hz Stop 4000 Hz 8000 Hz 10000 Hz 11000 Hz 12000 Hz 13000 Hz 14000 Hz 15000 Hz 16000 Hz 17000 Hz 18000 Hz 19000 Hz 20000 Hz 21000 Hz 22000 Hz 23000 Hz 24000 Hz 仕組みはソースを見てください。ほぼChatGPT 4oに書いてもらいました。最初はボタンの数が少なかったこともあってChatGPTはボタン一つ一つに id を付けていたのですが、ボタンの数が増えると厄介なので、this を使ってくださいと指示したら、こうなりました。
Vitest公式になったeslint-plugin-vitestを導入して、適切なVitestのお作法を学んでみる
import vitest from "@vitest/eslint-plugin"; export default [ { files: ["tests/**"], // or any other pattern plugins: { vitest }, rules: { ...vitest.configs.recommended.rules, // you can also use vitest.configs.all.rules to enable all rules + // e.g. 'vitest/no-test-return-statement': 'error', + "vitest/max-nested-describe": ["error", { "max": 1 }] // you can also modify rules' behavior using optio
Node.jsで型安全な環境変数を扱うスニペット
Node.js で型安全な環境変数を扱うスニペットを作りました。 next devのようなアプリケーションの起動、Playwright でのテストなどコマンドごとに渡したい環境変数のセットが異なるケースがあります。 この場合に環境変数をまとめたものを定義して、それをコマンドごとに読み込むセットを変えたいことがあります。 次のようにベタ書きしてもいいのですが、渡したい環境変数が増えると管理が大変になります。 NEXT_PUBLIC_LOCALHOST_URL=http://localhost:3000 NEXT_PUBLIC_API_URL=http://localhost:3001 NEXT_PUBLIC_IS_TEST_MODE=false FOO="bar" next dev そのため、.envのような環境変数をまとめたファイルを使いたくなります。 Node.js は--env-fil
Storybook 8.2
Storybook is the component workshop behind the world’s top design systems (Carbon, Polaris, Fluent, Lightning, etc.). Accordingly, it is often associated with building and documenting atomic components for reuse. But UI components come in many sizes and shapes. For teams at Faire, Yoobic, and Monday.com, Storybook is the tool of choice for “product UI” such as shopping carts, dashboards, chat widg
［動画で解説］和田卓人の“テスト駆動開発”講座：第4回 ナントカテスト ―― ユニットテスト，単体テスト，機能テスト，結合テスト，受け入れテスト｜gihyo.jp
［動画で解説］和田卓人の“テスト駆動開発”講座 第4回ナントカテスト ―― ユニットテスト、単体テスト、機能テスト、結合テスト、受け入れテスト ニコニコ動画：https://www.nicovideo.jp/watch/sm2195489 前回、テストをDeveloper Testing、Customer Testing、QA Testingの3つに分類しました。ここまでで何か質問はありませんか？ 担当からの質問 「受け入れテスト」というのはCustomer Testなんですか？ はい、そうです。 テストというと、よく「○○テスト」という言葉を聞くと思います。たとえば「受け入れテスト」以外にも、「ユニットテスト」「単体テスト」「機能テスト」「結合テスト」など、いろんな何々テストという言葉があります。質問にお答えする前に、まずテストの分類に対する視点を整理しましょう。
TypeSpec、Orval、Storybook を使ってフロントエンドのモック生成を自動化する
はじめに フロントエンド開発において、効率的かつ一貫性のあるモック生成は非常に重要です。本記事では TypeSpec、Orval、Storybook の 3 つのツールを使用して自動生成でモックを実現する方法を紹介します。 TypeSpec は、大規模な API を提供するために Microsoft が開発し、使用している新しい API 記述言語です。 Orval は、OpenAPI 仕様から TypeScript のクライアントコードを生成するツールです。これにより、最新の API 仕様に基づいたクライアントコードを常に保持し、API との通信がスムーズに行えるようになります。 Storybook は、コンポーネントを独立して開発・テストするためのインタラクティブなツールです。コンポーネントの見た目や動作を個別に確認できるため、UI の一貫性を保ちながら効率的に開発を進めることができます
Poku
🐷 What's Poku?A cross-platform test runner that brings the JavaScript essence back to testing. ⚡️ Quick Tutorials
GitHub - kolodny/safetest
Safetest is a powerful UI testing library that combines Playwright, Jest/Vitest, and React for a powerful end-to-end testing solution for applications and component testing. With Safetest, you can easily test the functionality and appearance of your application, ensuring that it works as expected and looks great on all devices. Safetest provides a seamless testing experience by integrating with yo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
テストコード品質を高めるためにMutation Testingライブラリ・Strykerを実戦導入してみた話
Meticulous AI - Automated Frontend Testing Without Writing Tests
