دليل شامل لاستراتيجية تحميل الصفحة في سيلينيوم

تطورت مجال التشغيل التلقائي للصفحات الويب بشكل كبير، وعمل معظمنا عليه. إنه شيء نعمل عليه بشكل منتظم تقريبًا، موتوماتيك عدة سيناريوهات وتنقل عبر العديد من صفحات الويب.

لكن هل تتساءل أحيانًا عما يحدث في الخلفية عند تحميل الصفحة في برنامج Selenium WebDriver؟ نعرف بعض وظائف WebDriver المستخدمة للانتقال إلى صفحة ويب، مثل get() و navigate()، لكن هل تعرف كيفية تحميل الصفحة، أم أن هناك وظيفة أخرى يعمل بها الأمر في الخلفية؟

الإجابة على هذا هي نعم! يتم تحديد ذلك بواسطة ما يعرف باسم استراتيجية تحميل الصفحة في برنامج Selenium WebDriver. يستخدم WebDriver استراتيجية تحميل الصفحة لتحديد كيفية تحميل الصفحة قبل المتابعة مع التفاعلات الأخرى؛ لتنفيذ الإجراءات التالية.

في هذا المقال حول استراتيجية تحميل الصفحة في برنامج Selenium، سنلقي نظرة معمقة على هذه الاستراتيجية ونحاول فهم أنواعها المختلفة وكيف يمكن تنفيذها في التعليمات البرمجية التشغيلية.

فلنبدأ!

ما هي استراتيجية تحميل الصفحة؟

تحدد استراتيجية تحميل الصفحة متى يجب اعتبار الصفحة محملة لجلسة التشغيل الحالية عندما يبدأ رمز التشغيل الآلي في متصفح ويستخدم طريقة get() أو navigate().to(). بشكل افتراضي، يستخدم برنامج Selenium WebDriver استراتيجية تحميل الصفحة القياسية، وهي NORMAL. وهذا يعني الانتظار حتى تحميل الصفحة كاملة ومكوناتها، مثل CSS، الصور، الإطارات، إلخ.

إذا استغرقت الصفحة وقتًا أطول للتحميل بسبب المكونات المذكورة أعلاه (أو شروط الشبكة المقاومة) ولا تعتبر مهمة لبرنامجك، يمكنك تغييرها إلى EAGER أو NONE لتسريع التنفيذ. ينطبق هذا القيم على الجلسة كاملة، لذا اخترها بحكمة لمشروعك وإلا قد يؤدي إلى عدم استقرار الاختبار.

تم إدخال استخدام استراتيجية تحميل الصفحة باعتبارها جزءًا من ميزات Selenium 4. على عكس الإصدارات السابقة، فإنه يزيل الاعتماد على استخدام أوقات توقف تحميل الصفحة الافتراضية.

كيف يعمل استراتيجية تحميل الصفحة؟

لتحديد ما إذا كان تحميل الصفحة قد انتهى أم لا، يستخدم Selenium منشئ الوثيقة.readyState. تصف document.readyState الحالة التحميل للوثيقة. تشير الوثيقة هنا إلى أي صفحة ويب تم تحميلها في المتصفح.

يتم دعم طريقة Ready State للوثيقة من قبل جميع المتصفحات، مما يجعلها خيارًا موثوق به للاستخدام مع استراتيجية PageLoadStrategy في Selenium.

تمامًا مثلما لدينا استراتيجية تحميل الصفحة الافتراضية، فإن document.readyState الافتراضي الذي ينتظره Selenium WebDriver هو Complete.

تمثل خاصية readyState لكائن الوثيقة في المتصفح الحالة الحالية لعملية تحميل الصفحة. يمكن أن تحمل الخاصية إحدى القيم التالية:

• تحميل – الصفحة لا تزال تتحمل.
• تفاعلي – اكتمل تحميل الصفحة، لكن الموارد الفرعية مثل الصور والأقواس والإطارات قد لا تزال تتحمل.
• مكتمل – اكتمل تحميل الصفحة وجميع الموارد الفرعية.

يمكنك استخدام خاصية readyState لتحديد الوقت الذي يتم فيه تحميل الصفحة بالكامل وأنها جاهزة للتلاعب بها من قبل JavaScript أو بطرق أخرى. على سبيل المثال، في Selenium، يمكنك استخدام خاصية readyState لتحديد متى تم تحميل الصفحة، ويمكن التفاعل مع العناصر على الصفحة باستخدام أوامر Selenium.

قبل المضي قدما، دعونا نفهم أكثر بخصوص readyState للوثيقة بتمرين قصير.

