تست های E2E خود را با یکپارچه سازی نمایشنامه نویس و خیار شارژ کنید

مقدمه

در این پست، من به شما توضیح خواهم داد که چرا Playwright و Cucumber ابزارهای استثنایی برای آزمایش انتها به انتها (E2E) هستند. سپس به مراحل ادغام Playwright برای استفاده یکپارچه در یک برنامه کاربردی JavaScript می پردازیم. در نهایت، نکات حرفه ای را برای به حداکثر رساندن کارایی شما با Playwright به اشتراک می گذارم.

چرا نمایشنامه نویس و خیار؟

در حالی که ابزارهای توانمند متعددی برای ساخت مجموعه های آزمایشی E2E وجود دارد، هیچ کدام با هم افزایی Playwright و Cucumber مطابقت ندارند.

به همین دلیل است که Playwright در بازار برای نوشتن تست‌های E2E متمایز می‌شود.

• 1. هر مرورگر، هر پلتفرم، یک API
  • الف مرورگر متقابل. Playwright از تمام موتورهای رندر مدرن از جمله Chromium، WebKit و Firefox پشتیبانی می کند.
  • ب کراس پلتفرم. روی ویندوز، لینوکس و macOS، به صورت محلی یا CI، بدون هد یا هد تست کنید.
  • ج. متقابل زبان. از Playwright API در TypeScript، JavaScript، Python، .NET و Java استفاده کنید.
• 2. انعطاف پذیر، بدون تست پوسته پوسته شدن
  • الف انتظار خودکار نمایشنامه‌نویس قبل از اجرای کنش‌ها منتظر می‌ماند تا عناصر قابل عمل باشند.
  • ب ادعاهای وب اول اظهارات نمایشنامه نویس به طور خاص برای وب پویا ایجاد شده است.
• 3. ابزار قدرتمند
  • الف کدگن. با ثبت اقدامات خود، آزمایش ایجاد کنید. آنها را به هر زبانی ذخیره کنید.
  • ب بازرس نمایشنامه نویس. صفحه را بازرسی کنید، انتخابگرها را ایجاد کنید، مراحل اجرای آزمایشی را طی کنید، نقاط کلیک را ببینید و گزارش‌های اجرا را کاوش کنید.

با این حال، بدون مدیریت کد تست Cucumber می تواند به یک کابوس تعمیر و نگهداری تبدیل شود. Cucumber تست‌های نوشتن را به زبانی ساده و قابل خواندن برای انسان تسهیل می‌کند و آن‌ها را حتی برای ذینفعان غیر فنی قابل دسترسی می‌کند. به عنوان سنگ بنای توسعه مبتنی بر رفتار (BDD)، Cucumber به عنوان مستندات فنی عمل می‌کند و ورود مهندسان جدید را تسریع می‌کند.

ادغام نمایشنامه نویس و خیار

مرحله 1: Dependencies را نصب کنید

بسته های لازم را با استفاده از npm یا نخ نصب کنید.

npm install --save-dev @playwright/test playwright-core @cucumber/cucumber cucumber-html-reporter concurrently

مرحله 2: راه اندازی ساختار پروژه

پروژه خود را به این صورت سازماندهی کنید:

cucumber.js
cucumber.report.js
/e2e
  |-- /features
      |-- example.feature
  |-- /steps
      |-- example.steps.js

مرحله 3: Cucumber را پیکربندی کنید

یک فایل پیکربندی Cucumber – فایل cucumber.js در ریشه پروژه خود با محتوای زیر ایجاد کنید:

// filepath: /cucumber.js
module.exports = {
  default: {
    require: ["./steps/**/*.js"],
    format: ["pretty"],
    paths: ["./features/**/*.feature"],
  },
};

مرحله 4: گزارش تست را پیکربندی کنید

ایجاد cucumber.report.js – فایلی برای پیکربندی گزارش تست. گزینه های پیکربندی را می توان در اینجا یافت

