الزر تغيّر مكانه: كيف تمنع أتمتة المتصفح من النقر على إجراء خاطئ؟

مشكلة النقر ليست إحداثيات فقط

قد ينجح سكربت متصفح عشرات المرات ثم يضغط فجأة زر حذف بدل زر حفظ، لأن نافذة إشعار ظهرت أو تغير تخطيط الصفحة أو اتسعت بطاقة إعلان. الخطأ ليس بالضرورة أن الماوس تحرك بصورة غير صحيحة؛ ربما اعتمدت الأتمتة على إحداثيات ثابتة بدل معنى العنصر. في الواجهات الحديثة يتغير موضع الزر مع حجم الشاشة واللغة واتجاه النص وحالة التحميل. المطلوب بناء تحقق متعدد الطبقات: تحديد العنصر المقصود، وفحص حالته، وربط النقر بأثر متوقع. لا يكفي نجاح حدث click لإثبات أن العملية الصحيحة تمت.

افصل هوية العنصر عن موضعه

إذا كان الزر يحمل اسمًا دلاليًا واضحًا مثل «حفظ التغييرات»، فالأفضل البحث عن دوره واسم الوصول إليه داخل الحاوية الصحيحة بدل افتراض أنه يقع عند النقطة 480،320. في التطبيقات التي تدعم أدوات اختبار مثل Playwright يمكن استخدام locators مبنية على role و accessible name. لكن الاسم نفسه قد يتكرر في أكثر من بطاقة؛ لذلك أضف نطاقًا يحدد النموذج أو الحوار أو السطر المطلوب. يجب ألا يتحول المحدد إلى «أول زر يحمل كلمة حفظ» من دون سياق. الإحداثيات تبقى مفيدة أحيانًا، لكنها آخر وسيلة وليست أساس الهوية.

اكتب شرطًا مسبقًا قبل كل إجراء حساس

قبل الضغط على «حذف» أو «إرسال» أو «نشر»، تحقق من عنوان النافذة والهوية الظاهرة للسجل وحالة الزر وعدم وجود طبقة تغطيه. يمكن تسجيل معرّف العنصر ونصه والدور واسم الحاوية، ثم مقارنة القيم المتوقع ظهورها. إذا تغيّر السياق، توقف العملية وأصدر حالة واضحة بدل محاولة النقر على أقرب عنصر. شرط «الزر موجود» أضعف من شرط «زر الحفظ في نموذج العميل المحدد ظاهر ومتاح ولا تغطيه نافذة أخرى». كلما ارتفعت تكلفة الخطأ، ارتفع مستوى التحقق المطلوب قبل تنفيذ الفعل.

ماذا يحدث عندما يتحرك العنصر بعد القياس؟

قد تقيس الأتمتة مستطيل العنصر ثم يتغير التخطيط قبل وصول المؤشر إليه بسبب تحميل خط عربي أو صورة أو انتقال CSS. هذه فجوة زمنية بين الفحص والفعل. لتقليلها استخدم آليات انتظار الاستقرار التي توفرها أداة الأتمتة، وأعد قراءة موضع العنصر قبل التنفيذ إذا كنت تستخدم إحداثيات. لكن لا تعتبر الاستقرار البصري وحده ضمانًا؛ قد يتغير محتوى الزر مع بقاء موضعه. قارن الهوية الدلالية والحالة في اللحظة الأقرب للنقر، ثم تحقق من الأثر بعده. لا تجعل التأخير الثابت بالمللي ثانية بديلًا عن مراقبة الحالة.

أثر اللغة العربية واتجاه RTL

في الواجهة العربية قد ينتقل زر الإجراء الأساسي من اليمين إلى اليسار أو تتبدل أيقونات الرجوع والتقدم. وقد يؤدي تحميل خط مختلف إلى تغير عرض النص والتفافه إلى سطرين. إذا كان الاختبار يعتمد على x و y ثابتتين فسيفشل عند تغيير اللغة حتى لو بقيت الوظيفة صحيحة. اختبر الواجهة في RTL و LTR، وعلى شاشة ضيقة وعريضة، وبمستويات تكبير مختلفة. استخدم اسم الوصول ودور العنصر بدل الاعتماد على «الزر الموجود يسار البطاقة». وعندما لا يوجد اسم واضح، فهذا أيضًا عيب إتاحة ينبغي تسجيله، لا إخفاؤه بمحدد هش.

تعامل مع العناصر المتشابهة بحذر

قد تحتوي صفحة إدارة الطلبات على عشرين زر «عرض» أو «تعديل». تحديد الزر بالنص فقط لا يضمن اختيار الطلب الصحيح. ابدأ بتحديد الصف الذي يحتوي رقم الطلب أو اسم العميل التجريبي، ثم ابحث داخله عن الإجراء. إذا كان الجدول يعيد ترتيب الصفوف بعد تحديث البيانات، لا تحفظ رقم الصف القديم؛ أعد العثور على الصف بالمعرف. تحقق من أن هناك تطابقًا واحدًا فقط قبل الضغط. إذا ظهرت نتيجتان، أوقف المهمة بدل اختيار الأولى. هذه القاعدة مهمة في أدوات إدارة الحسابات والمهام الجماعية حيث قد تكون الأزرار متطابقة بصريًا لكن آثارها مختلفة.

افحص الحجب والتراكب والتمرير

