چگونه با استفاده از Cypress بررسی کنیم که یک عنصر وجود دارد یا نه؟

Summarize this content to 400 words in Persian Lang

Cypress ابزاری است که به توسعه دهندگان وب و آزمایش کنندگان کمک می کند تا مطمئن شوند وب سایت های خود به درستی کار می کنند. می تواند بررسی کند که آیا قسمت خاصی از وب سایت وجود دارد یا خیر. این مفید است زیرا کمک می کند تا قبل از اینکه کاربران مشکل را تشخیص دهند. حضور عنصر یکی از اولین چیزهایی است که باید با Cypress در پروژه خود آزمایش کنید. در این مقاله، نحوه آزمایش وجود یا نبودن یک عنصر را بررسی خواهیم کرد. همچنین در صورت وجود چگونه بررسی می کنید که قابل مشاهده است یا خیر؟

عناصر سرو چیست؟

عناصر در برنامه های کاربردی وب به عناصر HTML منفرد اشاره دارند که ساختار و محتوای یک صفحه وب را تشکیل می دهند.
نمونه‌هایی از عناصر عبارتند از دکمه‌ها، جعبه‌های متن، پیوندها و تصاویر، که هر کدام دارای ویژگی‌های خاص خود مانند id، class و style هستند.
این ویژگی ها را می توان برای تعامل با انتخابگرهای CSS یا جاوا اسکریپت استفاده کرد.

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

چرا وجود عنصر در سرو اهمیت دارد؟

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

به عنوان مثال، ممکن است پس از پر کردن یک فرم، دکمه “ارسال” ظاهر شود، بنابراین لازم است بررسی کنید که آیا نشان داده شده است یا خیر. این به شناسایی مشکلات قبل از مواجهه کاربران با آنها کمک می کند و به شما امکان می دهد تجربیات روان تری داشته باشند.

چگونه با استفاده از Cypress وجود یک عنصر را تأیید کنیم؟

Cypress چندین روش برای تأیید وجود عناصر در یک صفحه وب ارائه می دهد. بیایید در هر رویکرد غوطه ور شویم و نحوه اجرای موثر آنها را درک کنیم.

1. روش cy.get().

real-device-cloud-cta.jpgمتد cy.get() در Cypress برای انتخاب و بازیابی عناصر در صفحه بر اساس انتخابگرهای مختلف مانند نام کلاس ها، شناسه ها، ویژگی ها و غیره استفاده می شود. برای بررسی وجود یک عنصر، توسعه دهندگان می توانند از دستور () should همراه با متد ()cy.get استفاده کنند.

استفاده از عبارت .should('exist') با cy.get() تضمین می کند که عنصر انتخاب شده در صفحه وجود دارد.

2. روش cy.contains().

متد cy.contains() برای یافتن یک عنصر بر اساس محتوای متن آن استفاده می شود. این روش همچنین می تواند برای بررسی اینکه آیا عنصری با متن خاص در صفحه وجود دارد یا خیر استفاده می شود.

3. متد cy.find

متد cy.find() هنگام برخورد با عناصر تو در تو در یک عنصر والد مفید است. این به شما امکان می دهد عناصر را در زمینه عنصر دیگر جستجو کنید و از جستجوهای متمرکزتر اطمینان حاصل کنید.

4. cy.get().should() با اظهارات سفارشی

Cypress توسعه دهندگان را قادر می سازد تا با استفاده از متد cy.should() اظهارات سفارشی ایجاد کنند. این به ویژه زمانی مفید است که بخواهید بررسی های خاص تری را فراتر از وجود عنصر اجرا کنید.

5. استفاده از .should() با Timeout

گاهی اوقات، عناصر ممکن است به صورت ناهمزمان یا با کمی تاخیر بارگذاری شوند. در چنین مواردی، می‌توانید از عبارت .should() با یک بازه زمانی استفاده کنید تا اطمینان حاصل کنید که Cypress منتظر ظاهر شدن عنصر است.

تست مشروط با سرو:تست شرطی در Cypress عمل ادغام منطق شرطی در اسکریپت های تست شما برای تصمیم گیری و انجام اقدامات بر اساس شرایط یا نتایج خاص در طول اجرای آزمون است. این روش شما را قادر می‌سازد تا تست‌های انعطاف‌پذیرتر و سازگارتری طراحی کنید که می‌توانند سناریوهای مختلف را مدیریت کرده و بر اساس آن پاسخ دهند. Cypress طیف وسیعی از دستورات و API ها را ارائه می دهد که می توانید برای دستیابی به تست شرطی موثر از آنها استفاده کنید. در زیر تصویری از نحوه استفاده از Cypress برای آزمایش مشروط ارائه شده است.

مثال -1

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

real-device-cloud-cta.jpgCypress یک نحو روان و شهودی برای انجام تست شرطی در اسکریپت های تست شما ارائه می دهد. می‌توانید از اظهارات، قول‌ها و منطق منظم جاوا اسکریپت برای ایجاد شرایط و اقدامات پیچیده بر اساس نتایج آن شرایط استفاده کنید.

تست شرطی در Cypress، مشابه سایر چارچوب‌های تست، به شما کمک می‌کند تا تست‌های همه‌کاره‌تر و موثرتری ایجاد کنید که می‌توانند با سناریوهای مختلف سازگار شوند و فرآیند تست شما را قوی‌تر و قابل اعتمادتر می‌کنند.

مثال 2:

در این قطعه کد، Cypress ابتدا وجود عنصر دکمه را با استفاده از .should('exist') تضمین می کند. سپس عنصر را با استفاده از .then() بازیابی می کند و بررسی شرطی بعدی تعیین می کند که آیا دکمه وجود دارد یا خیر. اگر شرط وجود داشته باشد که نشان دهنده وجود دکمه است، Cypress با استفاده از cy.wrap(button).click() روی دکمه کلیک می کند. اگر شرط ناموفق باشد، بلوک else اجرای یک عمل جایگزین را تسهیل می کند.

کاربردهای واقعی بررسی وجود عنصر:

بیایید در مورد برخی موقعیت‌های روزمره که بررسی وجود عنصر بسیار مفید است فکر کنیم:

1. پیام موفقیت را فرم دهید

پس از ارسال فرم توسط کاربران، ممکن است یک پیام موفقیت آمیز ظاهر شود. با استفاده از Cypress، می توانید بررسی کنید که آیا آن پیام نمایش داده می شود و مطمئن شوید که کاربران می دانند فرم آنها با موفقیت ارسال شده است.

2. منوی ناوبری

شما یک منوی کشویی دارید که وقتی کاربران ماوس را روی یک دکمه می‌برند ظاهر می‌شود. شما می‌خواهید تأیید کنید که وقتی کاربران آن اقدام شناور را انجام می‌دهند، منو ظاهر می‌شود.

3. طراحی واکنشگرا

ممکن است عناصر مختلف در نسخه‌های موبایل و دسکتاپ سایت شما ظاهر یا ناپدید شوند. می توانید از Cypress استفاده کنید تا مطمئن شوید که این عناصر همانطور که در نظر گرفته شده نشان داده یا پنهان می شوند.

4. کنترل دسترسی کاربر

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

همچنین بخوانید: تست موازی سرو: آموزش گام به گام با نمونه کد

نتیجه گیری

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

منبع: این وبلاگ در ابتدا در testgrid.io منتشر شد