셀레늄 페이지 로드 전략에 대한 전체 가이드

웹페이지 자동화는 널리 퍼지고 있으며, 대부분의 우리가 이를 작업하고 있습니다. 이는 거의 정기적으로 작업하는 부분으로, 여러 시나리오를 자동화하고 다양한 웹페이지를 탐색합니다.

그러나 Selenium WebDriver에서 웹페이지가 로드될 때 배후에서 무엇이 일어나는지 궁금해하신 적이 있으신가요? 웹페이지로 이동하는 데 사용되는 몇 가지 WebDriver 함수를 알고 있지만, get()이나 navigate()가 페이지 로드를 정의하는 것인지, 아니면 백엔드에서 다른 기능이 작동하는 것인지 궁금해 합니다.

이에 대한 답은 예입니다! 이는 Selenium WebDriver에서 페이지 로드 전략이라고 불리는 것에 의해 정의됩니다. WebDriver는 페이지 로드 전략을 사용하여 추가 상호 작용을 진행하기 전에 웹페이지가 어떻게 로드되어야 하는지 결정합니다; 다음 작업을 실행하기 위해서 말이죠.

이 블로그에서는 Selenium 페이지 로드 전략에 대해 더 깊이 있는 살펴보고 이 전략의 다양한 유형과 자동화 코드에서 어떻게 구현될 수 있는지 이해하려고 합니다.

시작해보죠!

페이지 로드 전략이란?

페이지 로드 전략은 자동화 코드가 브라우저를 시작하고 get() 또는 navigate().to() 메서드를 사용할 때 현재 세션에서 페이지가 언제 로드되었다고 간주되는지 정의합니다. 기본적으로 Selenium WebDriver는 전체 웹페이지와 그 구성 요소인 CSS, 이미지, 프레임 등이 로드될 때까지 기다리는 것으로 알려진 표준 페이지 로드 전략인 NORMAL을 사용합니다.

위에서 언급한 구성 요소로 인해 페이지 로드 시간이 길어지거나(또는 제한된 네트워크 상태로 인해) 스크립트에 중요하지 않은 경우, EAGER나 NONE으로 변경하여 실행 속도를 높일 수 있습니다. 이 값은 전체 세션에 적용되므로, 프로젝트에 맞는 선택을 하지 않으면 테스트 불안정성이 발생할 수 있습니다.

페이지 로드 전략의 사용은 Selenium 4 기능의 일부로 소개되었습니다. 이전 버전과 달리 기본 페이지 로드 타임아웃에 대한 의존성을 제거합니다.

페이지 로드 전략은 어떻게 작동하나요?

페이지 로드가 완료되었는지 여부를 확인하기 위해 Selenium은 document.readyState 속성을 사용합니다. document.readyState는 문서의 로딩 상태를 설명합니다. 여기서 문서는 브라우저에서 로드되는 모든 웹페이지를 의미합니다.

문서의 준비 상태 메소드는 모든 브라우저에서 지원하므로 Selenium의 PageLoadStrategy와 함께 사용하기에 안정적인 옵션입니다.

기본 PageLoadStrategy와 마찬가지로, Selenium WebDriver가 기다리는 기본 document.readyState는 Complete입니다.

브라우저의 문서 객체의 readyState 속성은 페이지 로딩 프로세스의 현재 상태를 나타냅니다. 이 속성은 다음 값 중 하나를 가질 수 있습니다:

• loading – 페이지가 계속 로드 중입니다.
• interactive – 페이지 로딩이 완료되었지만 이미지, 스타일시트, 프레임과 같은 하위 리소스는 계속 로드 중일 수 있습니다.
• complete – 페이지와 모든 하위 리소스 로딩이 완료되었습니다.

레디스테이트 속성을 사용하여 JavaScript 또는 기타 수단으로 조작할 준비가 완료된 페이지를 결정할 수 있습니다. 예를 들어, Selenium에서는 레디스테이트 속성을 사용하여 페이지가 로드되었고 Selenium 명령을 사용하여 페이지의 요소와 상호 작용할 수 있는지 확인할 수 있습니다.

앞으로 나아가기 전에 레디스테이트에 대해 조금 더 이해해 보기 위해 짧은 연습을 해보겠습니다.

1. 웹사이트로 이동합니다.웹사이트.
2. 사이트가 로드되면 마우스 오른쪽 버튼 -> 검사 클릭 -> 콘솔을 열고 document.readyState 명령을 실행합니다.

