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

크로스 브라우저 테스트가 필요한 이유는 무엇입니까?
웹 기반 애플리케이션은 네이티브 데스크톱 애플리케이션과는 매우 다릅니다. 웹 애플리케이션은 최종 사용자가 어떤 브라우저에서든 열 수 있습니다. 예를 들어, 어떤 사람들은 웹 브라우저에서 애플리케이션을 여는 것을 선호합니다. https://twitter.com in Firefox, 다른 사람들은 크롬, Safari및 Microsoft Edge.
아래 그림에서 볼 수 있듯이, 구형 브라우저에서는 트위터 로그인 상자의 모서리가 둥글게 제대로 표시되지 않지만, 최신 크롬에서는 디자인대로 모서리가 표시됩니다.
따라서 더 많은 사람들이 웹 애플리케이션에 접근하고 사용할 수 있도록 모든 인기 브라우저에서 예상대로 작동하는지 확인해야 합니다.
이 목표는 크로스 브라우저를 통해 달성할 수 있습니다. 지원 범위 내 모든 브라우저에서 제품의 성능을 확인할 수 있습니다.
브라우저 간 호환성 문제의 원인
- 다양한 브라우저에서 글꼴 크기가 일치하지 않습니다.
- JavaChrome(V8)의 스크립트 엔진 구현 방식은 버전에 따라 다릅니다. Firefox (스파이더몽키), 사파리 (JavaScriptCore) 및 Edge.
- CSS 및 HTML 유효성 검사의 차이점(벤더 접두사 처리 방식 포함).
- 이전 브라우저 버전에서 HTML5 및 ECMAScript 기능 지원이 일관되지 않거나 불완전합니다.
- 페이지 정렬, div 크기 조정, 플렉스박스 또는 그리드 렌더링 방식 등 다양한 옵션.
- 이미지 방향 및 색상 프로필 차이.
- 기본 운영 체제와의 브라우저 호환성 문제, 특히 모바일 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 이 튜토리얼의 데모용 프로젝트 파일