1. انتقل إلى الموقع. 
2. بمجرد تحميل الموقع، انقر بزر الماوس الأيمن -> انقر على فحص -> افتح وحدة التحكم واتبع الأمر document.readyState.

3. نتيجة لهذا الأمر، سترى الناتج كما هو كامل، وهو الحالة الحالية للوثيقة. وهذا يعني أن الصفحة كاملة مع الموارد اللازمة (أي، الصور، CSS، إلخ).

4. بعد ذلك، قم بتحديث الصفحة واضغط على Enter مرة أخرى على الأمر أعلاه. ستتمكن من رؤية الحالة التحميلية للوثيقة في هذه اللحظة، كما هو موضح أدناه.

إذا لم تتمكن من رؤية الحالة التحميلية بعد 4-5 تحديثات، حاول تباطؤ حالة الإنترنت عن طريق تعيين الشبكة إلى خيارات أبطأ. يمكنك معرفة المزيد عن ذلك من خلال هذا المدونة حول اختبار المواقع على شبكات مختلفة. سنستخدم نفس الأسلوب في العرض التوضيحي أيضًا.

لذلك يُظهر هذا كيف يعمل document.readyState في الممارسة. يمكنك أيضًا فحص أداء الموقع تحت ظروف الشبكة المتغيرة باستخدام أداة LT Browser، وهي أداة جاهزة للهواتف المحمولة. تُعد LT Browser أداة إضافية تقدمها LambdaTest، مما يتيح لك اختبار تلبية الموقع الخاص بك على أكثر من 50 جهازًا مختلفًا، بما في ذلك الهواتف الذكية، والأجهزة اللوحية، والأجهزة اللابتوبية. توفر أيضًا القدرة على إنشاء القواسم المختلفة، ومحاكاة الظروف الشبكية المختلفة، وإنشاء تقارير الأداء باستخدام Google Lighthouse.

دعونا نتابع لفهم هذه القيم وكيف يتم تعيينها مع قيم PageLoadStrategy.

تعيين PageLoadStrategy <> document.readyState

يمكن أن يكون readyState للمستند أحد الأمور التالية:

• تحميل: تحميل المستند قيد التقدم.
• تفاعلي: تم تحميل وتحليل المستند، لكن الموارد الفرعية مثل البرمجيات، والصور، والأنماط المتنقلة، والإطارات لا تزال تتحمل. في هذه المرحلة، يتم تنفيذ حدث DOMContentLoaded.
• مكتمل: تم تحميل المستند وجميع الموارد الفرعية. هذا يشير إلى تنفيذ حدث التحميل.

يتم تعيين كل PageLoadStrategy إلى قيمة document.readyState معينة بناءً على أيٍّ منها سيكمل WebDriver طريقة التنقل ويستمر في تنفيذ الخطوات التالية.

أنواع استراتيجيات تحميل الصفحة في Selenium

هناك ثلاثة أنواع من استراتيجيات تحميل الصفحة في Selenium تستخدم عادة في التحكم الآلي في الويب.

NORMAL (الافتراضي، إذا لم يتم تحديده)

يجعل استراتيجية تحميل الصفحة في Selenium WebDriver ينتظر حتى يتم تحميل الصفحة بالكامل، أي حينما يتم تنفيذ حدث التحميل.

يتم تنفيذ حدث التحميل عندما يتم تحميل الصفحة بما في ذلك الموارد التابعة مثل CSS، JavaScript، iFrames، وصور.

ينتظر تنزيل وتحليل المحتوى HTML بالإضافة إلى جميع الموارد الفرعية.

حريم

مع هذه استراتيجية تحميل الصفحة في Selenium، ينتظر WebDriver حتى يتم تحميل الصفحة الأولية ويتم تنفيذ حدث DOMContentLoaded.

على عكس حدث التحميل، يتم تنفيذ حدث DOMContentLoaded بمجرد تحميل DOM دون انتظار الموارد الإضافية مثل CSS، JavaScript، iFrames، وصور ليتم تحميلها.

ينتظر فقط تنزيل وتحليل المحتوى HTML.

لا شيء

في هذه استراتيجية تحميل الصفحة في Selenium، لا يتوقف WebDriver ويستمر في تنفيذ الاختبار.

ينتظر فقط تنزيل المحتوى HTML.

عرض توضيحي: إعداد WebDriver مع استراتيجيات تحميل الصفحة في Selenium المختلفة

الآن بعد أن طورنا فهمًا أساسيًا لاستراتيجيات تحميل الصفحة في Selenium المختلفة، دعونا ننظر إلى أمثلة الكود لفهم كيفية تنفيذها.

للقيام بذلك، سنكتب سطر اختبار اجتياز للسيناريو التالي.

