اتوماسیون مرورگر با کلاد و Playwright

۱۲ آبان ۱۴۰۵

کلاد فقط کد نمی‌نویسد؛ اگر Playwright را به آن وصل کنید، یک مرورگر واقعی را باز می‌کند، کلیک می‌کند، تایپ می‌کند، صفحه را می‌خواند و اسکرین‌شات می‌گیرد. شما به فارسی می‌گویید چه می‌خواهید و کلاد خودش در مرورگر انجامش می‌دهد. نصبش یک دستور است.

نصب

1. Node.js نسخه ۱۸ یا بالاتر را نصب کنید. برای بررسی، در ترمینال node -v را بزنید.
2. Playwright را به کلاد اضافه کنید (در ویندوز در PowerShell، در مک و لینوکس در ترمینال):

   gclaude mcp add playwright -s user -- npx @playwright/mcp@latest

   با -s user در همه پوشه‌ها در دسترس است، نه فقط پوشه فعلی.
   در ویندوز اگر playwright در /mcp وصل نشد، آن را با gclaude mcp remove playwright -s user پاک کنید و این‌طور دوباره اضافه کنید:

   gclaude mcp add playwright -s user -- cmd /c npx @playwright/mcp@latest

3. gclaude را اجرا کنید، /mcp را بزنید و ببینید playwright وصل شده باشد.
4. بار اول مرورگر خودش دانلود می‌شود. اگر نشد، یک بار npx playwright install chromium را اجرا کنید.

نصب در مرورگر کروم

به‌طور پیش‌فرض کلاد یک مرورگر جدا و خالی باز می‌کند که در هیچ سایتی وارد نشده‌اید. اگر می‌خواهید کلاد در همان Chrome که الان باز است کار کند، با همان حساب‌هایی که در آن‌ها وارد شده‌اید، ساده‌ترین راه این است که gclaude را باز کنید و این پیام را در آن بچسبانید تا کلاد خودش همه چیز را راه بیندازد:

Set up Playwright so you can work in the Chrome I already have open:
1. Check my operating system, and check with node -v that Node.js 18 or newer is installed. If it isn't, install it (Windows: winget install OpenJS.NodeJS.LTS, macOS: brew install node).
2. If playwright is in gclaude mcp list, remove it with gclaude mcp remove playwright -s user.
3. Add it with gclaude mcp add playwright -s user -- npx @playwright/mcp@latest --extension. On Windows, use cmd /c npx instead of npx.
4. Open this page in Chrome so I can install the Playwright MCP Bridge extension: https://chromewebstore.google.com/search/Playwright%20MCP%20Bridge
5. Finally, briefly tell me what you did and what is left for me to do.

بعد از آن فقط سه کار با خودتان است: در Chrome Web Store دکمه Add to Chrome را بزنید، gclaude را ببندید و دوباره باز کنید، و بار اول که کلاد سراغ مرورگر می‌رود، تبی را که می‌خواهید در اختیارش بگذارید انتخاب کنید.

اگر ترجیح می‌دهید خودتان قدم‌به‌قدم انجامش دهید:

1. افزونه Playwright MCP Bridge را از Chrome Web Store در Chrome نصب کنید.
2. اگر Playwright را قبلاً اضافه کرده‌اید، اول پاکش کنید:

   gclaude mcp remove playwright -s user

3. دوباره با --extension اضافه‌اش کنید:

   gclaude mcp add playwright -s user -- npx @playwright/mcp@latest --extension

   در ویندوز اگر وصل نشد، npx را به cmd /c npx تغییر دهید.
4. بار اول که کلاد سراغ مرورگر می‌رود، افزونه در Chrome می‌پرسد کدام تب را در اختیارش بگذارد. تب را انتخاب کنید و تأیید کنید.

در این حالت کلاد هر کاری که شما در آن مرورگر می‌توانید بکنید، می‌تواند بکند. پس فقط برای کارهایی از آن استفاده کنید که واقعاً به حساب‌های شما نیاز دارند.

با کلاد و مرورگر چه کارهایی می‌شود کرد؟

کارهای تکراری و جمع‌آوری انبوه داده از وب