// filepath: /cucumber.report.js
import reporter from 'cucumber-html-reporter

const options = {
  theme: 'bootstrap',
  output: report/report.html',
  jsonFile: 'report/report.json',
  brandTitle: 'E2E Test Report'
};

مرحله 5: یک فایل ویژگی بنویسید

یک فایل ویژگی در فهرست ویژگی ها ایجاد کنید، به عنوان مثال، example.feature:

// filepath: /e2e/features/example.feature
Feature: Example feature

  Scenario: Open a webpage
    Given I open the "https://example.com" page
    Then the title should be "Example.com"

مرحله 6: تعاریف مرحله را بنویسید

یک فایل تعریف مرحله در فهرست مراحل ایجاد کنید، به عنوان مثال، example.steps.js:

// filepath: /e2e/steps/example.steps.js
import { Before, Given, Then, setDefaultTimeout, After } from '@cucumber/cucumber';
import { chromium, expect } from 'playwright';

setDefaultTimeout(30 * 1000); //milliseconds
let browser, page, context;

Before(async function(){
  browser = await chromium.launch({headless: true});
  context = await brwoser.newContext();
  page = await content.newPage();
});

Given('I open the {string} page', async function (url) {
  await page.goto(url);
});

Then('the title should be {string}', async function (title) {
  const pageTitle = await page.title();
  expect(pageTitle).toHaveText(title);
});

After(async function(){
  await context.close();
  await browser.close();
});

مرحله 7: یک اسکریپت تست NPM اضافه کنید

برای اجرای تست ها، یک اسکریپت به package.json خود اضافه کنید:

// filepath: /package.json
{
  "scripts": {
    "e2e": "cucumber-js --exit",
    "test:e2e": "concurrently -n 'server,test' -c 'auto' --kill-others 'npm run dev' 'npm run e2e'"
  }
}

بسته همزمان npm یک ابزار مفید است که به شما امکان می دهد دو فرآیند را در یک آزمایش اجرا کنید، همانطور که برای اجرای تست E2E باید برنامه را نیز اجرا کنید، گاهی اوقات به صورت محلی و گاهی اوقات از راه دور.

مرحله 8: تست ها را اجرا کنید

انجام تست ها با:

npm run test:e2e

نکات حرفه ای نمایشنامه نویس

• 1. پیام های خطا – آنها را با دقت بخوانید – آنها اغلب مشکل را مشخص می کنند.
• 2. توسعه تکراری – تکه های کوچک کد را برای جداسازی و حل مشکلات آزمایش کنید.
• 3. بازرس نمایشنامه نویس – می تواند به ضبط اقدامات و تولید خودکار اسکریپت های آزمایشی کمک کند، بنابراین باید فقط یک قطعه کد بنویسید. می توانید Playwright Inspector را به صورت زیر راه اندازی کنید

npx playwright codegen HTTP://example.com

• 4. ورود به سیستم پیام های کنسول – پیام کنسول مرورگر را در حالت بدون سر مانند زیر چاپ کنید

page.on('console', (msg) => {
     console.log(`Console: ${msg.type()} - ${msg.text()}`);

• 5. Handle Lazy Loading – برای عناصر بارگذاری تنبل، از توابع زیر استفاده کنید
  • الف waitForSelector یا waitFor
  • ب waitForTimeout
  • ج. scrollIntoViewIfNeeded
• 6. اشکال زدایی DOM – استفاده کنید document.querySelector یا انتخابگر پرس و جو دیگر در کنسول مرورگر برای مکان یابی عناصر
• 7. یک اسکرین شات از شکست بگیرید

اگر به اینجا رسیده اید، پس من تلاش رضایت بخشی انجام دادم تا شما را مطالعه کنم. لطفا به اندازه کافی لطف کنید و نظرات خود را درج کنید یا اصلاحات را به اشتراک بگذارید.

وبلاگ های دیگر من: