ادغام با نمایشنامه نویس

Playwright یک چارچوب تست سرتاسر قابل اعتماد برای برنامه های وب مدرن است. این به شما امکان می‌دهد تا اسکریپت‌های تست انعطاف‌پذیری را توسعه دهید که بر روی چندین مرورگر اجرا می‌شوند و توسط ابزار قدرتمندی پشتیبانی می‌شوند تا به شما در نوشتن و اشکال‌زدایی تست‌ها کمک کنند.

در این آموزش، نحوه ادغام نتایج آزمون تولید شده توسط آزمون خودکار Playwright را در TestRail با استفاده از TestRail CLI. این به شما این امکان را می دهد که نتایج تست خودکار خود را متمرکز کنید و از تمام قابلیت های تحلیلی و گزارش دهی TestRail استفاده کنید.

نمای کلی #

در طول این آموزش، ما از یک پروژه نمونه استفاده خواهیم کرد تا شما را در فرآیند راه‌اندازی یک پروژه تست‌های خودکار Playwright که با TestRail CLI سازگار است و بارگذاری نتایج آزمون تولید شده را راهنمایی کند.

پس از مطالعه این آموزش، شما قادر خواهید بود:

• تست هایی را از یک پروژه نمایشنامه نویس ساده اجرا کنید
• TestRail CLI را نصب کنید
• نمونه TestRail خود را پیکربندی کنید
• CLI را اجرا کنید
• تست‌کیس‌ها و نتایج تست خود را در TestRail مشاهده کنید

پیش نیازها #

برای اینکه بتوانید پروژه آزمایش‌های نمایشنامه‌نویس را اجرا کنید، می‌توانید آن را از طریق npm یا هر یک از گزینه‌های دیگر در مستندات نصب نمایشنامه نویس، اما برای هدف این مقاله از طریق npm نصب می کنیم. به عنوان یک پیش نیاز برای نصب Playwright با استفاده از npm تنها کاری که باید انجام دهید نصب Node.js است.

همچنین برای نصب و اجرای TestRail CLI که برای وارد کردن نتایج تست به TestRail استفاده می شود، به پایتون نیاز دارید.

پیش نیاز	توضیحات
Node.js	نسخه را برای سیستم عامل خود دانلود کنید و دستورالعمل های جادوگر نصب را دنبال کنید. برای اطمینان از موفقیت آمیز بودن نصب، دستورات را اجرا کنید node --version و npm --version از خط فرمان شما و آنها باید نسخه نصب شده را خروجی بگیرند.
پایتون ۳.۱۰.۴	نسخه را برای سیستم عامل خود دانلود کنید و دستورالعمل های جادوگر نصب را دنبال کنید. برای اطمینان از موفقیت آمیز بودن نصب، دستورات را اجرا کنید python --version و pip --version از خط فرمان شما و آنها باید نسخه های خود را خروجی بگیرند.

نصب نمونه پروژه #

بیایید با واکشی کد پروژه نمونه و نصب وابستگی های مورد نیاز شروع کنیم.

1. کلون یا دانلود کنید نمونه پروژه
2. خط فرمان خود را در پوشه ریشه پروژه باز کنید و دستور زیر را اجرا کنید

$ npm install

را packages.json فایل شامل کتابخانه هایی است که می خواهیم برای این پروژه نصب کنیم. در این مورد تنها وابستگی خود نمایشنامه‌نویس است که طبیعتاً به کتابخانه‌های دیگر بستگی دارد.

مورد نیاز	توضیحات
@playwright/test	چارچوب اتوماسیون را با قابلیت های اتوماسیون وب تست کنید

بررسی پروژه نمونه #

از IDE مورد علاقه خود برای باز کردن پروژه نمونه استفاده کنید و شروع به حفاری در فایل های آزمایشی کنید. ما کد تست های خودکار را ساده نگه داشته ایم تا تمرکز این آموزش بر نحوه وارد کردن نتایج اجرا باقی بماند. این تست ها شامل تعاملات ساده با یک برنامه وب لیست TO DO است که توسط Playwright میزبانی می شود.

// @ts-check
const { test, expect } = require('@playwright/test');
const { randomUUID } = require('crypto');

test.beforeEach(async ({ page }) => {
  await page.goto('https://demo.playwright.dev/todomvc');
});

test.afterEach(async ({ page }, testInfo) => {
  if (testInfo.status !== testInfo.expectedStatus) {
    let screenshotPath = `test-results/screenshots/screenshot-${randomUUID()}.png`;
    await page.screenshot({ path: screenshotPath, fullPage: true });
    testInfo.annotations.push({ type: 'testrail_attachment', description: screenshotPath });
  }
});

const TODO_ITEMS = [
  'buy some cheese',
  'feed the cat',
  'book a doctors appointment'
];

test.describe('New Todo', () => {
  test('should allow me to add todo items', async ({ page }) => {
    // Create 1st todo.
    await page.locator('.new-todo').fill(TODO_ITEMS[0]);
    await page.locator('.new-todo').press('Enter');

    // Make sure the list only has one todo item.
    await expect(page.locator('.view label')).toHaveText([
      TODO_ITEMS[0]
    ]);

    // Create 2nd todo.
    await page.locator('.new-todo').fill(TODO_ITEMS[1]);
    await page.locator('.new-todo').press('Enter');

    // Make sure the list now has two todo items.
    await expect(page.locator('.view label')).toHaveText([
      TODO_ITEMS[0],
      TODO_ITEMS[1]
    ]);

    await checkNumberOfTodosInLocalStorage(page, 2);
  });
});

ضمیمه کردن اسکرین شات به گزارش #

به منظور گرفتن آسان و ارسال اسکرین شات از تست های ناموفق به TestRail، می توانید از ویژگی های گزارشگر JUnit سفارشی استفاده کنید. برای انجام این کار، شما فقط باید آن را اضافه کنید testRailOptions مطابق کد زیر فایل پیکربندی نمایشنامه نویس شما.

// @ts-check
const { devices } = require('@playwright/test');

/**
 * Read environment variables from file.
 * https://github.com/motdotla/dotenv
 */

const testRailOptions = {
  // Whether to add <properties> with all annotations; default is false
  embedAnnotationsAsProperties: true,
  // Where to put the report.
  outputFile: './test-results/junit-report.xml'
};

/**
 * @see https://playwright.dev/docs/test-configuration
 * @type {import('@playwright/test').PlaywrightTestConfig}
 */
const config = {
  /* (...) */ 
  
  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
  reporter: [
    ['list'],
    ['html', { outputFolder: 'test-results', open: 'never' }],
    ['junit', testRailOptions]
  ],
  
  /* (...) */
};

module.exports = config;

پس از پیکربندی مناسب گزارشگر JUnit، فقط باید منطق را برای گرفتن اسکرین شات ها اضافه کنید تا در صورتی که نتیجه آزمایش شما مورد انتظار نباشد و مسیر را به اسکرین شات اضافه کنید. testrail_attachment دارایی می توانید با کد زیر که قبلاً در قطعه کد تست بالا وجود داشت به این هدف برسید.

test.afterEach(async ({ page }, testInfo) => {
  if (testInfo.status !== testInfo.expectedStatus) {
    let screenshotPath = `test-results/screenshots/screenshot-${randomUUID()}.png`;
    await page.screenshot({ path: screenshotPath, fullPage: true });
    testInfo.annotations.push({ type: 'testrail_attachment', description: screenshotPath });
  }
});

اجرای نمونه پروژه #

در همان خط فرمان، دستور زیر را برای اجرای تست های Playwright در پروژه اجرا کنید و نتایج را با فرمت JUnit XML ذخیره کنید.

$ npx playwright test

اگر دستور Playwright به درستی اجرا شده باشد، باید بتوانید نتایج تست خود را روی آن مشاهده کنید نتایج آزمون پوشه پروژه نمایشنامه نویس برای تولید دو فایل گزارش پیکربندی شده است. با باز کردن فایل index.html می توانید یک گزارش HTML تعاملی Playwright مانند زیر را مشاهده کنید.

همچنین باید یک فایل به نام وجود داشته باشد junit-report.xml، مطابق با گزینه های دستور ربات ما، با نتایج تست در قالب JUnit XML. این فایلی است که توسط TestRail CLI به منظور ایجاد اجرای تست و آپلود نتایج آزمون شما در TestRail در مرحله بعد تجزیه می شود.

<testsuites id="" name="" tests="5" failures="1" skipped="0" errors="0" time="11.882232000008225">
  <testsuite name="demo-todo-app.spec.js" timestamp="1664397866418" hostname="" tests="5" failures="1" skipped="0" time="15.464" errors="0">
    <testcase name="New Todo should allow me to add todo items" classname="demo-todo-app.spec.js › New Todo › should allow me to add todo items" time="2.369">
    </testcase>
    <testcase name="New Todo should clear text input field when an item is added" classname="demo-todo-app.spec.js › New Todo › should clear text input field when an item is added" time="1.906">
    </testcase>
    <testcase name="New Todo should append new items to the bottom of the list" classname="demo-todo-app.spec.js › New Todo › should append new items to the bottom of the list" time="2.634">
    </testcase>
    <testcase name="Mark all as completed should allow me to mark all items as completed" classname="demo-todo-app.spec.js › Mark all as completed › should allow me to mark all items as completed" time="7.32">
      <properties>
        <property name="testrail_attachment" value="test-results/screenshots/screenshot-f6f2df78-0eaa-487c-a7a3-97ec6bb66a9a.png">
        </property>
      </properties>
      <failure message="demo-todo-app.spec.js:73:3 should allow me to mark all items as completed" type="FAILURE">
        <![CDATA[  demo-todo-app.spec.js:73:3 › Mark all as completed › should allow me to mark all items as completed 

    Error: expect(received).toHaveClass(expected) // deep equality

    - Expected  - 3
    + Received  + 3

      Array [
    -   "complete",
    -   "complete",
    -   "complete",
    +   "completed",
    +   "completed",
    +   "completed",
      ]
    Call log:
      - expect.toHaveClass with timeout 5000ms
      - waiting for selector ".todo-list li"
      -   selector resolved to 3 elements

      76 |
      77 |     // Ensure all todos have 'completed' class.
    > 78 |     await expect(page.locator('.todo-list li')).toHaveClass(['complete', 'complete', 'complete']);
         |                                                 ^
      79 |     await checkNumberOfCompletedTodosInLocalStorage(page, 3);
      80 |   });
      81 |

        at C:\Github\d-rede\playwright-tests-new\tests\demo-todo-app.spec.js:78:49
]]>
      </failure>
    </testcase>
    <testcase name="Mark all as completed should allow me to clear the complete state of all items" classname="demo-todo-app.spec.js › Mark all as completed › should allow me to clear the complete state of all items" time="1.235">
    </testcase>
  </testsuite>
</testsuites>

در حال وارد کردن نتایج به TestRail #

پس از انجام تست‌ها و تولید فایل‌های گزارش JUnit، می‌توانید به راحتی نتایج تست (و تست‌کیس‌ها!) خود را به TestRail وارد کنید. این امر باعث می شود تا اجرای تست خودکار شما قابل مشاهده باشد و به شما امکان می دهد تا به تصویر بزرگی از نحوه آزمایش برنامه خود در TestRail نگاه کنید.

نصب TestRail CLI #

با توجه به اینکه قبلا پایتون را روی دستگاه خود نصب کرده اید، نصب TestRail CLI به سادگی اجرای دستور زیر در خط فرمان شما است.

$ pip install trcli

پیکربندی TestRail #

در مرحله دوم، شما باید نمونه TestRail خود را طبق دستورالعمل های زیر پیکربندی کنید.

1. را فعال کنید TestRail API با رفتن به مدیر > تنظیمات سایت، روی API برگه، و چک کردن فعال کردن API گزینه
2. ایجاد یک فیلد سفارشی به منظور نگاشت کد تست‌کیس‌ها خودکار خود به موارد واقعی TestRail. شما می توانید این کار را با رفتن به مدیر > سفارشی سازی ها و کلیک کردن فیلد را اضافه کنید. بعد از اینکه به صفحه ایجاد فیلد رسیدید، دو شرط برای این فیلد سفارشی وجود دارد:
   • را نام سیستم باید باشد automation_id
   • را تایپ کنید باید باشد متن

ارسال نتایج به TestRail #

پس از اتمام نصب TestRail CLI و تکمیل پیکربندی نمونه TestRail، می توانید نتایج تست خود را به سادگی با استفاده از یک خطی مانند زیر آپلود کنید.

$ trcli -y \
>  -h https://INSERT-INSTANCE-NAME.testrail.io \
>  --project "My Project" \
>  --username INSERT-EMAIL \
>  --password INSERT-PASSWORD \
>  parse_junit \
>  --title "Playwright Automated Test Run" \
>  -f "./test-results/junit-report.xml"

توجه داشته باشید که نام فایل پس از -ف در صورتی که مکان پیش فرض آن را تغییر دهید، گزینه باید با مسیر فایل گزارش شما مطابقت داشته باشد. همه گزینه های دیگر باید مطابق با نمونه و پروژه TestRail شما باشد. می توانید با علامت زدن گزینه های دیگر خط فرمان را بررسی کنید TestRail CLI README.md از طریق دستورات زیر، در مخزن پروژه، مقاله مستندات TRCLI، یا کمک CLI تعبیه شده فایل کنید.

$ trcli --help
$ trcli parse_junit --help

تجسم نتایج در TestRail #

حالا، اگر شما به تست‌کیس‌ها در صفحه پروژه TestRail خود، متوجه خواهید شد که TestRail CLI به طور خودکار تست‌کیس‌ها را که در گزارش نتایج تست شما وجود داشت ایجاد می کند. توجه داشته باشید که با ترکیب کردن یک شناسه اتوماسیون منحصر به فرد اضافه شده است classname و name ویژگی های هر آزمون در گزارش JUnit. این شناسه اتوماسیون برای نگاشت آزمایش‌های روی پایه کد اتوماسیون شما به تست‌کیس‌ها در TestRail استفاده می‌شود. این بدان معناست که هر بار که TestRail CLI را اجرا می‌کنید، ابتدا سعی می‌کند یک تست‌کیس موجود در TestRail را مطابقت دهد و فقط در صورتی که تست‌کیس با آن شناسه اتوماسیون وجود نداشته باشد، مورد جدیدی ایجاد می‌کند.

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

بعدش چی؟ #

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

می توانید به آن نگاه کنید گزارش‌های TestRail و ویدئو معیارهای تست برای آشنایی با نحوه استفاده از قابلیت های گزارش دهی TestRail.