3. 이 명령의 결과로 현재 상태인 완료라는 출력을 볼 수 있습니다. 이는 필요한 리소스(즉, 이미지, CSS 등)로 전체 페이지가 로드되었음을 의미합니다.

4. 다음으로 페이지를 새로 고침하고 위의 명령어를 다시 입력하십시오. 다음과 같이 현재 문서의 로딩 상태를 볼 수 있습니다.

4-5회 새로 고침한 후 로딩 상태를 볼 수 없는 경우 네트워크를 느린 옵션으로 설정하여 인터넷 상태를 제한해 보십시오. 다른 네트워크 상태에서 웹사이트 테스트에 대해 자세히 알아볼 수 있는 이 블로그를 통해 자세히 알아볼 수 있습니다. 데모에서도 동일한 접근 방식을 사용할 것입니다.

이로써 document.readyState가 실제로 어떻게 작동하는지 보여줍니다. 또한 LT 브라우저를 사용하여 다양한 네트워크 조건에서 웹사이트의 성능을 확인할 수 있습니다. LT 브라우저는 LambdaTest가 제공하는 모바일 친화적인 테스터 도구로, 스마트폰, 태블릿, 노트북을 포함한 50가지 이상의 다양한 기기에서 웹사이트의 반응성을 테스트할 수 있습니다. 또한 사용자 정의 해상도를 생성하고, 다양한 네트워크 조건을 시뮬레이션하며, Google Lighthouse를 사용하여 성능 보고서를 생성할 수 있는 기능을 제공합니다. 

다음으로 이러한 값들과 PageLoadStrategy 값들이 어떻게 매핑되는지 이해해 보겠습니다.

PageLoadStrategy <> document.readyState 매핑

document의 readyState는 다음과 같은 값 중 하나일 수 있습니다:

• Loading: 문서 로드가 진행 중입니다.
• Interactive: 문서가 로드되고 구문 분석되었지만 스크립트, 이미지, CSS 및 프레임과 같은 하위 리소스는 아직 로드 중입니다. 이 시점에서 DOMContentLoaded 이벤트가 발생합니다.
• Complete: 문서와 모든 하위 리소스 로드가 완료되었습니다. 이는 load 이벤트가 발생한다는 것을 나타냅니다.

각 PageLoadStrategy는 WebDriver가 특정 document.readyState 값에 따라 탐색 메서드를 완료하고 다음 단계를 실행하기 위해 매핑됩니다.

Selenium의 페이지 로드 전략 유형

웹 자동화에서 사용할 수 있는 Selenium 페이지 로드 전략에는 일반적으로 세 가지 유형이 있습니다.

NORMAL (기본값, 지정하지 않은 경우)

이 Selenium Page Load Strategy는 WebDriver가 페이지 로드가 완료될 때까지 기다리게 합니다. 즉, 로드 이벤트가 발생할 때까지 기다립니다.

로드 이벤트는 페이지가 로드되었을 때 발생하며, CSS, JavaScript, iFrames, 이미지 등의 종속 리소스를 포함합니다.

HTML 콘텐츠와 모든 하위 리소스를 함께 다운로드하고 구문 분석하기를 기다립니다.

EAGER

이 Selenium Page Load Strategy를 사용하면 WebDriver는 초기 페이지가 로드되고 DOMContentLoaded 이벤트가 발생할 때까지만 기다립니다.

로드 이벤트와 달리 DOMContentLoaded 이벤트는 CSS, JavaScript, iFrames, 이미지 등의 추가 리소스가 로드되기를 기다리지 않고 DOM이 로드되는 즉시 발생합니다.

HTML 콘텐츠를 다운로드하고 구문 분석하기만 기다립니다.

NONE

이 Selenium Page Load Strategy에서 WebDriver는 차단되지 않고 테스트 실행을 계속합니다.

HTML 콘텐츠를 다운로드하기만 기다립니다.

데모: 다양한 Selenium Page Load Strategies로 WebDriver 설정

이제 다양한 Selenium Page Load Strategies에 대한 기본적인 이해가 있으니, 이를 구현하는 방법을 이해하기 위해 코드 예제를 살펴보겠습니다.

이를 위해 다음 시나리오에 대한 자동화 테스트 스크립트를 작성할 것입니다.

