การทดสอบข้ามเบราว์เซอร์โดยใช้ Selenium ไดรเวอร์เว็บ

เหตุใดเราจึงต้องทดสอบข้ามเบราว์เซอร์?

แอปพลิเคชันบนเว็บแตกต่างจากแอปพลิเคชันบนเดสก์ท็อปอย่างมาก แอปพลิเคชันบนเว็บสามารถเปิดได้ในเบราว์เซอร์ใดก็ได้โดยผู้ใช้ปลายทาง ตัวอย่างเช่น บางคนอาจชอบเปิดแอปพลิเคชันบนเว็บผ่านเบราว์เซอร์อื่น https://twitter.com in Firefoxในขณะที่คนอื่นใช้ Chrome, Safariหรือ Microsoft Edge.

จากแผนภาพด้านล่าง คุณจะสังเกตได้ว่าในเบราว์เซอร์รุ่นเก่า กล่องล็อกอินของ Twitter ไม่แสดงมุมโค้งมนอย่างถูกต้อง ในขณะที่ Chrome รุ่นใหม่แสดงมุมโค้งมนได้ตามที่ออกแบบไว้

ดังนั้น เราจึงต้องตรวจสอบให้แน่ใจว่าเว็บแอปพลิเคชันจะทำงานได้ตามที่คาดหวังในทุกเบราว์เซอร์ยอดนิยม เพื่อให้ผู้คนจำนวนมากขึ้นสามารถเข้าถึงและใช้งานได้

เป้าหมายนี้สามารถบรรลุได้ด้วยการใช้งานข้ามเบราว์เซอร์ การทดสอบ ของผลิตภัณฑ์บนทุกเบราว์เซอร์ที่อยู่ในขอบเขตการใช้งาน

สาเหตุของปัญหาการใช้งานข้ามเบราว์เซอร์

1. ขนาดตัวอักษรไม่ตรงกันในเบราว์เซอร์ที่แตกต่างกัน
2. Javaการใช้งานกลไกสคริปต์แตกต่างกันไปในแต่ละเวอร์ชันของ Chrome (V8) Firefox (สไปเดอร์มังกี้), ซาฟารี (JavaScriptCore) และ Edge
3. ความแตกต่างระหว่างการตรวจสอบความถูกต้องของ CSS และ HTML รวมถึงการจัดการคำนำหน้าของผู้ผลิต (vendor prefix)
4. การรองรับคุณสมบัติ HTML5 และ ECMAScript ในเบราว์เซอร์เวอร์ชันเก่าอาจไม่สม่ำเสมอหรือไม่สมบูรณ์
5. การจัดตำแหน่งหน้า การกำหนดขนาด div และรูปแบบการแสดงผลแบบ flexbox หรือ grid
6. ความแตกต่างของการวางแนวภาพและโปรไฟล์สี
7. ความไม่เข้ากันของเบราว์เซอร์กับระบบปฏิบัติการพื้นฐาน รวมถึงปัญหาแปลกๆ ของ WebView บนมือถือ Android และ iOS

วิธีทำการทดสอบข้ามเบราว์เซอร์

ถ้าเราใช้ Selenium WebDriver ช่วยให้เราสามารถสร้างระบบอัตโนมัติในการทดสอบกับ Chrome ได้ Firefox, Microsoft Edgeและเบราว์เซอร์ Safari

เพื่อให้สามารถเรียกใช้กรณีทดสอบด้วยเบราว์เซอร์ต่างๆ บนเครื่องเดียวกันในเวลาเดียวกันได้ เราสามารถผสานรวม... TestNG กรอบด้วย Selenium WebDriver. สำหรับการครอบคลุมระบบปฏิบัติการและเวอร์ชันที่กว้างขึ้น ชุดเครื่องมือเดียวกันนี้สามารถชี้ไปยังระบบคลาวด์ เช่น Sauce Labs, BrowserStack หรือ LambdaTest ผ่านทาง WebDriver endpoint ระยะไกลได้

ไฟล์ testing.xml ของคุณจะมีลักษณะดังนี้:

Testing.xml นี้จะแมปกับไฟล์ กรณีทดสอบ ซึ่งมีลักษณะดังนี้:

เนื่องจากไฟล์ testing.xml มีแท็ก Test หลายแท็ก ('ChromeTest', 'Firefoxหากใช้ชื่อ 'Test' หรือ 'EdgeTest' กรณีทดสอบนี้จะดำเนินการหนึ่งครั้งสำหรับแต่ละเบราว์เซอร์

การทดสอบแรก 'ChromeTest' จะส่งค่าพารามิเตอร์ 'browser' เป็น 'chrome' ดังนั้น ChromeDriver จะถูกเรียกใช้งาน กรณีทดสอบนี้จะทำงานบนเบราว์เซอร์ Chrome

การทดสอบครั้งที่สอง 'FirefoxTest' จะผ่านค่าของพารามิเตอร์ 'browser' เป็น '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");
	}
}

การทดสอบ.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>

หมายเหตุ: หากต้องการเรียกใช้การทดสอบ ให้คลิกขวาที่ การทดสอบ.xmlเลือก Run As แล้วคลิก TestNG ห้องสวีท

การปรับขนาดด้วย Cloud Browser Grids

เล่น Selenium WebDriver รองรับเบราว์เซอร์เพียงสองหรือสามตัวในเครื่อง แต่ผู้ใช้จริงเข้าถึงเว็บไซต์จากระบบปฏิบัติการและเบราว์เซอร์หลายร้อยแบบ ห้องปฏิบัติการบนคลาวด์ เช่น ซอสแล็บ, BrowserStackและ การทดสอบแลมบ์ดา เปิดเผยเอนด์พอยต์ WebDriver ระยะไกล ชี้ไปยังที่เดียวกัน Selenium การทดสอบบนระบบกริดจะผ่านเกณฑ์ความสามารถที่ต้องการสำหรับเบราว์เซอร์ เวอร์ชัน ระบบปฏิบัติการ และความละเอียด และชุดทดสอบจะปรับขนาดในแนวนอนโดยไม่ต้องจัดการไดรเวอร์ในเครื่อง

นอกจากนี้ ตารางข้อมูลสมัยใหม่ยังนำเสนอคุณสมบัติที่ใช้ AI ช่วยเหลือ เช่น การเปรียบเทียบความแตกต่างแบบภาพ การระบุตำแหน่งองค์ประกอบที่แก้ไขตัวเองได้ และการให้คะแนนความไม่เสถียร ซึ่งช่วยลดภาระการบำรุงรักษาสำหรับชุดทดสอบข้ามเบราว์เซอร์ที่มีอายุการใช้งานยาวนาน

หมายเหตุ โปรแกรมดังกล่าวได้รับการสร้างและทดสอบบน Selenium 4. โครม Firefoxและ Microsoft Edgeหากโปรแกรมแสดงข้อผิดพลาด โปรดอัปเดตไฟล์ไบนารีของไดรเวอร์ให้ตรงกับเวอร์ชันเบราว์เซอร์ที่ติดตั้งไว้ หรือใช้... Selenium ตัวจัดการที่แก้ไขปัญหาไดรเวอร์โดยอัตโนมัติ

ดาวน์โหลด Selenium ไฟล์โครงการสำหรับการสาธิตในบทช่วยสอนนี้

คำถามที่พบบ่อย