برنامه های افزودنی کروم را با Puppeteer تست کنید

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

قبل از شروع

مخزن chrome-extensions-samples را کلون یا دانلود کنید. ما از نسخه آزمایشی API history در api-samples/history/showHistory به عنوان افزونه آزمایشی خود استفاده خواهیم کرد.

همچنین باید Node.JS را نصب کنید که runtime Puppeteer بر اساس آن ساخته شده است.

نوشتن آزمون شما

مرحله ۱: پروژه Node.JS خود را شروع کنید

ما باید یک پروژه پایه Node.JS راه‌اندازی کنیم. در یک پوشه جدید، یک فایل package.json با محتوای زیر ایجاد کنید:

بسته.json:

{
  "name": "puppeteer-demo",
  "version": "1.0"
}

مشابه فایل manifest.json یک افزونه، این فایل توسط همه پروژه‌های Node مورد نیاز است.

مرحله 2: نصب Puppeteer و Jest

دستور npm install puppeteer jest را اجرا کنید تا Puppeteer و Jest به عنوان وابستگی اضافه شوند. آنها به طور خودکار به فایل package.json شما اضافه می‌شوند.

نوشتن تست‌های مستقل Puppeteer امکان‌پذیر است، اما ما از Jest به عنوان یک اجراکننده تست برای ارائه ساختار اضافی به کد خود استفاده خواهیم کرد.

مرحله ۳: ایجاد یک نقطه ورود

یک فایل جدید به نام index.test.js ایجاد کنید و کد زیر را به آن اضافه کنید:

فایل index.test.js:

const puppeteer = require('puppeteer');

const EXTENSION_PATH = '../../api-samples/history/showHistory';

let browser;
let worker;

beforeEach(async () => {
  // TODO: Launch the browser.
});

afterEach(async () => {
  // TODO: Close the browser.
});

مرحله 4: مرورگر را اجرا کنید

برای اجرا و بسته شدن مرورگر، beforeEach و afterEach را به‌روزرسانی کنید. هنگام اجرای چندین تست، ممکن است بخواهید از یک مرورگر استفاده کنید. با این حال، این کار عموماً توصیه نمی‌شود زیرا باعث کاهش جداسازی بین تست‌های شما می‌شود و ممکن است باعث شود یک تست بر نتیجه تست دیگر تأثیر بگذارد.

فایل index.test.js:

beforeEach(async () => {
  browser = await puppeteer.launch({
    headless: false,
    pipe: true,
    enableExtensions: [EXTENSION_PATH]
  });
});

afterEach(async () => {
  await browser.close();
  browser = undefined;
});

مرحله ۵: منتظر کارمند خدمات الحاقی باشید

ما باید منتظر بمانیم تا سرویس توسعه‌دهنده (extension service worker) شروع به کار کند تا بتوانیم بعداً از آن برای باز کردن پنجره پاپ‌آپ استفاده کنیم. تابع beforeEach خود را با کد زیر به‌روزرسانی کنید:

beforeEach(async () => {
  browser = await puppeteer.launch({
    headless: false,
    pipe: true,
    enableExtensions: [EXTENSION_PATH]
  });

  const workerTarget = await browser.waitForTarget(
    // Assumes that there is only one service worker created by the extension
    // and its URL ends with service-worker.js.
    (target) =>
      target.type() === 'service_worker' &&
      target.url().endsWith('service-worker.js')
  );

  worker = await workerTarget.worker();
});

مرحله 6: اضافه کردن نام مستعار

برای آسان‌تر کردن اجرای تست‌ها، یک نام مستعار به فایل package.json خود اضافه کنید:

بسته.json:

{
  "name": "puppeteer-demo",
  "version": "1.0",
  "dependencies": {
    "puppeteer": "^24.8.1"
  },
  "scripts": {
    "start": "jest ."
  }
}

این دستور تمام فایل‌هایی که در دایرکتوری فعلی به .test.js ‎ ختم می‌شوند را اجرا می‌کند.

مرحله 7: پنجره بازشو را باز کنید

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

فایل index.test.js:

test('popup renders correctly', async () => {
  // Open a page to add a history item.
  const page = await browser.newPage();
  await page.goto('https://example.com');

  // Open the extension popup.
  await worker.evaluate('chrome.action.openPopup();');

  const popupTarget = await browser.waitForTarget(
    // Assumes that there is only one page with the URL ending with popup.html
    // and that is the popup created by the extension.
    (target) => target.type() === 'page' && target.url().endsWith('popup.html')
  );
});

مرحله ۸: وضعیت فعلی را تأیید کنید

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

فایل index.test.js:

test('popup renders correctly', async () => {
  // Open a page to add a history item.
  const page = await browser.newPage();
  await page.goto('https://example.com');

  // Open the extension popup.
  await worker.evaluate('chrome.action.openPopup();');

  const popupTarget = await browser.waitForTarget(
    // Assumes that there is only one page with the URL ending with popup.html
    // and that is the popup created by the extension.
    (target) => target.type() === 'page' && target.url().endsWith('popup.html')
  );

  const popup = await popupTarget.asPage();

  const list = await page.$('ul');
  const children = await list.$$('li');

  expect(children.length).toBe(1);
});

مرحله ۹: تست خود را اجرا کنید

برای اجرای تست، npm start استفاده کنید. باید خروجی را ببینید که نشان می‌دهد تست شما با موفقیت انجام شده است.

می‌توانید پروژه کامل را در مخزن chrome-extensions-samples ما مشاهده کنید.

مراحل بعدی

پس از تسلط بر اصول اولیه، سعی کنید یک مجموعه آزمایشی برای افزونه خودتان بسازید. مرجع API مربوط به Puppeteer شامل اطلاعات بیشتری در مورد امکانات است - قابلیت‌های زیادی وجود دارد که در اینجا توضیح داده نشده است.