نحوه استفاده از مکان یاب نمایشنامه نویس: راهنمای تفصیلی

Summarize this content to 400 words in Persian Lang
تست خودکار برای اطمینان از قابلیت اطمینان و عملکرد برنامه های کاربردی وب ضروری است. چارچوب‌های تست سرتاسری مانند Playwright به عنوان ابزار قدرتمندی ظهور کرده‌اند که توسعه‌دهندگان و آزمایش‌کنندگان را قادر می‌سازد تا تعاملات واقعی کاربر را در بین مرورگرها شبیه‌سازی کنند. یک جنبه اساسی استفاده مؤثر از Playwright، تسلط بر Playwright Locators است – ابزارهایی که امکان شناسایی دقیق و دستکاری عناصر وب را فراهم می کند.

هدف این راهنمای دقیق درک جامع مکان‌یابی نمایشنامه‌نویس، انواع، استفاده و بهترین شیوه‌ها برای ارتقای استراتژی‌های تست اتوماسیون شما است.

نمایشنامه نویس چیست؟

Playwright یک کتابخانه منبع باز Node.js است که توسط مایکروسافت برای خودکارسازی مرورگرهای وب توسعه یافته است. این یک API سطح بالا برای کنترل Chromium و WebKit ارائه می‌کند و امکان آزمایش بین مرورگرها را با یک پایگاه کد واحد فراهم می‌کند. Playwright به گونه ای طراحی شده است که قابل اعتماد، سریع و قادر به مدیریت برنامه های وب مدرنی باشد که به شدت به جاوا اسکریپت متکی هستند.

ویژگی های کلیدی نمایشنامه نویسپشتیبانی از مرورگرهای متقابل: تست‌ها را در Chromium، Firefox، و WebKit به‌طور خودکار انجام دهید.مکانیسم انتظار خودکار: به طور خودکار منتظر می ماند تا عناصر قبل از انجام اقدامات آماده شوند.مدل جداسازی: زمینه های مرورگر را ارائه می دهد که کوکی ها و حافظه پنهان را جدا می کند و آزمایش موازی را کارآمدتر می کند.کنترل شبکه: رهگیری و اصلاح درخواست ها و پاسخ های شبکه.API گسترده: مجموعه ای غنی از قابلیت ها را برای نیازهای مختلف تست فراهم می کند.

نصب و راه اندازی Playwrit

پیش نیازهاNode.js: مطمئن شوید که Node.js (نسخه 14 یا بالاتر) را نصب کرده اید.مدیر بسته: npm یا Yarn.

نصب نمایشنامه نویس

npm init playwright@latest

نخ ایجاد نمایشنامه نویس

اولیه سازی پروژه

ایجاد یک فهرست جدید:آزمون های نمایشنامه نویس mkdirسی دی نمایشنامه نویس-تست
راه اندازی پروژه:npm init -y

نصب مرورگرنمایشنامه‌نویس باینری‌های مرورگر را به صورت داخلی مدیریت می‌کند. برای نصب مرورگرها:نمایشنامه نویس npx نصب کنید

شروع کار با نمایشنامه نویس

نوشتن اولین آزمونبیایید یک تست ساده بنویسیم تا مطمئن شویم عنوان وب سایت Playwright حاوی “Playwright” است.

مرحله 1: یک فایل آزمایشی ایجاد کنیدیک فایل جدید با نام example.spec.ts در دایرکتوری tests ایجاد کنید:

Touch tests/example.spec.ts

مرحله 2: کد تست را بنویسیدexample.spec.ts را در ویرایشگر کد خود باز کنید و کد زیر را اضافه کنید:

import { test, انتظار } از '@playwright/test';

