다음을 사용한 크로스 브라우저 테스트 Selenium 웹드라이버

⚡ 스마트 요약

다음을 사용한 크로스 브라우저 테스트 Selenium WebDriver는 웹 애플리케이션이 Chrome에서 일관되게 작동하는지 확인합니다. FirefoxSafari 및 Edge 브라우저를 사용하는 경우, 이 튜토리얼에서는 이러한 브라우저들을 결합하는 방법을 보여줍니다. Selenium 웹드라이버 TestNG 병렬 세션을 시작하고, 렌더링을 검증하고, 최신 데스크톱 및 모바일 브라우저 전반에 걸쳐 적용 범위를 확장합니다.

  • 🌐 왜 문제 : 실제 사용자는 서로 다른 브라우저에서 동일한 페이지를 열기 때문에 전환율과 접근성을 보호하려면 레이아웃, 스크립트 및 스타일이 모든 환경에서 동일하게 작동해야 합니다.
  • 🧪 Selenium WebDriver 설정: ChromeDriver, GeckoDriver, EdgeDriver 및 SafariDriver를 구성한 다음 단일 매개변수화된 메서드를 통해 올바른 인스턴스를 선택합니다.
  • 📱 TestNG 병렬 실행: parallel="tests"가 포함된 testing.xml 파일은 Chrome을 실행합니다. Firefox또한 Edge 제품군을 동시에 사용하여 대규모 회귀 테스트 팩에 대한 피드백 주기를 단축합니다.
  • 발견된 일반적인 결함: 글꼴 크기 조정, CSS 레이아웃 변경 Java스크립트 폴리필 부족, HTML5 지원, 이미지 방향, 운영체제와 브라우저 간의 불일치 등의 문제가 빠르게 드러납니다.
  • 🛠️ 클라우드 랩과 AI: Sauce Labs, BrowserStack, LambdaTest는 수천 개의 OS-브라우저 쌍에 대한 테스트 범위를 확장했으며, AI 기반 시각적 회귀 분석 및 자체 복구 로케이터를 통해 안정성을 향상시켰습니다.

크로스 브라우저 테스트 Selenium 웹드라이버

크로스 브라우저 테스트가 필요한 이유는 무엇입니까?

웹 기반 애플리케이션은 네이티브 데스크톱 애플리케이션과는 매우 다릅니다. 웹 애플리케이션은 최종 사용자가 어떤 브라우저에서든 열 수 있습니다. 예를 들어, 어떤 사람들은 웹 브라우저에서 애플리케이션을 여는 것을 선호합니다. https://twitter.com in Firefox, 다른 사람들은 크롬, SafariMicrosoft Edge.

아래 그림에서 볼 수 있듯이, 구형 브라우저에서는 트위터 로그인 상자의 모서리가 둥글게 제대로 표시되지 않지만, 최신 크롬에서는 디자인대로 모서리가 표시됩니다.

크로스 브라우저 테스트

따라서 더 많은 사람들이 웹 애플리케이션에 접근하고 사용할 수 있도록 모든 인기 브라우저에서 예상대로 작동하는지 확인해야 합니다.

이 목표는 크로스 브라우저를 통해 달성할 수 있습니다. 지원 범위 내 모든 브라우저에서 제품의 성능을 확인할 수 있습니다.

브라우저 간 호환성 문제의 원인

  1. 다양한 브라우저에서 글꼴 크기가 일치하지 않습니다.
  2. JavaChrome(V8)의 스크립트 엔진 구현 방식은 버전에 따라 다릅니다. Firefox (스파이더몽키), 사파리 (JavaScriptCore) 및 Edge.
  3. CSS 및 HTML 유효성 검사의 차이점(벤더 접두사 처리 방식 포함).
  4. 이전 브라우저 버전에서 HTML5 및 ECMAScript 기능 지원이 일관되지 않거나 불완전합니다.
  5. 페이지 정렬, div 크기 조정, 플렉스박스 또는 그리드 렌더링 방식 등 다양한 옵션.
  6. 이미지 방향 및 색상 프로필 차이.
  7. 기본 운영 체제와의 브라우저 호환성 문제, 특히 모바일 WebView의 특이점 Android 및 iOS.

크로스 브라우저 테스트를 수행하는 방법

우리가 사용하는 경우 Selenium WebDriver를 사용하면 Chrome에 대한 테스트 케이스를 자동화할 수 있습니다. Firefox, Microsoft Edge및 Safari 브라우저.

같은 컴퓨터에서 여러 브라우저를 사용하여 동시에 테스트 케이스를 실행하려면 다음을 통합할 수 있습니다. TestNG 프레임워크 Selenium WebDriver를 사용하면 더 폭넓은 운영 체제 및 버전 지원을 위해 Sauce Labs, BrowserStack 또는 LambdaTest와 같은 클라우드 그리드에 원격 WebDriver 엔드포인트를 통해 동일한 테스트 스위트를 연결할 수 있습니다.

testing.xml 파일은 다음과 같을 것입니다.

크로스 브라우저 테스트

이 test.xml은 다음과 매핑됩니다. 테스트 케이스 이것은 다음과 같습니다.