• پر کردن فرم‌های تکراری: ثبت ده‌ها مورد در یک پنل ادمین یا فرم‌های ثبت نام، از روی یک فایل اکسل.
• جمع‌آوری انبوه داده از وب: قیمت محصولات، آگهی‌های شغلی یا فهرست مقاله‌ها، مرتب در یک فایل CSV.
• مقایسه محتوا با فایل: «همه صفحه‌های محصول را باز کن و قیمت و توضیحات را با فایل اکسل مقایسه کن؛ هر جا فرق دارد فهرست کن.» برای فروشگاه‌ها بعد از هر به‌روزرسانی قیمت.

تست و رفع باگ

• تست سایت خودتان: مسیر ثبت نام و پرداخت را از اول تا آخر طی کند و هر خطا را با اسکرین‌شات گزارش بدهد.
• بازسازی باگ: «این باگ را که کاربر گزارش داده بازسازی کن: وارد شو، سبد خرید را پر کن و دکمه پرداخت را بزن؛ خطای کنسول و درخواست‌های شبکه را بیاور و علتش را در کد پیدا کن.» از مرورگر مستقیم به رفع باگ در کد.
• نوشتن تست خودکار: از کاری که همین الان در مرورگر کرد یک تست Playwright بنویسد تا در CI هر بار اجرا شود.
• تست در چند اندازه صفحه: «فرم ثبت نام را در سایز موبایل، تبلت و دسکتاپ امتحان کن و هر جا دکمه یا متن از صفحه بیرون زده گزارش بده.»
• مقایسه ظاهر دو نسخه: «صفحه اصلی سایتم را با نسخه staging مقایسه کن و هر تفاوت ظاهری را با اسکرین‌شات نشان بده.» برای پیدا کردن استایل‌های خراب قبل از انتشار.

گزارش، SEO و مستندات

• اسکرین‌شات و PDF: «از این ۲۰ صفحه سایت در سایز موبایل و دسکتاپ اسکرین‌شات بگیر و یک PDF گزارش بساز.» برای نشان دادن کار به کارفرما یا نگه داشتن سابقه.
• بررسی SEO و دسترس‌پذیری: «سایتم را باز کن و بررسی کن کدام صفحه‌ها title، description یا alt عکس ندارند و لینک شکسته دارند؛ گزارش بده و درستشان کن.»
• نوشتن راهنما: «مراحل ساخت حساب در پنل ادمین را انجام بده و از هر مرحله اسکرین‌شات بگیر، بعد یک راهنمای فارسی قدم‌به‌قدم بنویس.» برای راهنمای کاربران و آشنا کردن همکاران تازه.

سه نمونه کاربردی

• «یک فروشگاه اینترنتی را باز کن و نام و قیمت ۱۰ لپ‌تاپ اول را در فایل laptops.csv بریز.»
• «سایت من روی localhost:3000 را باز کن، ثبت نام را با یک ایمیل تستی انجام بده و هر خطایی دیدی با اسکرین‌شات گزارش کن.»
• «از کاری که الان کردی یک تست Playwright بنویس و اجرایش کن.»

چند نکته ایمنی

• Playwright به‌طور پیش‌فرض یک پروفایل جدا از مرورگر اصلی‌تان باز می‌کند و کلاد به حساب‌های شخصی‌تان دسترسی ندارد. با --extension این جدایی برداشته می‌شود؛ فقط وقتی لازم است از آن استفاده کنید.
• رمز عبور و اطلاعات کارت را به کلاد ندهید؛ این قدم‌ها را خودتان انجام دهید.
• قوانین سایت‌هایی را که از آن‌ها داده جمع می‌کنید رعایت کنید و درخواست‌ها را پشت سر هم و زیاد نفرستید.

کدام بسته برای کدام کار

کار با مرورگر توکن بیشتری از کدنویسی معمولی مصرف می‌کند، چون کلاد هر صفحه‌ای را که باز می‌کند می‌خواند. برای کارهای سنگین‌تر بسته استاندارد را انتخاب کنید.

قیمت‌ها شامل ۱۰٪ مالیات بر ارزش افزوده است.

دیدن بسته‌ها و قیمت‌ها