1. 클라우드 기반 Selenium Grid를 사용하여 RemoteWebDriver의 인스턴스를 생성합니다. 이를 위해 LambdaTest 플랫폼을 사용하겠습니다.
2. WebDriver 기능을 특정 PageLoadStrategy로 설정합니다.
3. 다음으로, 드라이버를 사용하여 브라우저를 시작하고 여기.
4. 이를 위해, 페이지 로드가 완료되는 시간 기간을 기록하여 동일한 조건에서 다양한 Selenium 페이지 로드 전략에 따른 변화를 확인합니다. 페이지 로드 시간의 차이는 모든 전략에 대한 더 많은 명확성을 제공합니다.

프로젝트 설정

이 Selenium 페이지 로드 전략 블로그에서는 Eclipse IDE의 Java를 사용하는 Maven 프로젝트를 사용합니다. Eclipse를 좋아하지 않으시면 원하는 어떤 IDE를 사용하셔도 같은 단계를 수행하실 수 있습니다. 이 프로젝트는 Selenium WebDriver와 TestNG 의존성을 사용하여 페이지 요소와의 상호 작용을 자동화하고 테스트 케이스 실행을 담당합니다. 더 나은 결과를 얻기 위해 최신 안정적인 버전을 사용하는 것이 매우 좋습니다.

이제 시작하겠습니다.

1. Eclipse 또는 원하는 IDE를 시작하세요.
2. 새 Maven 프로젝트를 생성하고 PageLoadStrategy라는 이름을 지정하세요.
3. src 폴더 안에 테스트 패키지를 추가하고 그 안에 TestPageLoadStrategy라는 이름의 Test 클래스를 생성하세요. 이 클래스는 이 데모를 위한 전체 코드를 보유할 것입니다.

4. 실제 테스트 케이스를 작성하기 전에 pom.xml 파일을 업데이트하여 아래와 같이 Selenium에서 TestNG를 사용하기 위한 최신 의존성을 포함시키세요.

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi= "http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation=" http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
 <modelVersion>4.0.0</modelVersion>
 <groupId>PageLoadStrategy</groupId>
 <artifactId>PageLoadStrategy</artifactId>
 <version>0.0.1-SNAPSHOT</version>
 <build>
   <sourceDirectory>src</sourceDirectory>
   <plugins>
     <plugin>
       <artifactId>maven-compiler-plugin</artifactId>
       <version>3.8.1</version>
       <configuration>
         <release>16</release>
       </configuration>
     </plugin>
   </plugins>
 </build>
 <dependencies>
   <dependency>
       <groupId>org.seleniumhq.selenium</groupId>
       <artifactId>selenium-java</artifactId>
       <version>4.6.0</version>
   </dependency>
   <dependency>
       <groupId>org.testng</groupId>
       <artifactId>testng</artifactId>
       <version>7.7.0</version>
       <scope>test</scope>
   </dependency>
 </dependencies>
</project>

package test;


import java.net.MalformedURLException;
import java.net.URL;
import java.time.*;
import java.util.HashMap;
import org.openqa.selenium.PageLoadStrategy;
import org.openqa.selenium.chrome.ChromeOptions;
import org.openqa.selenium.remote.RemoteWebDriver;
import org.testng.annotations.Test;


public class TestPageLoadStrategy {


   public RemoteWebDriver driver = null;
   String username = "";
   String accessKey = "";
 
  ChromeOptions chromeOptions = new ChromeOptions();
   HashMap ltOptions = new HashMap();


   private void setup(String buildName) {


       chromeOptions.setPlatformName("Windows 10");
       chromeOptions.setBrowserVersion("108.0");


       ltOptions.put("project", "Page Load Strategy");
       ltOptions.put("selenium_version", "4.0.0");
       ltOptions.put("w3c", true);
       ltOptions.put("networkThrottling", "Regular 2G");
       ltOptions.put("build", buildName);
   }


   private void checkPageLoad() {
       try {
           driver = new RemoteWebDriver(
                   new URL("https://" + username + ":" + accessKey + "@hub.lambdatest.com/wd/hub"), chromeOptions);


           Instant startTime = Instant.now();
           System.out.println("Page load started at : " + startTime.toString());
           
           System.out.println("Navigating to the URL");
           driver.get("https://ecommerce-playground.lambdatest.io/");
          
           Instant endTime = Instant.now();
           System.out.println("Page load ended at : " + endTime.toString());


           Duration duration = Duration.between(startTime, endTime);
           System.out.println("Total PageLoad time : " + duration.toMillis() + " milli seconds");
       } catch (MalformedURLException e) {
           System.out.println("Invalid grid URL");
       } finally {
           driver.quit();
       }
   }


