كيفية تشغيل DOM الظلال تلقائيًا في Selenium WebDriver

الدروس التعليمية
Selenium

I came across one of the test cases in my previous projects where I had to click on a button to navigate to the next page. I searched for the element locator of the button on the page and ran the tests hoping it would click the button and navigate to the next page.

لكن لمفاجأتي، فشل الاختبار حيث لم يتمكن من تحديد العنصر، وتلقيت NoSuchElementException في سجلات الوحدة النمطية. لم أكن سعيدًا برؤية ذلك الخطأ لأنه كان زرًا بسيطًا كنت أحاول النقر فوقه، ولم يكن هناك تعقيد.

بتحليل المشكلة أكثر، وتوسيع DOM، وفحص العناصر الجذرية، وجدت أن موقع الزر كان داخل #shadow-root(open) عقدة الشجرة، مما جعلني أدرك أنه يجب التعامل معها بشكل مختلف لأنها عنصر Shadow DOM.

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

ما هو Shadow DOM؟

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

Shadow DOM هو طريقة لتحقيق التغليف في مستند HTML. عن طريق تطبيقه، يمكنك الاحتفاظ بالأسلوب وسلوك جزء من المستند مخفيًا ومنفصلًا عن الكود الآخر في المستند حتى لا يحدث تداخل.

Shadow DOM يسمح بالاحتفاظ بأشجار DOM المخفية مرتبطة بعناصر في شجرة DOM العادية – شجرة Shadow DOM تبدأ بجذر الظل، تحته يمكنك إرفاق أي عنصر بنفس الطريقة التي يمكن بها إرفاق العناصر العادية.

يوجد بعض مصطلحات DOM الظلية التي يجب أن تكون على دراية بها:

  • المضيف الظلي: العقدة العادية في DOM التي يتم إرفاق DOM الظلي بها
  • شجرة الظل: شجرة DOM داخل DOM الظلي
  • حدود الظل هي حيث ينتهي DOM الظل ويبدأ DOM العادي.
  • جذر الظل: عقدة الجذر لشجرة الظل

ما هو استخدام DOM الظل؟

يخدم DOM الظل للتغليظ. يسمح للمكون بامتلاك شجرة DOM “الظل” الخاصة بها التي لا يمكن الوصول إليها بشكل غير مت有意 من المستند الرئيسي، قد يكون لها قواعد النمط المحلية، وأكثر من ذلك.

فيما يلي بعض الخصائص الأساسية لـ DOM الظل:

  • يمتلكون مساحة أيديهم الخاصة
  • غير مرئية لمستخدمي JavaScript المختارين من المستند الرئيسي، مثل querySelector
  • استخدام الأنماط فقط من شجرة الظل، وليس من المستند الرئيسي

العثور على عناصر DOM الظل باستخدام سيلينيوم WebDriver

عندما نحاول العثور على عناصر DOM الظل باستخدام مواقع سيلينيوم، نحصل على NoSuchElementException حيث لا يمكن الوصول إليها مباشرةً إلى DOM.

سنستخدم الاستراتيجية التالية للوصول إلى مواقع DOM الظل:

  • باستخدام JavaScriptExecutor.
  • باستخدام طريقة سيلينيوم WebDriver getShadowDom().

في قسم هذا المدونة حول أتمتة DOM الظّلّ في Selenium، لنأخذ مثالاً على Watir.com الصفحة الرئيسية ونحاول الإعتراف بـ نص DOM الظّلّ وDOM الظّلّ المتنقّص باستخدام سلينيوم WebDriver. لاحظ أن لديها عنصر رأس الظّلّ واحد قبل أن نصل إلى النص -> بعض النص، وهناك عناصر رأس الظّلّ اثنين قبل أن نصل إلى النص -> نص متنقّص.

الآن، إذا حاولنا تحديد العنصر باستخدام cssSelector("#shadow_content > span")، فإنه
لا يتم تحديده، وسيقوم سلينيوم WebDriver بإلقاء NoSuchElementException.