1. إنشاء مثيل RemoteWebDriver باستخدام شبكة Selenium المستندة إلى السحابة. لهذا، سنستخدم منصة LambdaTest.
2. تعيين قدرات WebDriver لاستراتيجية PageLoadStrategy محددة.
3. بعد ذلك، استخدم السائق لتشغيل المتصفح وتنقل هنا.
4. لهذا، سنلاحظ مدة الزمن التي يتم فيها تحميل الصفحة لمعرفة كيف يختلف ذلك بالنسبة لاستراتيجيات تحميل صفحة Selenium تحت نفس الظروف. الاختلافات في وقت تحميل الصفحة ستساعد على الحصول على توضيح أكثر حول جميع الاستراتيجيات.

إعداد المشروع

لهذا المقال حول استراتيجيات تحميل صفحة Selenium، سيتم استخدام مشروع Maven باستخدام Java في IDE Eclipse. إذا لم تكن من محبي Eclipse، استخدم أي IDE تفضله واتبع نفس الخطوات. سيستخدم Selenium WebDriver و TestNG كعوامل تركيب لأتمتة التفاعل مع عناصر الصفحة وتنفيذ اختبارات الحالة. من المستحسن استخدام أحدث إصدارات مستقرة للحصول على نتائج أفضل.

هيا بنا نبدأ الآن.

1. ابدأ بتشغيل Eclipse أو IDE المفضلة لديك.
2. قم بإنشاء مشروع Maven جديد وسمه PageLoadStrategy.
3. داخل مجلد src، أضف حزمة اختبار وداخلها فصل اختبار يسمى TestPageLoadStrategy. سيحمل هذا الفصل الكود الكامل لهذا العرض.

4. قم بتحديث ملف pom.xml ليحتوي على أحدث عوامل تركيب لاستخدام TestNG في Selenium، كما هو موضح أدناه، قبل كتابة الاختبار الفعلي.

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi= "http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation=" http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
 <modelVersion>4.0.0</modelVersion>
 <groupId>PageLoadStrategy</groupId>
 <artifactId>PageLoadStrategy</artifactId>
 <version>0.0.1-SNAPSHOT</version>
 <build>
   <sourceDirectory>src</sourceDirectory>
   <plugins>
     <plugin>
       <artifactId>maven-compiler-plugin</artifactId>
       <version>3.8.1</version>
       <configuration>
         <release>16</release>
       </configuration>
     </plugin>
   </plugins>
 </build>
 <dependencies>
   <dependency>
       <groupId>org.seleniumhq.selenium</groupId>
       <artifactId>selenium-java</artifactId>
       <version>4.6.0</version>
   </dependency>
   <dependency>
       <groupId>org.testng</groupId>
       <artifactId>testng</artifactId>
       <version>7.7.0</version>
       <scope>test</scope>
   </dependency>
 </dependencies>
</project>

package test;


import java.net.MalformedURLException;
import java.net.URL;
import java.time.*;
import java.util.HashMap;
import org.openqa.selenium.PageLoadStrategy;
import org.openqa.selenium.chrome.ChromeOptions;
import org.openqa.selenium.remote.RemoteWebDriver;
import org.testng.annotations.Test;


public class TestPageLoadStrategy {


   public RemoteWebDriver driver = null;
   String username = "";
   String accessKey = "";
 
  ChromeOptions chromeOptions = new ChromeOptions();
   HashMap ltOptions = new HashMap();


   private void setup(String buildName) {


       chromeOptions.setPlatformName("Windows 10");
       chromeOptions.setBrowserVersion("108.0");


       ltOptions.put("project", "Page Load Strategy");
       ltOptions.put("selenium_version", "4.0.0");
       ltOptions.put("w3c", true);
       ltOptions.put("networkThrottling", "Regular 2G");
       ltOptions.put("build", buildName);
   }


   private void checkPageLoad() {
       try {
           driver = new RemoteWebDriver(
                   new URL("https://" + username + ":" + accessKey + "@hub.lambdatest.com/wd/hub"), chromeOptions);


           Instant startTime = Instant.now();
           System.out.println("Page load started at : " + startTime.toString());
           
           System.out.println("Navigating to the URL");
           driver.get("https://ecommerce-playground.lambdatest.io/");
          
           Instant endTime = Instant.now();
           System.out.println("Page load ended at : " + endTime.toString());


           Duration duration = Duration.between(startTime, endTime);
           System.out.println("Total PageLoad time : " + duration.toMillis() + " milli seconds");
       } catch (MalformedURLException e) {
           System.out.println("Invalid grid URL");
       } finally {
           driver.quit();
       }
   }