   @Test
   public void testNormalStrategy() {
       // PageLoadStrategy = Normal로 설정
       setup("Page Load Strategy - Normal");


       chromeOptions.setPageLoadStrategy(PageLoadStrategy.NORMAL);
       chromeOptions.setCapability("LT:Options", ltOptions);
       checkPageLoad();
   }


   @Test
   public void testEagerStrategy() {
       // PageLoadStrategy = Eager로 설정
       setup("Page Load Strategy - Eager");
       chromeOptions.setPageLoadStrategy(PageLoadStrategy.EAGER);
       chromeOptions.setCapability("LT:Options", ltOptions);
       checkPageLoad();
   }


   @Test
   public void testNoneStrategy() {
       // PageLoadStrategy = None로 설정
       setup("Page Load Strategy - None");
       chromeOptions.setPageLoadStrategy(PageLoadStrategy.NONE);
       chromeOptions.setCapability("LT:Options", ltOptions);
       checkPageLoad();
   }
}

클라우드 Selenium Grid를 사용하면 Java 자동화 테스트의 확장성과 속도가 향상되며 사용자가 여러 OS 및 브라우저 조합에서 광범위한 병렬 및 크로스 브라우저 테스트를 수행할 수 있습니다.

2 단계. 이전 단계에서 언급한 것처럼 LambdaTest 플랫폼을 사용하고 있기 때문에 클라우드 허브와 연결하기 위해 사용자의 사용자명과 액세스 키를 제공해야 합니다. 계정이 생성되면 LambdaTest 프로필 섹션에서 이러한 세부 정보를 찾을 수 있습니다.

Step 3. ChromeOptions 클래스의 객체를 생성합니다. 이 클래스는 실행에 사용할 Chrome 드라이버의 다양한 속성을 조작하는 데 사용됩니다. 이 chromeOptions 객체는 각 테스트 케이스에서 PageLoadStrategy을 설정하고 WebDriver에 전달하는 데 사용됩니다.

Step 4. ltOptions라는 이름의 HashMap 변수를 생성합니다. 이는 LambdaTest 클라우드 그리드 실행에 대한 다양한 속성을 설정하는 데 사용됩니다.

Step 5. 다음은 setup() 메서드로, chromeOptions와 ltOptions에서 몇 가지 기본 속성을 설정하는 데 사용됩니다. 이들은 세 가지 PageLoadStrategy 사례의 공통 속성입니다.

또한, LambdaTest의 networkThrottling 속성을 사용하여 250 Kbps의 다운로드 속도와 50 Kbps의 업로드 속도로 일반 2G 네트워크를 설정하고 있음에 유의하십시오. 이를 통해 이전 섹션에서 논의한 대로 모든 시나리오에서 로드 시간을 더 잘 보여줄 수 있습니다.

LambdaTest 플랫폼을 사용하면 브라우저와 버전 세부 정보를 직접 선택하고 LambdaTest 기능 생성기를 사용하여 기능이 자동으로 생성되므로 코드에 추가만 하면 됩니다.

이 메서드는 buildName이라는 하나의 매개변수를 가지며, 이 매개변수는 빌드 이름을 표시하는 데 사용됩니다.

Step 6. checkPageLoad()라는 새 함수를 추가합니다. try 블록에서는 chromeOptions에 정의된 속성을 사용하여 LambdaTest 플랫폼의 RemoteWebDriver와 연결하는 코드를 작성합니다.

연결이 설정되면 Java.time 패키지의 Instant 클래스 객체를 생성하여 브라우저를 시작하고 탐색을 시작할 때의 시작 시간을 저장하고 로깅한다. 이어서 브라우저에 드라이버가 호출되고 테스트 웹사이트가 시작된다.

웹사이트가 설정된 PageLoadStrategy에 따라 로드되었다고 간주되는 즉시, 드라이버는 제어를 다음 명령어로 넘긴다. 이 명령어도 다시 Instant 클래스의 객체로, 현재 시간을 다시 얻어 종료 시간을 얻는다.