فيما يلي لقطة لصف الصفحة الرئيسية، التي تحتوي على الكود الذي يحاول الحصول على النص باستخدام
cssSelector(“#shadow_content > span”).

فيما يلي لقطة للاختبارات حيث نحاول الإعتراف بالنص(“بعض النص”).

خطأ في تشغيل الاختبارات يظهر NoSuchElementException

لتحديد العنصر بشكل صحيح للنص، نحتاج إلى المرور عبر عناصر رأس الظّلّ. فقط حينها سنتمكن من تحديد “بعض النص” و”نص متنقّص” على الصفحة؟

كيفية العثور على DOM الظّلّ في سلينيوم WebDriver باستخدام طريقة ‘getShadowDom’

مع إصدار سلينيوم WebDriver الإصدار 4.0.0 وما فوق، تم إدخال طريقة getShadowRoot() وساعد في تحديد عناصر رأس الظّلّ.

هنا الصيغة وتفاصيل طريقة getShadowRoot():

Java

  

	default SearchContext getShadowRoot()
	
	Returns:
	The ShadowRoot class represents the shadow root of a web component. With a shadow root, you can access the shadow DOM of a web component.
	
	Throws:
	NoSuchShadowRootException - If shadow root is not found.

وفقاً للوثائق، تُرجع طريقة getShadowRoot() تمثيلًا لجذر الظل لعنصر ما للوصول إلى DOM الظل لمكون الويب.

في حالة عدم العثور على جذر الظل، ستلقي NoSuchShadowRootException.

قبل أن نبدأ في كتابة الاختبارات ومناقشة الكود، دعني أخبركم عن الأدوات التي سنستخدمها لكتابة وتشغيل الاختبارات:

تم استخدام اللغة البرمجية والأدوات التالية في كتابة وتشغيل الاختبارات:

  • اللغة البرمجية: Java 11
  • أداة التلاعب بالويب: Selenium WebDriver
  • مشغل الاختبار: TestNG
  • أداة البناء: Maven
  • منصة سحابية: LambdaTest

البدء بالعثور على DOM الظل في Selenium WebDriver

كما تمت مناقشته سابقًا، تم إنشاء هذا المشروع حول DOM الظل في Selenium باستخدام Maven. TestNG تُستخدم كمشغل اختبار. لمعرفة المزيد عن Maven، يمكنك قراءة هذا المقال حول البدء بـ Maven لاختبارات Selenium.

بمجرد إنشاء المشروع، نحن بحاجة إلى إضافة الاعتماد لـ Selenium WebDriver، و TestNG في ملف pom.xml.

إصدارات المركبات معينة في كتلة خصائص منفصلة. يتم ذلك من أجل الصيانة، حيث إذا احتجنا لتحديث الإصدارات، يمكننا القيام بذلك بسهولة دون البحث عن المركبة في جميع أنحاء ملف pom.xml.

Java

  

<?xml version="1.0" encoding="UTF-8"?>
<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 http://maven.apache.org/xsd/maven-4.0.0.xsd">
   <modelVersion>4.0.0</modelVersion>

   <groupId>io.github.mfaisalkhatri</groupId>
   <artifactId>shadowdom-selenium</artifactId>
   <version>1.0-SNAPSHOT</version>

   <properties>
       <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
       <selenium.java.version>4.4.0</selenium.java.version>
       <testng.version>7.6.1</testng.version>
       <webdrivermanager.version>5.2.1</webdrivermanager.version>
       <maven.compiler.version>3.10.1</maven.compiler.version>
       <surefire-version>3.0.0-M7</surefire-version>
       <java.release.version>11</java.release.version>
       <maven.source.encoding>UTF-8</maven.source.encoding>
       <suite-xml>testng.xml</suite-xml>
       <argLine>-Dfile.encoding=UTF-8 -Xdebug -Xnoagent</argLine>
   </properties>

   <dependencies>
   <!-- https://mvnrepository.com/artifact/org.seleniumhq.selenium/selenium-java -->
   <dependency>
       <groupId>org.seleniumhq.selenium</groupId>
       <artifactId>selenium-java</artifactId>
       <version>${selenium.java.version}</version>
   </dependency>
   <!-- https://mvnrepository.com/artifact/org.testng/testng -->
   <dependency>
       <groupId>org.testng</groupId>
       <artifactId>testng</artifactId>
       <version>${testng.version}</version>
       <scope>test</scope>
   </dependency>
   <dependency>
       <groupId>io.github.bonigarcia</groupId>
       <artifactId>webdrivermanager</artifactId>
       <version>${webdrivermanager.version}</version>
       <exclusions>
           <exclusion>
               <groupId>com.google.guava</groupId>
               <artifactId>guava</artifactId>
           </exclusion>
       </exclusions>
   </dependency>
   </dependencies>

   <build>
   <plugins>
   <plugin>
       <groupId>org.apache.maven.plugins</groupId>
       <artifactId>maven-compiler-plugin</artifactId>
       <version>${maven.compiler.version}</version>
       <configuration>
           <release>${java.release.version}</release>
           <encoding>${maven.source.encoding}</encoding>
           <forceJavacCompilerUse>true</forceJavacCompilerUse>
       </configuration>
   </plugin>
   <plugin>
       <groupId>org.apache.maven.plugins</groupId>
       <artifactId>maven-surefire-plugin</artifactId>
       <version>${surefire-version}</version>
       <executions>
           <execution>
               <goals>
                   <goal>test</goal>
               </goals>
           </execution>
       </executions>
       <configuration>
           <useSystemClassLoader>false</useSystemClassLoader>
           <properties>
               <property>
                   <name>usedefaultlisteners</name>
                   <value>false</value>
               </property>
           </properties>
           <suiteXmlFiles>
               <suiteXmlFile>${suite-xml}</suiteXmlFile>
           </suiteXmlFiles>
           <argLine>${argLine}</argLine>
       </configuration>
   </plugin>
   </plugins>
   </build>
</project>

دعونا ننتقل الآن إلى الكود؛ تم استخدام نموذج الصفحة الكائن (POM) في هذا المشروع لأنه مفيد في تقليل تكرار الكود وتحسين صيانة قوائم الاختبار.

أولاً، سنجد موقع المستعار لـ “بعض النص” و“نص متداخل” على صفحة الوصول.

Java

  

public class HomePage {

   public SearchContext expandRootElement (WebElement element) {
       SearchContext shadowRoot = (SearchContext) ((JavascriptExecutor) getDriver ()).executeScript (
           "return arguments[0].shadowRoot", element);
       return shadowRoot;
   }
   public String getSomeText () {
       return getDriver ().findElement (By.cssSelector ("#shadow_content > span"))
           .getText ();
   }

   public String getShadowDomText () {
       WebElement shadowHost = getDriver ().findElement (By.id ("shadow_host"));
       SearchContext shadowRoot = shadowHost.getShadowRoot ();
       String text = shadowRoot.findElement (By.cssSelector ("#shadow_content > span"))
           .getText ();
       return text;
   }

   public String getNestedShadowText () {
       WebElement shadowHost = getDriver ().findElement (By.id ("shadow_host"));
       SearchContext shadowRoot = shadowHost.getShadowRoot ();
       WebElement shadowContent = shadowRoot.findElement (By.cssSelector ("#nested_shadow_host"));
       SearchContext shadowRootTwo = shadowContent.getShadowRoot ();
       String nestedText = shadowRootTwo.findElement (By.cssSelector ("#nested_shadow_content > div")).getText ();
       return nestedText;
   }

   public String getNestedText() {
     WebElement nestedText = getDriver ().findElement (By.id ("shadow_host")).getShadowRoot ()
         .findElement (By.cssSelector ("#nested_shadow_host")).getShadowRoot ()
         .findElement (By.cssSelector ("#nested_shadow_content > div"));
     return nestedText.getText ();
   }

   public String getNestedTextUsingJSExecutor () {
       WebElement shadowHost = getDriver ().findElement (By.id ("shadow_host"));
       SearchContext shadowRootOne = expandRootElement (shadowHost);
       WebElement nestedShadowHost = shadowRootOne.findElement (By.cssSelector ("#nested_shadow_host"));
       SearchContext shadowRootTwo = expandRootElement (nestedShadowHost);
       return shadowRootTwo.findElement (By.cssSelector ("#nested_shadow_content > div"))
           .getText ();

   }
}

جولة في الكود

العنصر الأول الذي سنجده في الكود < div id = "shadow_host" > باستخدام استراتيجية المستعار – id.

Java

  

	WebElement shadowHost = getDriver ().findElement (By.id ("shadow_host"));

بعد ذلك، نبحث عن أول جذر ظُل مستعار في DOM بجواره. لهذا، استخدمنا واجهة البحث. يتم إرجاع جذر الظل المستعار باستخدام الطريقة getShadowRoot(). إذا فحصت المقطع الفيديو أعلاه، #shadow-root (open) يقع بجوار الكود < div id = "shadow_host" >.

لتحديد النص – “بعض النص،” هناك عنصر واحد فقط من DOM المستعار نحتاج للوصول إليه.

السطر التالي من الكود يساعدنا على الحصول على عنصر جذر الظل.

Java

  

	SearchContext shadowRoot = downloadsManager.getShadowRoot();

بمجرد العثور على جذر الظل، يمكننا البحث عن العنصر لتحديد النص – “بعض النص.” السطر التالي من الكود يساعدنا على الحصول على النص:

Java

  

	String text = shadowRoot.findElement (By.cssSelector ("#shadow_content > span"))
	 .getText ();

بعد ذلك، دعونا نجد مكان النص “نص متداخل،” الذي يحتوي على عنصر جذر ظل متداخل، ودعونا نكتشف كيفية الوصول إلى عنصره.

طريقة getNestedShadowText():

بدءًا من الأعلى، كما ناقشنا في القسم أعلاه، نحتاج إلى تحديد
<كود>< div id = “shadow_host” > باستخدام استراتيجية الموقع – المعرف.

Java

  

	WebElement shadowHost = getDriver ().findElement (By.id ("shadow_host"));

بعد ذلك، نحتاج إلى العثور على عنصر جذر الظل باستخدام طريقة getShadowRoot()؛ بمجرد الحصول على عنصر جذر الظل، سنحتاج إلى الدخول في البحث عن جذر الظل الثاني باستخدام cssSelector للوصول إلى:

Java

  

	<div id ="nested_shadow_host">
Java

  

SearchContext shadowRoot = shadowHost.getShadowRoot ();
	WebElement shadowContent = shadowRoot.findElement (By.cssSelector ("#nested_shadow_host"));

بعد ذلك، نحتاج إلى العثور على عنصر جذر الظل الثاني باستخدام <كود>طريقة getShadowRoot(). أخيرًا، لقد حان الوقت لتحديد العنصر الفعلي للحصول على النص – “نص متداخل.”
ستساعدنا السطر التالي من الكود في تحديد النص:

Java

  

SearchContext shadowRootTwo = shadowContent.getShadowRoot ();
	String nestedText = shadowRootTwo.findElement (By.cssSelector ("#nested_shadow_content > div"

كتابة الكود بطريقة ميسرة

في القسم أعلاه من هذا المدونة حول Shadow DOM في Selenium، رأينا طريقة طويلة من أين نحتاج إلى تحديد العنصر الفعلي الذي نريد العمل معه، وعلينا إجراء تهيئات متعددة لواجهات WebElement و SearchContext وكتابة أسطر كثيرة من الكود لتحديد عنصر واحد للعمل معه.

لدينا أيضًا طريقة ميسرة لكتابة هذا الكود بأكمله، وهذه هي الطريقة التي يمكنك القيام بها:

Java

  

public String getNestedText() {
	 WebElement nestedText = getDriver ().findElement (By.id ("shadow_host"))
		 .getShadowRoot ()
		 .findElement (By.cssSelector ("#nested_shadow_host"))
		 .getShadowRoot ()
		 .findElement (By.cssSelector ("#nested_shadow_content > div"));
	 return nestedText.getText ();
	}

تعتمد طراز تصميم Fluent Interface بشكل كبير على تتابع الطرق. نمط Fluent Interface يساعدنا على كتابة كود قابل للقراءة بسهولة يمكن فهمه دون الحاجة إلى تحقيق فهم تقني للكود. تم ابتكار هذا المصطلح لأول مرة في عام 2005 من قبل إريك إيفانز ومارتن فولر.

هذه طريقة تتابع الطرق التي سنقوم بها للعثور على العنصر.

هذا الكود يقوم بنفس المهمة التي قمنا بها في الخطوات السابقة.

  1. أولاً، سنقوم بالعثور على عنصر shadow_host باستخدام معرّفه، ثم نحصل على عنصر Shadow Root باستخدام طريقة getShadowRoot().
  2. بعد ذلك، سنبحث عن عنصر nested_shadow_host باستخدام محدد CSS ونحصل على عنصر Shadow Root باستخدام طريقة getShadowRoot().
  3. أخيراً، سنحصل على نص “النص المتبقي” باستخدام محدد CSS – nested_shadow_content > div.

كيفية العثور على Shadow DOM في Selenium باستخدام JavaScriptExecutor

في أمثلة الكود السابقة، قمنا بالعثور على العناصر باستخدام طريقة getShadowRoot(). دعونا الآن نرى كيف يمكننا العثور على عناصر الجذر المتبقي باستخدام JavaScriptExecutor في Selenium WebDriver.

getNestedTextUsingJSExecutor() يتم إنشاء الطريقة داخل فئة الصفحة الرئيسية،
حيث سنقوم بتوسيع عقدة الجذر المخفية بناءً على العنصر الإلكتروني المرور في المعلمة. في DOM (كما هو موضح في الصورة أعلاه)، رأينا أن هناك عقدتين جذر مخفيتين نحتاج إلى توسيعهما قبل أن نصل إلى الموقع الفعلي للحصول على النص المدمج – النص المدمج. ولذلك تم إنشاء طريقة expandRootElement() بدلاً من نسخ ولصق نفس رمز مُكتتب الجافا سكريبت في كل مرة.

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

Java

  

	public SearchContext expandRootElement (WebElement element) {
	   SearchContext shadowRoot = (SearchContext) ((JavascriptExecutor) getDriver ()).executeScript (
		   "return arguments[0].shadowRoot", element);
	   return shadowRoot;
	}

طريقة getNestedTextUsingJSExecutor()

سنقوم أولاً بالعثور على العنصر الأول وهو < div id = "shadow_host" > عن طريق استراتيجية الموقع – المعرف.

بعد ذلك، سنقوم بتوسيع عقدة الجذر بناءً على العنصر الإلكتروني shadow_host الذي بحثنا عنه.

Java

  

	WebElement shadowHost = getDriver ().findElement (By.id ("shadow_host"));
	SearchContext shadowRootOne = expandRootElement (shadowHost);

بعد توسيع عقدة الجذر الأولى، يمكننا البحث عن عنصر إلكتروني آخر باستخدام cssSelector للعثور على:

Java

  

	<div id ="nested_shadow_host">
Java

  

WebElement nestedShadowHost = shadowRootOne.findElement (By.cssSelector ("#nested_shadow_host"));
	SearchContext shadowRootTwo = expandRootElement (nestedShadowHost);

أخيراً، لقد حان الوقت الآن للعثور على العنصر الفعلي للحصول على النص – “النص المدمج.”

ستساعدنا السطر التالي من الكود في تحديد النص:

Java

  

shadowRootTwo.findElement (By.cssSelector ("#nested_shadow_content > div"))
				.getText ();

توضيح

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

Java

  

@Test
	public void testShadowDomWatir () {
	   getDriver ().get ("http://watir.com/examples/shadow_dom.html");
	   HomePage homePage = new HomePage ();
	  // assertEquals (homePage.getSomeText(), "some text");
	   assertEquals (homePage.getShadowDomText (), "some text");
	   assertEquals (homePage.getNestedShadowText (),"nested text");
	   assertEquals (homePage.getNestedText (), "nested text");
	   assertEquals (homePage.getNestedTextUsingJSExecutor (), "nested text");
	}

هذا مجرد اختبار بسيط للتأكد من أن النصوص تظهر بشكل صحيح كما هو متوقع. سنتحقق من ذلك باستخدام الادعاء assertEquals() في TestNG.

في القيمة الفعلية، سنقدم الطريقة التي كتبناها للحصول على النص من الصفحة، وفي القيمة المتوقعة، سنمرر النص “some text” أو “nested text,” اعتمادًا على الادعاءات التي سنقوم بها.

تم توفير أربعة عبارات assertEquals في الاختبار.

  • فحص عنصر Shadow DOM باستخدام طريقة getShadowRoot():

  • فحص عنصر Shadow DOM المتبقي باستخدام طريقة getShadowRoot():

  • فحص عنصر Shadow DOM المتبقي باستخدام طريقة getShadowRoot() والكتابة بطريقة ميسرة:

التنفيذ

هناك طريقتان لتشغيل الاختبارات لأتمتة Shadow DOM في Selenium:

  1. من IDE باستخدام TestNG
  2. من واجهة الأوامر باستخدام Maven

أتمتة Shadow DOM في سلينيوم ويب درايفر باستخدام TestNG

TestNG يستخدم كجهاز تشغيل اختبار. وبالتالي تم إنشاء ملف testng.xml، والذي سنقوم بتشغيل الاختبارات من خلال النقر بزر الماوس الأيمن على الملف واختيار الخيار Run ‘…\testng.xml’. ولكن قبل تشغيل الاختبارات، نحتاج إلى إضافة اسم المستخدم ومفتاح الوصول لـ LambdaTest في Run Configurations حيث نقوم بقراءة اسم المستخدم ومفتاح الوصول من خصائص النظام.

تقدم LambdaTest اختبارًا متعدد المتصفحات على مزرعة متصفح على الإنترنت تتألف من أكثر من 3000 متصفح حقيقي وأنظمة التشغيل لمساعدتك في تشغيل اختبارات Java في الوضع المحلي و/أو في السحابة. يمكنك تسريع اختبارات Selenium باستخدام Java وتقليل وقت تنفيذ الاختبار بمقدار كبير من خلال تشغيل اختبارات متوازية على متصفحات وإعدادات نظام التشغيل المختلفة.

  • أضف القيم في Run Configuration كما هو مذكور أدناه:
    • Dusername = < LambdaTest username >
    • DaccessKey = < LambdaTest access key >
Java

  

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE suite SYSTEM "http://testng.org/testng-1.0.dtd">
<suite name="Sauce Demo Website Tests">
   <test name="Shadow DOM Tests on Watir Website">
       <parameter name="browser" value="remote-chrome"/>
       <classes>
           <class name="ShadowDomTests">
               <methods>
                   <include name="testShadowDomWatir"/>
               </methods>
           </class>
       </classes>
   </test> <!-- Test -->
</suite>

فيما يلي لقطة للاختبار المحلي لـ Shadow DOM في Selenium باستخدام Intellij IDE.

أتمتة Shadow DOM في Selenium WebDriver باستخدام Maven

لتشغيل الاختبارات باستخدام Maven، يجب تنفيذ الخطوات التالية لأتمتة Shadow DOM في Selenium:

  1. افتح محطة الأوامر/المحصلة.
  2. انتقل إلى مجلد الجذر للمشروع.
  3. اكتب الأمر: mvn clean install -Dusername=< LambdaTest username > -DaccessKey=< LambdaTest accessKey >.

إليكم لقطة الشاشة من IntelliJ، التي تظهر حالة تنفيذ الاختبارات باستخدام Maven:

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

لوحة التحكم في LambdaTest

تظهر اللقطات التوضيحية التالية تفاصيل البناء والاختبارات التي تم تشغيلها لأتمتة DOM الظلام في Selenium. مرة أخرى، اسم الاختبار، اسم المتصفح، إصدار المتصفح، اسم نظام التشغيل، إصدار نظام التشغيل المقابل، ودقة الشاشة كلها مرئية بشكل صحيح لكل اختبار.

يحتوي أيضًا على فيديو للاختبار الذي تم تشغيله، مما يعطي فكرة أفضل عن كيفية تشغيل الاختبارات على الجهاز.

تفاصيل البناء

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

تفاصيل البناء – مع السجلات

يمكنك الوصول إلى أحدث نتائج الاختبارات وحالتها وعدد الاختبارات التي تم تمريرها أو فشلها بشكل عام في لوحة القياسات في LambdaTest. علاوة على ذلك، يمكنك رؤية صور مأخوذة من المدَّارات الأخيرة التي تم تنفيذها في قسم نظرة عامة على الاختبارات.

الخاتمة

في هذه المقالة حول تشغيل Shadow DOM في Selenium، ناقشنا كيفية العثور على عناصر Shadow DOM وتشغيلها باستخدام طريقة getShadowRoot() التي أُدخلت في إصدار 4.0.0 وما بعده من Selenium WebDriver.

كما ناقشنا تحديد وتشغيل عناصر Shadow DOM باستخدام JavaScriptExecutor في Selenium WebDriver وتشغيل الاختبارات على منصة LambdaTest، التي تظهر تفاصيل دقيقة عن الاختبارات التي تم تشغيلها مع سجلات Selenium WebDriver.

I hope this blog on Shadow DOM in Selenium gives you a fair idea about automating Shadow DOM elements using Selenium WebDriver.

تمتعوا بالاختبار!

Source:
https://dzone.com/articles/how-to-automate-shadow-dom-in-selenium-webdriver