크로스 브라우저 테스트

testing.xml 파일에 여러 개의 Test 태그('ChromeTest', ')가 있기 때문에Firefox'Test', 'EdgeTest'와 같은 테스트 케이스는 각 브라우저에 대해 한 번씩 실행됩니다.

첫 번째 테스트 '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");
	}
}

테스트.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'실행'을 선택하고 클릭하세요. TestNG 모음곡.

 크로스 브라우저 테스트

클라우드 브라우저 그리드를 활용한 확장

달리는 Selenium WebDriver는 로컬 환경에서 두세 가지 브라우저만 지원하지만, 실제 사용자는 수백 가지의 운영체제와 브라우저 조합으로 사이트에 접속합니다. 클라우드 랩과 같은 환경에서는 이러한 환경을 고려할 수 있습니다. 소스 연구실, BrowserStack예산 및 람다 테스트 원격 WebDriver 엔드포인트를 노출합니다. 동일한 것을 가리키도록 합니다. Selenium 그리드 환경에서 테스트를 수행하고, 브라우저, 버전, 운영 체제 및 해상도에 대한 원하는 기능을 충족하며, 로컬 드라이버를 관리할 필요 없이 제품군을 수평적으로 확장할 수 있습니다.

최신 그리드는 시각적 회귀 비교, 자체 복구 요소 찾기, 불안정성 점수 매기기와 같은 AI 지원 기능을 제공하여 장기간 사용되는 크로스 브라우저 테스트 스위트의 유지 관리 부담을 줄여줍니다.

참고 : 제공된 프로그램은 다음 환경에서 빌드 및 테스트되었습니다. Selenium 4, 크롬, Firefox예산 및 Microsoft Edge프로그램에서 오류가 발생하면 설치된 브라우저 버전에 맞게 드라이버 바이너리를 업데이트하거나 다음 방법을 사용하십시오. Selenium 드라이버를 자동으로 해결하는 관리자입니다.

를 다운로드 Selenium 이 튜토리얼의 데모용 프로젝트 파일

자주 묻는 질문

크로스 브라우저 테스트는 웹 애플리케이션이 크롬에서도 동일하게 작동하는지 확인하는 기능적이고 시각적인 테스트 기법입니다. Firefox, 사파리 및 Microsoft Edge 데스크톱과 모바일을 아우르며, 다양한 운영 체제와 뷰포트 크기를 포함합니다.

Selenium WebDriver는 Chrome을 구동하는 단일 API를 제공합니다. FirefoxWebDriver는 공식 W3C WebDriver 프로토콜을 통해 Edge 및 Safari에서 실행됩니다. 동일한 테스트 코드가 모든 브라우저에서 실행되므로 어떤 브라우저에서도 실행 가능합니다. Selenium WebDriver는 브라우저 자동화 및 크로스 브라우저 테스트를 위한 사실상의 표준입니다.

TestNG testing.xml 파일에서 parallel="tests" 및 thread-count 설정을 사용하여 각 Test 태그를 별도의 스레드에서 실행합니다. 매개변수화된 @BeforeTest 설정과 결합하면 동일한 결과를 얻을 수 있습니다. Selenium WebDriver 제품군은 Chrome에서 실행됩니다. FirefoxEdge와 동시에 실행하여 전체 실행 시간을 단축합니다.

Sauce Labs, BrowserStack 및 LambdaTest는 호스팅 서비스를 제공합니다. Selenium iOS, Safari 등을 포함하여 수천 가지의 운영체제 및 브라우저 조합을 보여주는 그리드 Android Chrome에서 RemoteWebDriver를 그리드 엔드포인트로 지정하고 원하는 기능을 전달하여 동일한 코드를 대규모로 실행할 수 있습니다.

Applitools, Percy, BrowserStack 및 LambdaTest의 시각화 모듈에 내장된 것과 같은 AI 기반 시각 회귀 엔진은 픽셀 단위가 아닌 의미론적으로 스크린샷을 비교합니다. 이러한 엔진은 Chrome, FirefoxSafari 및 Edge에서도 레이아웃 오류를 감지하여 크로스 브라우저 테스트 파이프라인에서 오탐을 크게 줄입니다.

예. Healenium과 같은 최신 프레임워크는 TestimMabl과 AI 기능은 다음과 같습니다. Selenium IDE는 DOM을 분석하여 안정적인 XPath 또는 CSS 선택자를 제안합니다. UI 변경으로 인해 선택자가 제대로 작동하지 않을 경우, AI가 생성한 선택자는 주변 요소를 평가하고 가장 유사한 항목을 선택하여 자체적으로 문제를 해결합니다. 이를 통해 수동 관리 부담을 줄이면서 크로스 브라우저 테스트를 성공적으로 완료할 수 있습니다.

일반적인 결함으로는 글꼴 및 CSS 렌더링 불일치가 있습니다. Java스크립트 엔진의 일관성 부족, HTML5 또는 ES 기능 지원 오류, 이미지 방향 문제, 페이지 정렬 문제, 공급업체 접두사 누락, iOS Safari에서의 OS별 오류 등 Android 크롬.

이 게시물을 요약하면 다음과 같습니다.