Vibiumは、ブラウザ操作自動化ツール・Seleniumの作者であるJason Huggins氏の新作だ。

READMEによると、

Vibium is browser automation infrastructure built for AI agents. A single binary handles browser lifecycle, WebDriver BiDi protocol, and exposes an MCP server — so Claude Code (or any MCP client) can drive a browser with zero setup. Works great for AI agents, test automation, and anything else that needs a browser.

と、単一バイナリの中にMCPサーバーを含めてブラウザ操作に必要なものがまとめられているため、Claude CodeをはじめとするMCPクライアントは設定なしでブラウザを操作できるとのこと*1。

また人間がコーディングして利用する場合は、記事執筆時点の2026年2月2日時点ではJS/TSとPythonで利用できるようです。つまり、人間とAIのためのブラウザ操作自動化ツールというわけだ。

AIエージェントによる操作はMCPを追加してあっさり終わってしまうため、今回は実際にJSでコード書いて試してみることにする。

今回やってみること

自作したWebアプリの挙動を検査すべく、ある動作を行いその結果をスクリーンショットで保存する。検証には、こちらのアプリを使う。

booby-ashy.vercel.app

こちらのアプリは広く認知されていて、コントリビュートしやすそうなissueがついたOSSを探すためのものだ。good first issueのラベルがついたissueのあるOSSリポジトリを言語別のStar/Fork数の多い順に表示してくれる。

今回は、

初期表示→ファーストビューで出ている「show detail」のリンクをクリックし、遷移できるか？
言語: Kotlinに変更 → Sort: Forksに変更 → 検索ボタンをクリックし、動作が期待するものになるか？

というシナリオを確認するコードを実装してみる。

Getting Start

プロジェクトフォルダを用意し、vibiumをインストール。

npm init -y
npm install vibium

実装

基本的に、以下を覚えれば大体の操作ができるはず(？)

const vibe = browserSync.launch() ブラウザを立ち上げる
vibe.go() とあるWebページへ移動する
vibe.screenshot() スクショを撮る
vibe.evaluate() 現在のページのDOMを操作する
const element = vibe.find() CSS selectorでとある要素を探す
element.type() テキストを入力する
element.click() クリックする
vibe.quit() ブラウザを閉じる。

これを踏まえて、上述のシナリオを実行するコードはこちら。

const fs = require("fs");
const { browserSync } = require("vibium");

// ブラウザを起動
const vibe = browserSync.launch();

// TOPページのスクショを撮影
vibe.go("https://booby-ashy.vercel.app/");
console.log("Loaded booby");
const png = vibe.screenshot();
fs.writeFileSync("toppage.png", png);
console.log("Saved toppage.png");

// 詳細ページへ移動してスクショを撮影
try {
    const link = vibe.find("a.text-indigo-500");
    const href = link.getAttribute("href");

    if (href) {
        console.log("Navigating to:", href);
        vibe.go(href);
        const detailPng = vibe.screenshot();
        fs.writeFileSync("detail.png", detailPng);
        console.log("Saved detail.png");
    } else {
        console.log("Link href not found");
    }
} catch (e) {
    console.log("Link not found:", e.message);
}

// 検索機能のテスト
console.log("Return to top page");
vibe.go("https://booby-ashy.vercel.app/");
// 入力欄が準備できるまで待つ
vibe.find("#searchbutton");
vibe.evaluate(`
  document.querySelector('select[name="language"]').value = 'kotlin';
  document.querySelector('select[name="sort"]').value = 'forks';
`);
console.log("Selected Kotlin and Forks");
vibe.find("#searchbutton").click();
console.log("Clicked search button");
// 検索結果が表示されるまで待つ
const startTime = Date.now();
while (Date.now() - startTime < 10000) {
    try {
        const url = vibe.evaluate("window.location.href");
        if (url.includes("language=kotlin")) {
            break;
        }
    } catch (e) {}
}
const searchPng = vibe.screenshot();
fs.writeFileSync("search_result.png", searchPng);
console.log("Saved search_result.png");

// ブラウザを閉じる
vibe.quit();
console.log("Done!");