   @Test
   public void testNormalStrategy() {
       // لتعيين PageLoadStrategy = طبيعي
       setup("Page Load Strategy - Normal");


       chromeOptions.setPageLoadStrategy(PageLoadStrategy.NORMAL);
       chromeOptions.setCapability("LT:Options", ltOptions);
       checkPageLoad();
   }


   @Test
   public void testEagerStrategy() {
       // لتعيين PageLoadStrategy = حريص
       setup("Page Load Strategy - Eager");
       chromeOptions.setPageLoadStrategy(PageLoadStrategy.EAGER);
       chromeOptions.setCapability("LT:Options", ltOptions);
       checkPageLoad();
   }


   @Test
   public void testNoneStrategy() {
       // لتعيين PageLoadStrategy = لا شيء
       setup("Page Load Strategy - None");
       chromeOptions.setPageLoadStrategy(PageLoadStrategy.NONE);
       chromeOptions.setCapability("LT:Options", ltOptions);
       checkPageLoad();
   }
}

استخدام السحابة شبكة Selenium يوفر زيادة في القابلية للتوسع والسرعة لاختبارات التحويل التلقائي بلغة جافا ويسمح للمستخدمين بإجراء اختبارات متوازية ومتعددة المتصفحات عبر عدة توافق بين نظام التشغيل والمتصفحات.

الخطوة 2. كما ذكرنا في الخطوة السابقة، نظرًا لاستخدامنا لمنصة LambdaTest، نحتاج إلى توفير اسم المستخدم ومفتاح الوصول لمستخدمنا للاتصال بمركز السحابة. يمكنك العثور على هذه التفاصيل في قسم ملف المستخدم LambdaTest بعد إنشاء حسابك.

الخطوة 3. قم بإنشاء كائن من فئة ChromeOptions. تُستخدم هذه الفئة لتعديل خصائص مختلفة لمحرك Chrome الذي سنستخدمه للتنفيذ. سيتم استخدام كائن chromeOptions في كل حالة إختبار لتعيين PageLoadStrategy ثم تمرره إلى WebDriver.

الخطوة 4. قم بإنشاء متغير HashMap واسمه ltOptions. سيحدد هذا المتغير خصائص مختلفة لتنفيذ شبكة غريد LambdaTest السحابية.

الخطوة 5. بعد ذلك هو طريقة setup()، تُستخدم لتعيين بعض الخصائص الأساسية في chromeOptions وltOptions. هذه هي الخصائص المشتركة لجميع حالات PageLoadStrategy الثلاثة.

كما يجب ملاحظة أننا نستخدم خاصية networkThrottling في LambdaTest لتعيين الشبكة إلى Regular 2G بسرعة التنزيل 250 كيلوبايت في الثانية وسرعة الرفع 50 كيلوبايت في الثانية. سيساعد هذا على إظهار وقت التحميل بشكل أفضل في جميع السيناريوهات، كما ناقشنا في القسم السابق.

استخدام منصة LambdaTest يمنح هذه الميزة التي يمكنك من خلالها تحديد تفاصيل المتصفح وإصداره مباشرة، وتوليد قدراتك تلقائيًا باستخدام مولد قدرات LambdaTest. عليك فقط إضافتها إلى الكود.

تأخذ هذه الطريقة معاملة واحدة، buildName. يتم استخدام هذا المعامل لعرض اسم البناء.

الخطوة 6. أضف وظيفة جديدة، checkPageLoad(). في كتلة المحاولة، نكتب الكود للاتصال بـ RemoteWebDriver على منصة LambdaTest باستخدام الخصائص المحددة في chromeOptions.

بعد توصيل الاتصال، يتم إنشاء كائن من فئة الأوقات الفورية في برنامج Java.time لتخزين وتسجيل الوقت الذي نبدأ فيه تشغيل المتصفح والبدء في التنقل. تليها محرك تحمل يطلق المتصفح وبدء اختبار الموقع.

بمجرد أن يُعتبر تحميل الموقع حسب استراتيجية PageLoadStrategy المحددة، يمرر المحرك السيطرة إلى الأمر التالي، وهو مرة أخرى كائن من فئة الأوقات الفورية للحصول على الوقت الحالي مرة أخرى، وقت النهاية.

حتى الآن، تم تحميل الصفحة حسب استراتيجيتنا المطلوبة، ولدينا الوقت البدء والنهاية. يمكن تحديد الوقت المستغرق لتحميل صفحة الويب بالميلي ثانية عن طريق إيجاد الفرق بين نقطتين. تُستخدم فئة المدة التي تنتمي إلى نفس الحزمة لتحقيق ذلك.