وجود العنصر في DOM لا يعني أنه قابل للنقر. قد تغطيه نافذة موافقة أو قائمة منسدلة أو طبقة تحميل، وقد يكون خارج مساحة العرض. تحقق من الرؤية والحجم وحالة disabled، ومن أن النقطة المستهدفة لا تقع فوق عنصر آخر. في بعض الأطر تستخدم مكتبة الاختبار فحص hit target أو actionability؛ لا تتجاوز هذه الفحوص تلقائيًا باستخدام force click إلا بعد فهم سبب الفشل. إذا كانت طبقة الإعلان تعترض النقر، فالحل ليس زيادة سرعة المؤشر بل معالجة التراكب أو انتظار انتهائه. وسجل لقطة توضح الحالة قبل النقر لتسهيل التشخيص.

ضع قواعد للانتظار بدل Sleep عشوائي

الانتظار الثابت لثانيتين قد ينجح على جهاز ويفشل على آخر، أو يبطئ كل الاختبارات دون داعٍ. الأفضل انتظار ظهور العنصر المقصود، ثم استقراره، ثم انتهاء التحميل ذي الصلة. لا تنتظر networkidle بلا تفكير في الصفحات التي تبقي اتصالات مستمرة؛ قد لا يتحقق الشرط أبدًا. اربط الانتظار بمؤشر وظيفي مثل اختفاء spinner أو اكتمال صف البيانات أو وصول الاستجابة المطلوبة. حدد مهلة واضحة وسبب فشل مفهومًا. عند تجاوز المهلة، التقط حالة الصفحة الحالية ولا تعاود النقر عشوائيًا؛ فقد تكون العملية نُفذت بالفعل.

التحقق بعد النقر أهم من رسالة النجاح

قد يستقبل الزر حدث click وتظهر رسالة «تم الحفظ» بينما يفشل طلب API لاحقًا أو يعود النموذج إلى قيمته القديمة. لذلك اربط كل إجراء بمؤشر نتيجة: تغير حالة السجل في الواجهة، أو ظهور معرف عملية، أو تأكيد من مصدر موثوق عند الحاجة. لا تجعل رسالة Toast وحدها معيارًا لكل العمليات. بالنسبة إلى حذف سجل، تحقق من معرف السجل المقصود وعدم ظهوره بعد تحديث مناسب، مع مراعاة الحذف المؤجل. وبالنسبة إلى إرسال نموذج، افحص رقم العملية أو حالة الخادم. الهدف إثبات الأثر المطلوب، لا مجرد أن المؤشر وصل إلى نقطة معينة.

اختبار متعمد لتغير التخطيط

أنشئ سيناريو اختبار يضيف شريط تنبيه أعلى الصفحة بعد تحميلها، ويغير اللغة إلى العربية، ويزيد التكبير إلى 125%، ويضيف صفًا جديدًا في الجدول. شغّل الأتمتة مرة بمحدد دلالي ومرة بإحداثيات ثابتة في بيئة تجريبية، ثم قارن عدد مرات الوصول إلى الهدف الصحيح. لا تستخدم عمليات حذف حقيقية في هذا الاختبار؛ استعمل بيانات اصطناعية وإجراءات يمكن التراجع عنها. سجل عدد حالات عدم العثور على العنصر وعدد الحالات التي أوقفها التحقق المسبق قبل النقر. التوقف الآمن عند غموض الهدف نتيجة أفضل من نجاح شكلي على سجل خاطئ.

جدول اختيار طريقة تحديد العنصر

المحدد الدلالي مناسب عندما توجد أسماء وصول مستقرة. محدد test id مناسب عندما يملك فريق التطوير التحكم في الواجهة ويريد عقد اختبار صريحًا. CSS selector قد يكون مناسبًا مع بنية مستقرة، لكنه يصبح هشًا إذا اعتمد على سلسلة أصناف يولدها إطار العمل. الإحداثيات تصلح لتطبيقات Canvas أو واجهات لا تعرض DOM دلاليًا، لكن يلزم معها تحقق بصري أقوى. لا يوجد محدد واحد مثالي لكل تطبيق؛ المهم أن تعرف سبب اختياره وحدود فشله، وأن تقيس عدد التطابقات قبل التنفيذ.

سجل الأدلة دون إغراق

لكل محاولة احتفظ بمعرف المهمة والتبويب والصفحة واللغة وحجم العرض، ووصف الهدف، وعدد العناصر المطابقة، ونتيجة فحص الرؤية، والوقت الذي استغرقه الانتظار. عند الفشل أضف لقطة محدودة و DOM snapshot مناسبًا، مع إزالة البيانات الحساسة. لا تسجل كل حركة ماوس بلا هدف؛ سجّل المعلومات التي تساعدك على تمييز تغير التصميم من بطء الشبكة ومن خطأ المحدد. إذا حدث نقر على عنصر غير مقصود في بيئة اختبار، أضف الحالة إلى مجموعة اختبارات الانحدار. وإذا تعذر إثبات الهدف، أوقف المهمة وقدم سببًا يمكن للمطور فهمه.

المصادر والخلاصة

تشرح وثائق Playwright locators وكيفية الاستهداف الدلالي في https://playwright.dev/docs/locators ، وتشرح actionability checks في https://playwright.dev/docs/actionability . ولأهمية أسماء الوصول راجع إرشادات WAI-ARIA في https://www.w3.org/WAI/ARIA/apg/ . اقرأ أيضًا مقال إيجي تاج عن اختبارات الصور المرجعية ومتى تضلل: https://egytag.com/ar/articles/visual-regression-snapshot-testing-false-positives-baseline-2026 ، ومقال تشخيص النقر داخل iframe: https://egytag.com/ar/articles/iframe-click-failures-frame-locator-actionability-diagnostics-2026 . الخلاصة أن موضع الزر عرض متغير، أما هويته وسياقه وأثره فهي أساس الاختبار الموثوق.