اختبار عبر المتصفح باستخدام Selenium ويب درايفر

لماذا نحتاج إلى اختبار عبر المتصفحات؟

تختلف تطبيقات الويب اختلافًا كبيرًا عن تطبيقات سطح المكتب الأصلية. يمكن للمستخدم النهائي فتح تطبيق الويب في أي متصفح. على سبيل المثال، يفضل بعض الأشخاص فتحه في متصفحات أخرى. https://twitter.com in Firefox، بينما يستخدم الآخرون الكروم, سفاري أو Microsoft Edge.

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

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

يمكن تحقيق هذا الهدف باستخدام متصفحات متعددة الاختبار المنتج على كل متصفح ضمن النطاق.

أسباب مشاكل التوافق بين المتصفحات

1. عدم تطابق حجم الخط في المتصفحات المختلفة.
2. Javaتختلف تطبيقات محرك البرمجة النصية عبر متصفح كروم (الإصدار 8). Firefox (سبايدر مونكي)، سفاري (JavaScriptCore)، و Edge.
3. الاختلافات في التحقق من صحة CSS و HTML، بما في ذلك معالجة بادئة البائع.
4. دعم غير متناسق أو جزئي لميزات HTML5 وECMAScript في إصدارات المتصفحات القديمة.
5. محاذاة الصفحة، وحجم عناصر div، واختلافات عرض flexbox أو الشبكة.
6. اختلافات اتجاه الصورة وملف تعريف الألوان.
7. عدم توافق المتصفح مع نظام التشغيل الأساسي، بما في ذلك مشاكل WebView على الأجهزة المحمولة Android و iOS.

كيفية إجراء اختبار عبر المتصفح

إذا كنا نستخدم ملفات Selenium باستخدام WebDriver، يمكننا أتمتة حالات الاختبار على متصفح Chrome. Firefox, Microsoft Edgeومتصفحات سفاري.

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

سيبدو ملف testing.xml الخاص بك كالتالي:

سيتم تعيين ملف test.xml هذا مع ملف حالة الاختبار والتي تبدو مثل هذا:

لأن ملف testing.xml يحتوي على عدة وسوم اختبار ('ChromeTest', 'Firefox(اختبار، اختبار الحافة)، سيتم تنفيذ حالة الاختبار هذه مرة واحدة لكل متصفح.

سيُمرر الاختبار الأول 'ChromeTest' قيمة المعامل 'browser' كـ 'chrome'، وبالتالي سيتم تنفيذ ChromeDriver. سيتم تشغيل حالة الاختبار هذه على متصفح Chrome.

الاختبار الثانيFirefox"الاختبار" سوف يمرر قيمة المعلمة "المتصفح" كـ "Firefox'، لذا Firefoxسيتم تنفيذ برنامج التشغيل. سيتم تشغيل حالة الاختبار هذه على Firefox المتصفح. إضافة اختبار Edge أو Safari يتبع نفس النمط.

Guru99CrossBrowserScript.java

اكتملت Code:

package parallelTest;

import java.util.concurrent.TimeUnit;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.edge.EdgeDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.safari.SafariDriver;
import org.testng.annotations.BeforeTest;
import org.testng.annotations.Parameters;
import org.testng.annotations.Test;

public class CrossBrowserScript {

	WebDriver driver;

	/**
	 * This function will execute before each Test tag in testng.xml
	 * @param browser
	 * @throws Exception
	 */
	@BeforeTest
	@Parameters("browser")
	public void setup(String browser) throws Exception{
		//Check if parameter passed from TestNG is 'firefox'
		if(browser.equalsIgnoreCase("firefox")){
		//create firefox instance
			System.setProperty("webdriver.gecko.driver", ".\\geckodriver.exe");
			driver = new FirefoxDriver();
		}
		//Check if parameter passed as 'chrome'
		else if(browser.equalsIgnoreCase("chrome")){
			//set path to chromedriver.exe
			System.setProperty("webdriver.chrome.driver",".\\chromedriver.exe");
			//create chrome instance
			driver = new ChromeDriver();
		}
		//Check if parameter passed as 'Edge'
		else if(browser.equalsIgnoreCase("Edge")){
			//set path to msedgedriver.exe
			System.setProperty("webdriver.edge.driver",".\\msedgedriver.exe");
			//create Edge instance
			driver = new EdgeDriver();
		}
		//Check if parameter passed as 'Safari'
		else if(browser.equalsIgnoreCase("Safari")){
			//SafariDriver ships with macOS, no driver path needed
			driver = new SafariDriver();
		}
		else{
			//If no browser passed throw exception
			throw new Exception("Browser is not correct");
		}
		driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
	}

	@Test
	public void testParameterWithXML() throws InterruptedException{
		driver.get("https://demo.guru99.com/V4/");
		//Find user name
		WebElement userName = driver.findElement(By.name("uid"));
		//Fill user name
		userName.sendKeys("guru99");
		//Find password
		WebElement password = driver.findElement(By.name("password"));
		//Fill password
		password.sendKeys("guru99");
	}
}

test.xml

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE suite SYSTEM "http://testng.org/testng-1.0.dtd">

<suite name="TestSuite" thread-count="3" parallel="tests" >

<test name="ChromeTest">

<parameter name="browser" value="Chrome" />

<classes>

<class name="parallelTest.CrossBrowserScript">

</class>

</classes>

</test>

<test name="FirefoxTest">

<parameter name="browser" value="Firefox" />

<classes>

<class name="parallelTest.CrossBrowserScript">

</class>

</classes>

</test>

<test name="EdgeTest">

<parameter name="browser" value="Edge" />

<classes>

<class name="parallelTest.CrossBrowserScript">

</class>

</classes>

</test>

</suite>

NOTE: لتشغيل الاختبار، انقر بزر الماوس الأيمن على test.xmlحدد "تشغيل كـ"، ثم انقر فوق TestNG جناح.

التوسع باستخدام شبكات متصفح السحابة

الركض Selenium يدعم WebDriver محليًا متصفحين أو ثلاثة، لكن المستخدمين الحقيقيين يصلون إلى المواقع من مئات أنظمة التشغيل ومجموعات المتصفحات. مختبرات الحوسبة السحابية مثل مختبرات الصلصة, BrowserStackو LambdaTest قم بتعريض نقطة نهاية WebDriver عن بُعد. قم بتوجيهها إلى نفس Selenium الاختبارات على الشبكة، وتمرير الإمكانيات المطلوبة للمتصفح والإصدار ونظام التشغيل والدقة، وتتوسع المجموعة أفقيًا دون إدارة برامج التشغيل المحلية.

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

ملاحظة: تم بناء البرنامج المذكور واختباره على Selenium 4، كروم، Firefoxو Microsoft Edgeإذا ظهرت أخطاء في البرامج، يُرجى تحديث ملفات تعريف التشغيل لتتوافق مع إصدار المتصفح المُثبّت لديك، أو استخدام Selenium مدير يقوم بحل مشاكل تعريفات الأجهزة تلقائيًا.

تحميل Selenium ملفات المشروع للعرض التوضيحي في هذا البرنامج التعليمي

الأسئلة الشائعة