ستلاحظ أن وقت التحميل هذا يختلف في جميع حالات الاختبار لاستراتيجيات مختلفة.

A catch block is added next for the try block to handle the exception if it occurs. MalformedURLException is to catch the exception in case our RemoteWebDriver URL has invalid syntax. Once everything is done, we finally close the driver instance. To learn more about it, you can go through this blog on the most common exceptions in Selenium.

testNormalStrategy()

هذه هي حالة الاختبار لتوضيح الاستراتيجية العادية.

أولاً، يعرّف الطريقة setup() الخصائص الأساسية للمتصفح ومنصة LambdaTest. بعد ذلك، يتم تعيين قيمة PageLoadStrategy على أنها NORMAL هنا في chromeOptions، ثم تحديد القدرات الأخرى.

أخيرًا، يتم استدعاء طريقة checkPageLoad() لتحميل صفحة الويب وتسجيل وقت التحميل، والذي سنقارنه لكل استراتيجية في قسم التنفيذ.

testEagerStrategy()

هذه هي حالة الاختبار لتوضيح استراتيجية Eager.

جميع الخطوات في هذه الحالة مشابهة للسابقة. الفرق الوحيد هو تعيين قيمة PageLoadStrategy كـ EAGER هنا في chromeOptions، ثم استدعاء طريقة checkPageLoad().

testNoneStrategy()

هذه الحالة التوضيحية لتوضيح استراتيجية None.

تم تعيين قيمة PageLoadStrategy كـ NONE هنا في chromeOptions، وبقية الخطوات مشابهة للحالات التي تم مناقشتها سابقا.

تنفيذ الاختبار

بعد فهم العمل والتطبيق لجميع استراتيجيات PageLoadStrategy، دعونا الآن ننفذ الكود ونرى نتائج التنفيذ محليًا وعلى لوحة ميدان LambdaTest.

سيتم تنفيذ الحالة الاختبارية باستخدام TestNG. للتنفيذ، اتبع الخطوات التالية:

1. انقر بزر الماوس الأيمن على اسم الحالة الاختبارية في IDE Eclipse.
2. انتقل إلى Run Test، وحدد TestNG Test لبدء التنفيذ.

دعونا ننفذ الحالات واحدة تلو الأخرى ونرى ما إذا كان وقت التحميل يختلف بين كل استراتيجية.

استراتيجية NORMAL

يمكنك ملاحظة أن وقت TotalPageLoad في هذه الحالة هو 70852 ميلي ثانية لأننا نستخدم شبكة بسرعة 2G عادية. تم إنشاء أن القيمة الأعلى يجب أن تكون بين الحالات الثلاثة. كما تم إنشاء حتى الآن، يجب أن تكون الأعلى بين الثلاثة. يمكننا التحقق من ذلك عن طريق تشغيل الحالات لـ Eager و None ومقارنتهم.

استراتيجية EAGER

كما هو متوقع، فإن PageLoadTime، أي 70231 ميلي ثانية، لاستراتيجية Eager في نفس السيناريو أقل مقارنةً بـ Normal.

استراتيجية NONE

يمكنك ملاحظة هنا أن مدة تحميل الصفحة للاستراتيجية “None” أقل بكثير من الاثنين الآخرين لأنها لا تنتظر تنزيل أي موارد.

إليكم ملخصًا سريعًا لمدات تحميل الصفحة في استراتيجيات مختلفة

يمكنك أيضًا مشاهدة نتائج التنفيذ عن طريق التنقل إلى لوحة التحكم في LambdaTest كما هو موضح أدناه لكل استراتيجية PageLoadStrategy:

يمكنك التنقل إلى قسم المشاريع تحت الأتوماسيون لمشاهدة تفاصيل بناء الأتوماسيون الخاص بك.

تفاصيل البناء لاستراتيجية PageLoadStrategy.NORMAL:

تفاصيل البناء لاستراتيجية PageLoadStrategy.EAGER:

تفاصيل البناء لاستراتيجية PageLoadStrategy.NONE:

الخاتمة

مع هذا، وصلنا إلى نهاية هذا برنامج التعليمات البرمجية Selenium TestNG حول استراتيجيات تحميل الصفحة المختلفة في Selenium WebDriver. في هذا، تعلمنا عن الاستخدام المتبقي وعمل هذه الاستراتيجيات لتحميل الصفحة بواسطة Selenium وكيف يمكننا دمجها في السكربت التشغيلي الأتوماسيون وتنفيذها على شبكة غريد Selenium السحابية.

I hope now you can implement these in your use cases more efficiently.

تحياتي لكم!!