Використання міжбраузерного тестування Selenium веб-драйвер

Навіщо нам кросбраузерне тестування?

Веб-додатки дуже відрізняються від нативних настільних додатків. Веб-додаток може бути відкритий кінцевим користувачем у будь-якому браузері. Наприклад, деякі люди надають перевагу відкриванню https://twitter.com in Firefox, а інші використовують Chrome, Safariабо Microsoft Edge.

На діаграмі нижче ви можете побачити, що у старіших браузерах поле входу в Twitter неправильно відображає закруглені кути, тоді як сучасний Chrome відтворює кути належним чином.

Отже, нам потрібно переконатися, що веб-застосунок працюватиме належним чином у всіх популярних браузерах, щоб більше людей могли отримати до нього доступ та використовувати його.

Цю мету можна досягти за допомогою кросбраузерності. Тестування продукту в кожному браузері, що охоплюється.

Причини проблем міжбраузерності

1. Невідповідність розміру шрифту в різних браузерах.
2. JavaРеалізація скриптових механізмів відрізняється в Chrome (V8), Firefox (Павукоподібна мавпа), Сафарі (JavaScriptCore) та Edge.
3. Відмінності у валідації CSS та HTML, зокрема обробка префіксів вендорів.
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.

Ваш файл testing.xml виглядатиме так:

Цей testing.xml зіставлятиметься з Тестовий випадок який виглядає ось так:

Оскільки testing.xml має кілька тегів Test ('ChromeTest', 'FirefoxTest', '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");
	}
}

testing.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>

ПРИМІТКА: Щоб запустити тест, клацніть правою кнопкою миші на testing.xml, виберіть «Запустити від імені» та натисніть кнопку TestNG Люкс.

Масштабування за допомогою хмарних браузерних сіток

Робота Selenium WebDriver локально охоплює два або три браузери, але реальні користувачі отримують доступ до сайтів із сотень комбінацій ОС та браузерів. Хмарні лабораторії, такі як Лабораторії соусів, BrowserStack та Лямбда-тест відкрити віддалену кінцеву точку WebDriver. Вкажіть те саме Selenium тести на рівні сітки, передають бажані можливості для браузера, версії, ОС та роздільної здатності, а пакет масштабується горизонтально без керування локальними драйверами.

Сучасні сітки також використовують функції за допомогою штучного інтелекту, такі як візуальне регресійне диференціювання, самовідновлювальні локатори елементів та оцінювання нестабільності, що зменшує витрати на обслуговування довготривалих пакетів кросбраузерного тестування.

Примітка: Дана програма була зібрана та протестована на Selenium 4, Хром, Firefox та Microsoft EdgeЯкщо програми видають помилку, будь ласка, оновіть бінарні файли драйвера відповідно до версії вашого встановленого браузера або скористайтеся Selenium Менеджер, який автоматично визначає драйвери.

Завантажити Selenium Файли проекту для демонстрації в цьому посібнику

Поширені запитання