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

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

قبل از شروع

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

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

نوشتن تست شما

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

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

pacakge.json:

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

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

مرحله 2: Puppeteer و Jest را نصب کنید

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

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

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

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

index.test.js:

const puppeteer = require('puppeteer');

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

let browser;

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,
    args: [
      `--disable-extensions-except=${EXTENSION_PATH}`,
      `--load-extension=${EXTENSION_PATH}`
    ]
  });
});

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

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

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

package.json:

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

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

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

بیایید یک آزمایش اساسی اضافه کنیم که پنجره بازشو را در یک صفحه جدید باز می کند. ما باید این کار را انجام دهیم زیرا Puppeteer از دسترسی به پنجره بازشوی افزونه از پنجره بازشو پشتیبانی نمی کند. کد زیر را اضافه کنید:

index.test.js:

test('popup renders correctly', async () => {
  const page = await browser.newPage();
  await page.goto(`chrome-extension://${EXTENSION_ID}/popup.html`);
});

مرحله 7: وضعیت فعلی را ثابت کنید

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

index.test.js:

test('popup renders correctly', async () => {
  const page = await browser.newPage();
  await page.goto(`chrome-extension://${EXTENSION_ID}/popup.html`);

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

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

مرحله 8: آزمون خود را اجرا کنید

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

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

مراحل بعدی

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