이제 페이지는 요청한 전략에 따라 로드되었으며, 시작 시간과 종료 시간을 갖게 되었다. 웹페이지가 로드되는 데 걸린 시간을 밀리초 단위로 확인하려면 두 지점 사이의 차이를 찾아내야 한다. 이를 위해 같은 패키지의 Duration 클래스를 사용한다.

이 로드 시간은 모든 테스트 사례에서 다른 전략들에 따라 다르다는 것을 알 수 있다.

A catch block is added next for the try block to handle the exception if it occurs. MalformedURLException is to catch the exception in case our RemoteWebDriver URL has invalid syntax. Once everything is done, we finally close the driver instance. To learn more about it, you can go through this blog on the most common exceptions in Selenium.

testNormalStrategy()

이는 정상 전략을 보여주기 위한 테스트 사례이다.

먼저, setup() 메소드는 브라우저와 LambdaTest 플랫폼에 대한 기본 속성을 정의한다. 다음으로, chromeOptions에서 PageLoadStrategy의 값을 NORMAL으로 설정하고, 다른 기능들을 설정한다.

마지막으로, checkPageLoad() 메소드가 호출되어 웹페이지를 로드하고 로드 시간을 로깅하게 되며, 이는 실행 섹션에서 각 전략에 대해 비교할 것이다.

testEagerStrategy()

이는 열정적인 전략을 보여주기 위한 테스트 사례이다.

이 경우 모든 단계는 이전 단계와 유사합니다. 유일한 차이점은 여기 chromeOptions에서 PageLoadStrategy의 값을 EAGER로 설정한 다음 checkPageLoad() 메서드를 호출한다는 것입니다.

testNoneStrategy()

이것은 None 전략을 설명하기 위한 테스트 케이스입니다.

여기 chromeOptions에서 PageLoadStrategy의 값을 NONE으로 설정하고, 나머지 단계는 이전에 논의한 테스트 케이스와 유사합니다.

테스트 실행

모든 PageLoadStrategy의 작동 및 구현을 이해한 후 이제 로컬에서 실행 결과와 LambdaTest 대시보드에서 실행 결과를 확인해 보겠습니다.

테스트 케이스는 TestNG를 사용하여 실행됩니다. 실행하려면 아래 언급된 단계를 따르십시오.

1. Eclipse IDE에서 테스트 케이스 이름을 오른쪽 클릭하십시오.
2. Run Test로 이동하여 TestNG Test를 선택하여 실행을 시작하십시오.

각 전략에 따라 로드 시간이 달라지는지 하나씩 실행해 보겠습니다.

NORMAL 전략

이 경우 TotalPageLoad 시간을 볼 수 있습니다. 정규 2G 속도의 네트워크를 사용하고 있으므로 70852밀리초입니다. 이 값이 세 가지 경우 중 가장 높아야 함이 입증되었습니다. 지금까지 설정한 바와 같이 세 가지 중 가장 높아야 합니다. Eager와 None에 대해 케이스를 실행하고 비교하여 이를 확인할 수 있습니다.

EAGER 전략

예상대로 동일한 시나리오에서 Eager 전략의 PageLoadTime은 정규 전략보다 덜 필요합니다. 즉, 70231밀리초입니다.

NONE 전략

여기에서 눈여겨 볼 점은 None 전략의 PageLoadTime이 다른 두 전략보다 훨씬 적은 것으로, 어떤 자원이 다운로드될 때까지 기다리지 않기 때문입니다.

다양한 전략에서의 페이지 로드 시간에 대한 간단한 요약

각 PageLoadStrategy에 대한 실행 결과를 보려면 아래와 같이 LambdaTest 대시보드로 이동하십시오.

자동화 빌드의 세부 정보를 보려면 자동화 섹션 아래의 빌드 부분으로 이동하십시오.

PageLoadStrategy.NORMAL의 빌드 세부 정보:

PageLoadStrategy.EAGER의 빌드 세부 정보:

PageLoadStrategy.NONE의 빌드 세부 정보:

결론

이로써 다양한 Page Load Strategies에 대한 Selenium TestNG 튜토리얼의 끝에 다다랐습니다. 이 튜토리얼에서는 이러한 Selenium Page Load Strategies의 추가 사용 방법과 작동 방식에 대해 배웠으며, 이를 자동화 스크립트에 통합하고 Selenium Cloud Grid에서 실행하는 방법을 알아보았습니다.

I hope now you can implement these in your use cases more efficiently.

Happy Loading!!