test('دارای عنوان'، غیر همگام ({ صفحه }) => {await page.goto('https://playwright.dev/');

// انتظار می رود عنوان حاوی “نمایشنامه نویس” باشد.await expect(page).toHaveTitle(/Playwright/);})؛مرحله 3: اضافه کردن یک آزمون دیگر (اختیاری)بیایید آزمایش دیگری برای تعامل با عنصر صفحه اضافه کنیم:

test('link start', async ({ page }) => {await page.goto('https://playwright.dev/');

// روی پیوند “شروع به کار” کلیک کنید.await page.getByRole('link', { name: 'Get start' }).click();

// انتظار می رود صفحه دارای عنوانی با نام “نصب” باشد.await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();})؛

اجرای تست هابرای اجرای تست های خود، از دستور Playwright test runner استفاده کنید:

تست نمایشنامه نویس npxاجرای آزمایشی فایل های مطابق با *.spec.ts یا *.spec.js را در فهرست راهنمای تست ها جستجو می کند و آنها را اجرا می کند.

خروجی مورد انتظارشما باید خروجی مشابهی ببینید:اجرای 2 آزمون با استفاده از 1 کارگر✔ [chromium] › tests/example.spec.ts:3:1 › دارای عنوان (2s) است✔ [chromium] › tests/example.spec.ts:10:1 › پیوند شروع (1s)2 پاس (3 ثانیه)این نشان می دهد که هر دو آزمون با موفقیت پشت سر گذاشته شده اند.

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

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

هدف مکان یاب ها

شناسایی عنصر: عناصر را دقیقاً برای تعامل هدف قرار دهید.
اتوماسیون: رفتار کاربر را به شیوه ای ثابت و قابل تکرار شبیه سازی کنید.
تأیید: وضعیت و ویژگی های عناصر را در طول آزمایش ها تأیید کنید.
قابلیت نگهداری: تست های انعطاف پذیری بنویسید که در برابر تغییرات در رابط کاربری برنامه مقاومت کنند.

مکان یاب ها در مقابل انتخاب کنندگان

انتخابگرها: رشته هایی که مکان یابی عناصر را در DOM توصیف می کنند، مانند انتخابگرهای CSS یا عبارات XPath.
مکان یابی ها: انتزاع هایی که بر روی انتخابگرهایی ساخته شده اند که روش های اضافی را برای تعامل و ادعاها ارائه می دهند. آنها روشی قوی تر و انعطاف پذیرتر برای کار با عناصر ارائه می دهند.

معایب استفاده مستقیم از انتخابگرها در مقابل مزایای استفاده از مکان یاب

اهمیت در تست

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

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

کاراییکارایی مکان یاب زمان صرف شده برای نوشتن و نگهداری تست ها را به حداقل می رساند. مکان یاب‌های مؤثر اسکریپت‌های آزمایشی شما را ساده‌تر می‌کنند، و آنها را خواناتر و نگهداری آسان‌تر می‌کنند. استفاده از استراتژی های مکان یاب ساده و منسجم، زمان صرف شده برای اشکال زدایی و به روز رسانی تست ها را کاهش می دهد. وقتی رابط کاربری برنامه تغییر می کند، مکان یاب های خوش ساخت راحت تر تنظیم می شوند.

مقیاس پذیریمقیاس پذیری مکان یاب اجازه می دهد تا تست ها با برنامه رشد کنند بدون اینکه غیر قابل مدیریت شوند. همانطور که برنامه شما رشد می کند، تعداد عناصر و تعاملات افزایش می یابد. استفاده از استراتژی‌های مکان یاب ماژولار و قابل استفاده مجدد، به تست‌های شما اجازه می‌دهد تا در کنار برنامه‌تان بدون سخت‌گیری مقیاس شوند.

بررسی اجمالی نحو یابمکان یاب ها با استفاده از روش هایی مانند page.locator (انتخاب کننده) ایجاد می شوند و می توان با استفاده از روش های زنجیره ای برای اقدامات و اظهارات دستکاری کرد.

دکمه const = page.locator('button.submit');await button.click();

انواع مکان یاب نمایشنامه نویس

نمایشنامه‌نویس مکان‌یاب‌های مختلفی را متناسب با سناریوهای آزمایشی مختلف ارائه می‌دهد. درک این موارد به انتخاب موثرترین مکان یاب برای هر عنصر کمک می کند.

مکان یاب برچسبمکان یاب getByLabel به شما امکان می دهد عناصری را پیدا کنید که حاوی یک رشته متن خاص هستند. در محتوای متن ارائه شده صفحه جستجو می کند و عناصری را که متن قابل مشاهده آنها با مقدار ارائه شده مطابقت دارد مطابقت می دهد.

const emailInput = page.getByLabel('آدرس ایمیل');await emailInput.fill('user@example.com');مکان یاب هامکان یاب getByPlaceholder عناصر ورودی را با استفاده از مقدار مشخصه مکان یاب آنها پیدا می کند. متن مکان‌نما، متن راهنمایی یا نمونه‌ای است که در داخل فیلدهای ورودی نمایش داده می‌شود.

const searchInput = page.getByPlaceholder('Search');await searchInput.fill('Playwrit');

مکان یاب های AltTextمکان یاب getByAltText عناصری را با ویژگی alt مطابق با متن مشخص شده پیدا می کند که معمولاً با تصاویر استفاده می شود ( برچسب ها). ویژگی alt اطلاعات جایگزینی را برای یک تصویر در صورتی که کاربر نتواند آن را مشاهده کند ارائه می دهد و جزء کلیدی دسترسی به وب است.

const logoImage = page.getByAltText('لوگوی شرکت');await expect(logoImage).toBeVisible();

مکان یاب عنوانمکان یاب getByTitle به شما امکان می دهد عناصر را بر اساس مقدار مشخصه عنوان آنها پیدا کنید. ویژگی title اغلب برای ارائه اطلاعات اضافی در مورد یک عنصر استفاده می شود که معمولاً به عنوان یک راهنمای ابزار زمانی که کاربر روی آن قرار می گیرد نمایش داده می شود.

const tooltipElement = page.getByTitle('اطلاعات اضافی');await expect(tooltipElement).toBeVisible();

شناسه یاب تستمکان یاب getByTestId برای یافتن عناصر با استفاده از ویژگی داده به طور خاص برای اهداف آزمایشی، مانند data-testid طراحی شده است. با استفاده از یک ویژگی اختصاصی برای انتخاب تست، تست‌های خود را از استایل و ساختار برنامه جدا می‌کنید و آنها را در برابر تغییرات در رابط کاربری انعطاف‌پذیرتر می‌کنید.

const menu = page.getByTestId('main-menu');await menu.click();

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

// استفاده از getByText()دکمه const = page.getByText('Submit');await button.click();

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

// استفاده از getByRole()const checkbox = page.getByRole('checkbox', { name: 'subscribe to newsletter' });منتظر checkbox.check();

انتخابگرهای CSSانتخابگرهای CSS به انتخاب عناصر در مرورگرها به طور موثر و کارآمد کمک می کنند. از نحو استاندارد CSS برای انتخاب عناصر بر اساس کلاس ها، شناسه ها، ویژگی ها و روابط سلسله مراتبی استفاده کنید.

// بر اساس کلاس انتخاب کنیدعنصر const = page.locator('.my-class');// با شناسه انتخاب کنیدعنصر const = page.locator('#my-id');// بر اساس ویژگی انتخاب کنیدعنصر const = page.locator('input[name=”username”]')

انتخابگرهای XPathانتخابگرهای XPath به انتخاب عناصر بر اساس محتوا و ساختار HTML کمک می کنند. از زبان XPath Path برای پیمایش درخت DOM استفاده کنید.عنصر const = page.locator('//div[@class=”container”]//a[text()=”Learn more”]')

انتخاب کنندگان نهمعناصر را بر اساس موقعیت آنها در یک لیست یا سلسله مراتب هدف قرار دهید.// سومین مورد را در لیست انتخاب کنیدconst item = page.locator('ul > li').nth(2);

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

// انتخاب کامپوننت React با نام آنconst component = page.locator('_react=MyComponent');

// انتخاب کامپوننت با ویژگی های خاصconst componentWithProps = page.locator('_react=MyComponent[foo=”bar”]')

// تعامل با روش یک مؤلفه (در صورت نمایش)await component.evaluate((node) => {// به روش‌ها یا وضعیت مؤلفه دسترسی پیدا کنید})؛

توجه: انتخابگرهای React بر دانش داخلی سلسله مراتب اجزای برنامه تکیه دارند و نیاز دارند که برنامه در حالت توسعه باشد. آنها به ویژه زمانی مفید هستند که بتوانید به کد منبع مؤلفه دسترسی داشته باشید و نیاز به آزمایش مؤلفه ها به صورت مجزا داشته باشید.

انتخابگرهای Vueبه طور مشابه، برای برنامه‌های Vue.js، Playwright به انتخاب‌کنندگان این امکان را می‌دهد تا اجزای Vue را بر اساس نام یا لوازم موردنظر قرار دهند.

// انتخاب یک جزء Vue با نام آنconst component = page.locator('_vue=MyComponent');

// انتخاب کامپوننت با ویژگی های خاصconst componentWithProps = page.locator('_vue=MyComponent[title=”Welcome”]')

// دسترسی به داده های جزءawait component.evaluate((node) => {// با داده ها یا روش های کامپوننت تعامل داشته باشید})؛توجه: انتخابگرهای Vue به برنامه نیاز دارند تا جزئیات مؤلفه را در معرض نمایش بگذارد و بهترین استفاده را در محیط های توسعه دارند. آن‌ها امکان تست دقیق‌تر اجزای Vue را فراهم می‌کنند، به‌ویژه زمانی که نیاز به تعامل با ویژگی‌ها یا روش‌های خاص جزء دارید.

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

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

مثال:

// 👍 تمرین خوبawait page.getByRole('button', { name: 'Submit' }).click();ویژگی های کاربر را به انتخابگرهای XPath یا CSS ترجیح دهیدتکیه بر ساختار DOM یا کلاس‌های CSS می‌تواند منجر به تست‌های شکننده‌ای شود که با تغییر UI شکسته می‌شوند. در عوض، از مکان یاب‌ها بر اساس ویژگی‌های کاربر مانند نقش‌ها و نام‌های قابل دسترس استفاده کنید.

مثال:

// 👎 تمرین بدpage.locator('button.btn-primary');// 👍 تمرین خوبpage.getByRole('button', { name: 'Submit' });

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

مثال:// نیازی به انتظار صریح نیستawait page.getByRole('button', { name: 'Submit' }).click();

از ویژگی های داده برای انتخابگرهای پایدار استفاده کنیدهنگامی که مکان یاب داخلی کافی نیست، ویژگی های داده-testid سفارشی را به عناصر خود اضافه کنید. این یک راه پایدار برای مکان یابی کمتر احتمال تغییر عناصر فراهم می کند.

await page.getByTestId('submit-button'). کلیک کنید();

از نام کلاس ها با دقت استفاده کنیدزمانی که شناسه یا شناسه دسترسی در دسترس نباشد، می توان از نام کلاس ها استفاده کرد. با این حال، ممکن است منحصربه‌فرد نباشند و در صورت به‌روزرسانی رابط کاربری، تغییر کنند.

ملاحظات:

غیر منحصر به فرد: ممکن است چندین عنصر در یک کلاس مشترک باشند.
نگهداری: تغییرات در سبک ها می تواند بر انتخابگرها تأثیر بگذارد. مثال: await page.locator('.submit-button').click();

در صورت لزوم از استراتژی های مکان یاب بومی استفاده کنیدنمایشنامه‌نویس از استراتژی‌های مکان یاب بومی که توسط چارچوب‌های اتوماسیون زیربنایی تفسیر می‌شوند، مانند -android uiautomator، -ios رشته محمول، و -ios کلاس زنجیره پشتیبانی می‌کند.

مثال:// استفاده از Android UIAutomator await page.locator('android=UiSelector().text(“Submit”)').click();از مکان یاب تصویر به عنوان آخرین راه حل استفاده کنیدمکان یاب تصویر (-image) به شما امکان می دهد عناصر را بر اساس تصاویر پیدا کنید. در حالی که در سناریوهای خاص مفید هستند، اما باید به قدری از آنها استفاده کرد.

مثال:await page.locator('image=path/to/image.png').click();

استفاده از Playwright با HeadSpin

برای استفاده از Playwright با HeadSpin، ابتدا یک جلسه مرورگر را شروع کنید.

مرورگر را با HeadSpin CLI راه اندازی کنید:اسکریپت یا دستور Node.js را برای شروع جلسه مرورگر اجرا کنید:

const { spawn } = require('node:child_process');

sp = تخم ریزی('hs'،[‘connect’, ‘browser’,’-t’, ‘your_headspin_api_token’,’device_specifier’]،)همچنین، دستور را مستقیماً در ترمینال اجرا کنید:

hs مرورگر -t your_headspin_api_token device_specifier را متصل کنید

اجرای دستور● دستور hs connect را اجرا کنید:

دستور hs را اجرا کنید

تست های نمایشنامه نویس را اجرا کنید:● اسکریپت آزمایشی خود را برای بررسی عملکرد Playwright اجرا کنید:گره playwright_android.js

● با این کار تمام موارد آزمایشی که اسکریپت شما تعریف می‌کند در برابر مرورگر دستگاه Android موبایلی که hs متصل است اجرا می‌کند.

● اگر با موفقیت اجرا شود، URL باز شده را روی دستگاه خواهید دید.

● می توانید آزمایش را در بستر HeadSpin بررسی کنید.

● آزمون یک برگه جدید باز می کند و به صفحه وب مشخص شده – در این مورد – example.com هدایت می شود.

● در ترمینال خود، می بینید که چگونه Playwright صفحه وب را باز می کند و عنوان آن را می گیرد.

تقویت تست با ادغام HeadSpin

در حالی که Playwright ابزارهای قوی برای اتوماسیون فراهم می کند، ادغام آن با پلتفرمی مانند HeadSpin می تواند قابلیت های تست شما را به میزان قابل توجهی افزایش دهد.

از محیط های آزمایشی مبتنی بر ابر استفاده کنید

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

تست ها را به صورت موازی اجرا کنید

کارایی: با اجرای همزمان تست ها زمان اجرای تست را کاهش دهید.
پوشش: چندین سناریو را به طور همزمان آزمایش کنید.

نظارت بر عملکرد و نتایج آزمون

تجزیه و تحلیل: از طریق معیارهای دقیق عملکرد، بینش به دست آورید.
گزارش دهی: گزارش های آزمایشی جامع ایجاد کنید.

در خطوط لوله CI/CD ادغام شود

اتوماسیون: به صورت خودکار در هنگام تغییر کد آزمایش می کند.
سازگاری: اطمینان حاصل کنید که هر ساخت به طور کامل تست شده است.

اطمینان حاصل کنید که تست ها قابل نگهداری و مقیاس پذیر هستند

طراحی مدولار: اجزای کد قابل استفاده مجدد را بنویسید.
یکپارچه سازی کنترل نسخه: تغییرات را پیگیری کنید و به طور موثر همکاری کنید. ## نتیجه گیری تسلط بر نمایشنامه نویس گامی اساسی در تقویت استراتژی تست انتها به انتها است. با درک انواع مکان یاب و بهترین شیوه‌ها، می‌توانید تست‌هایی بنویسید که قابل اعتماد، قابل نگهداری و منعکس کننده تعاملات واقعی کاربر باشند.

ادغام Playwright با پلتفرم‌های تست پیشرفته مانند HeadSpin، کارایی تست شما را بیشتر می‌کند. ترکیبی از استراتژی‌های مکان یاب قوی و ابزارهای تست قدرتمند این اطمینان را می‌دهد که برنامه‌های کاربردی وب شما به طور کامل آزمایش می‌شوند و نرم‌افزار با کیفیت بالا را به کاربران ارائه می‌دهند.

منبع اصلی: https://www.headspin.io/blog/playwright-locators-guide