Selenium에서 JavaScriptExecutor 사용하는 방법

Selenium

셀레니움은 브라우저와 상호 작용하여 텍스트를 보내거나 버튼을 클릭하고 드롭다운을 선택하는 등 다양한 작업을 수행할 수 있게 해주는 오픈 소스 도구 및 라이브러리 모음입니다.

그러나 실제 셀레니움 웹드라이버 명령이 예상대로 작동하지 않는 경우가 있습니다. 셀레니움은 웹 요소와 직접 상호 작용할 수 없기 때문입니다. 이때 JavaScriptExecutor가 필요합니다.

이 블로그에서는 셀레니움에서 JavaScriptExecutor에 대해 설명하고 실제 사용 사례와 예제로 시작하는 방법에 대해 논의합니다.

셀레니움의 JavaScriptExecutor란?

JavaScriptExecutor는 셀레니움에서 제공하는 인터페이스로 JavaScript 명령을 실행하는 데 도움을 줍니다. 이 인터페이스는 선택한 창이나 현재 웹 페이지에서 JavaScript를 실행하는 메서드를 제공합니다. 셀레니움이 지원하는 모든 언어 바인딩에 사용할 수 있습니다.

셀레니움의 JavaScriptExecutor는 자동화 테스트 스크립트에서 다음 패키지를 가져와 직접 사용할 수 있습니다:

Java

org.openqa.selenium.JavascriptExecutor

셀레니움의 JavaScriptExecutor은 웹 요소와 상호 작용하기 위해 두 가지 메서드를 제공합니다:

executeScript() – 이 메서드는 셀레니움에서 현재 선택된 창이나 프레임의 문맥에서 JavaScript를 실행합니다. 스크립트는 익명 함수의 본문으로 실행됩니다.
executeAsyncScript() – 이 메서드는 Selenium의 현재 선택된 창이나 프레임의 컨텍스트에서 JavaScript의 비동기 코드 조각을 실행합니다. 스크립트는 익명 함수의 본문으로 실행됩니다.

참고: executeScript() 와 executeAsyncScript() 메서드 사이의 주요 차이점은 executeAsyncScript()를 사용하여 호출된 스크립트가 callback() 함수를 사용하여 실행 완료를 신호로 알리도록해야 한다는 것입니다.

executeAsyncScript()를 사용하여 메서드를 호출하는 경우, 테스트 중인 브라우저에서 sleep를 수행해야 하는 경우나 AJAX 애플리케이션 내에서 테스트를 동기화해야 할 때 주로 사용됩니다.

왜 Selenium에서 JavaScriptExecutor를 사용해야 하는가?

일부 WebDriver 명령이 여러 이유로 예상대로 작동하지 않는 상황이 있습니다:

Selenium이 웹 요소와 직접 상호 작용하지 않는 경우
뷰로 스크롤하거나 오버레이 뒤에 숨겨진 웹 요소를 클릭하거나 읽기 전용 필드에 값 설정과 같은 작업 수행
DOM을 동적으로 수정하는 것과 같은 브라우저별 동작 수행

이러한 경우에는 Selenium의 JavaScriptExecutor를 사용합니다.

전통적으로 우리는 Selenium 로케이터인 ID, Name, CSS Selector, XPath 등을 사용하여 WebElement을 찾습니다. 이러한 로케이터가 작동하지 않거나 까다로운 XPath를 처리해야 하는 경우 JavaScriptExecutor를 사용하여 원하는 WebElement을 찾을 수 있습니다.

일부 웹 브라우저에서는 click() 메소드가 작동하지 않을 수도 있고, 웹 컨트롤이 다른 브라우저에서 다르게 동작할 수도 있습니다. 이러한 상황을 극복하기 위해 JavaScriptExecutor를 사용하여 클릭 작업을 수행해야 합니다.

우리는 브라우저에 JavaScript 구현이 내장되어 있고 JavaScript 명령을 이해할 수 있다는 것을 알고 있습니다. 따라서 Selenium의 JavaScriptExecutor를 이해하면 더 효율적으로 다양한 작업을 수행할 수 있습니다.

Selenium의 JavaScriptExecutor 기본 사항

이 섹션의 목적은 Selenium의 JavaScriptExecutor 구현 단계에 대한 개략적인 아이디어를 제공하는 것입니다. 데모에서는 Java를 기본 프로그래밍 언어로 사용할 것입니다.

주요 단계를 살펴보겠습니다.

1. JavaScriptExecutor와 관련된 패키지를 가져옵니다:

Java

import org.openqa.selenium.JavascriptExecutor;

2. JavaScriptExecutor를 사용하여 인터페이스에 대한 참조를 만들고 WebDriver 인스턴스에 형변환하여 할당합니다:

Java

JavascriptExecutor js = (JavascriptExecutor) driver;

3. executeAsyncScript() 또는 executeScript() 메소드를 호출합니다. 예를 들어, executeScript() 의 구문은 아래와 같습니다:

Java

js.executeScript(java.lang.String script, java.lang.Object... args)

데모: Selenium에서 JavaScriptExecutor 사용하기

JavaScriptExecutor를 Selenium에서 사용하는 방법을 살펴보기 전에 다음 사전 요구 사항을 따르십시오:

IntelliJ IDE를 사용하여 새로운 Maven 프로젝트를 생성합니다.
pom.xml에 최신 Selenium WebDriver 종속성을 추가합니다.
pom.xml에 최신 TestNG 종속성을 추가합니다.

로컬 Chrome 브라우저에서 테스트를 실행하여 Selenium에서 JavaScriptExecutor의 작동을 데모할 LambdaTest eCommerce Playground 웹 사이트를 사용할 것입니다.

테스트 시나리오 1

우리의 목표는 다음 테스트 시나리오를 사용하여 executeScript() 메소드를 활용한 예제를 보여주는 간단한 코드를 작성하는 것입니다.

LambdaTest eCommerce Playground 웹 사이트의 계정 로그인 페이지로 이동합니다.
유효한 로그인 자격 증명을 입력하고 빨간 테두리로 필드를 강조하여 로그인 버튼을 클릭합니다.
페이지 제목과 도메인 이름을 출력합니다.
로그인 성공시 페이지 헤더 “내 계정”이 표시되는지 확인합니다.

구현

새 TestJavaScriptExecutor 클래스를 만들어 테스트 시나리오를 구현합니다. 이 테스트 클래스에 먼저 두 가지 메서드를 만들어 Selenium WebDriver 세션을 설정하고 정상적으로 종료할 수 있도록 합니다.

이 테스트 클래스에서 WebDriver를 클래스 수준에서 선언합니다. 즉, setup() 메서드에서 드라이버 세션을 시작하고 tearDown() 메서드에서 세션을 정상적으로 종료해야 하므로 필요합니다.

Java

public class TestJavaScriptExecutor {

​

    private WebDriver driver;

    //...

}

이제 setup() 메서드를 만들어서 WebDriver 클래스의 인스턴스를 생성하고 로컬 Chrome 브라우저에서 테스트를 실행할 수 있도록 구성합니다.

Java

@BeforeTest

    public void setup () {

        driver = new ChromeDriver ();

        driver.manage ()

            .window ()

            .maximize ();

        driver.manage ()

            .timeouts ()

            .implicitlyWait (Duration.ofSeconds (30));

    }

이 메서드는 Chrome 브라우저를 열고 창을 최대화하며, 30초의 암시적 대기 시간을 적용합니다. 이 암시적 대기는 모든 웹 사이트 콘텐츠가 테스트 실행이 시작되기 전에 성공적으로로드되도록 합니다.

Java

@AfterTest

    public void tearDown () {

        driver.quit ();

    }

마지막으로 테스트가 실행되면 tearDown() 메서드가 호출되어 RemoteWebDriver 세션을 정상적으로 종료합니다.

이제 같은 테스트 클래스에 testJavaScriptExecutorCommand() 메서드를 추가하여 논의한 테스트 시나리오를 구현합니다.

Java

@Test

    public void testJavaScriptExecutorCommand () {

        driver.get ("https://ecommerce-playground.lambdatest.io/index.php?route=account/login");

​

        JavascriptExecutor js = (JavascriptExecutor) driver;

        //....

      }

이 코드는 LambdaTest eCommerce Playground 웹 사이트의 로그인 페이지로 이동합니다. 다음 라인에서는 WebDriver 인스턴스를 JavascriptExecutor로 캐스팅하여 브라우저에서 JavaScript 명령을 실행할 수 있도록 합니다.

Java

WebElement emailAddressField = driver.findElement (By.id ("input-email"));

js.executeScript ("arguments[0].style.border='3px solid red'", emailAddressField);

emailAddressField.sendKeys ("[email protected]");

js.executeScript ("arguments[0].style.border='2px solid #ced4da'", emailAddressField);

그런 다음 id 로케이터 전략을 사용하여 emailAddressField를 찾습니다. 그런 다음 JavaScriptExecutor 명령을 사용하여 전자 메일 주소 필드의 테두리를 빨간색으로 강조 표시합니다.

Java

WebElement passwordField = driver.findElement (By.id ("input-password"));

js.executeScript ("arguments[0].style.border='3px solid red'", passwordField);

passwordField.sendKeys ("Password123");

js.executeScript ("arguments[0].style.border='2px solid #ced4da'", passwordField);

다음으로, 암호 필드가 위치하고 빨간 테두리로 강조됩니다. 이 강조는 자동화 테스트 실행 시 어떤 단계가 실행되고 있는지 파악하는 데 도움이 됩니다.

Java

WebElement loginBtn = driver.findElement (By.cssSelector ("input.btn"));

js.executeScript ("arguments[0].style.border='3px solid red'", loginBtn);

js.executeScript ("arguments[0].click();", loginBtn);

마찬가지로, CSS 선택기 전략을 사용하여 로그인 버튼을 찾아 하이라이트 처리합니다.

Java

String titleText = js.executeScript ("return document.title;").toString ();

System.out.println ("Page Title is: " + titleText);

​

String domainName = js.executeScript ("return document.domain;").toString ();

System.out.println ("Domain is: " + domainName);

다음으로 페이지 제목과 도메인 이름을 JavaScriptExecutor를 사용하여 찾아 콘솔에 출력합니다.

Java

String myAccountHeader = driver.findElement (By.cssSelector ("#content h2")).getText ();

assertEquals (myAccountHeader, "My Account");

마지막으로, 성공적인 로그인 후 표시되는 내 계정 페이지의 페이지 헤더를 찾아 단언문을 수행하여 “내 계정” 텍스트가 표시되는지 확인합니다.

TestJavaScriptExecutor 클래스의 전체 코드는 다음과 같습니다:

Java

public class TestJavaScriptExecutor {

​

    private WebDriver driver;

​

    @BeforeTest

    public void setup () {

        driver = new ChromeDriver ();

        driver.manage ()

            .window ()

            .maximize ();

        driver.manage ()

            .timeouts ()

            .implicitlyWait (Duration.ofSeconds (30));

    }

​

    @AfterTest

    public void tearDown () {

        driver.quit ();

    }

​

    @Test

    public void testJavaScriptExecutorCommand () {

        driver.get ("https://ecommerce-playground.lambdatest.io/index.php?route=account/login");

​

        JavascriptExecutor js = (JavascriptExecutor) driver;

        WebElement emailAddressField = driver.findElement (By.id ("input-email"));

        js.executeScript ("arguments[0].style.border='3px solid red'", emailAddressField);

        emailAddressField.sendKeys ("[email protected]");

        js.executeScript ("arguments[0].style.border='2px solid #ced4da'", emailAddressField);

​

        WebElement passwordField = driver.findElement (By.id ("input-password"));

        js.executeScript ("arguments[0].style.border='3px solid red'", passwordField);

        passwordField.sendKeys ("Password123");

        js.executeScript ("arguments[0].style.border='2px solid #ced4da'", passwordField);

​

        WebElement loginBtn = driver.findElement (By.cssSelector ("input.btn"));

        js.executeScript ("arguments[0].style.border='3px solid red'", loginBtn);

        js.executeScript ("arguments[0].click();", loginBtn);

​

        String titleText = js.executeScript ("return document.title;")

            .toString ();

        System.out.println ("Page Title is: " + titleText);

​

        String domainName = js.executeScript ("return document.domain;")

            .toString ();

        System.out.println ("Domain is: " + domainName);

​

        String myAccountHeader = driver.findElement (By.cssSelector ("#content h2"))

            .getText ();

        assertEquals (myAccountHeader, "My Account");

    }

테스트 실행

다음 IntelliJ IDE에서의 스크린샷을 보면 테스트가 성공적으로 실행된 것을 확인할 수 있습니다.

시나리오 2 테스트

우리의 목표는 executeAsyncScript() 메서드를 사용하여 다음 테스트 시나리오를 예시로 설명하는 간단한 코드를 작성하는 것입니다.

LambdaTest eCommerce Playground 웹사이트로 이동합니다.
홈페이지 아래로 스크롤합니다.
페이지 하단에 “FROM THE BLOG” 텍스트가 표시되는지 확인합니다.

구현:

기존 텍스트 클래스 TestJavaScriptExecutor에 새로운 testExecuteAsyncScript() 메서드를 작성합니다.

Java

@Test

    public void testExecuteAsyncScript() {

        driver.get("https://ecommerce-playground.lambdatest.io");

        JavascriptExecutor js = (JavascriptExecutor) driver;

        js.executeAsyncScript("var callback = arguments[arguments.length - 1];" + "window.scrollBy(0,document.body.scrollHeight); + callback()");

​

        String fromTheBlogText = driver.findElement(By.cssSelector("#entry_217991 > h3")).getText();

        assertEquals(fromTheBlogText, "FROM THE BLOG");

    }

코드는 LambdaTest eCommerce Playground 웹사이트의 홈페이지로 이동합니다. 다음으로 JavaScriptExecutor의 executeAsyncScript() 메소드가 호출되어 창을 스크롤하는 작업이 수행됩니다.

executeAsyncScript() 메소드에서 실행된 스크립트는 제공된 callback() 메소드를 호출하여 명시적으로 작업이 완료되었음을 신호해야 합니다.

Java

JavascriptExecutor js = (JavascriptExecutor) driver;

 js.executeAsyncScript("var callback = arguments[arguments.length - 1];" 

+ "window.scrollBy(0,document.body.scrollHeight); + callback()");

창의 맨 아래로 스크롤한 후 “FROM THE BLOG” 텍스트가 위치하며 이에 대한 어서션을 수행할 것입니다.

Java

String fromTheBlogText = driver.findElement(By.cssSelector("#entry_217991 > h3")).getText();

 assertEquals(fromTheBlogText, "FROM THE BLOG");

테스트 실행

다음 스크린샷은 테스트가 성공적으로 실행된 것을 보여줍니다.

Selenium에서 JavaScriptExecutor 사용 명령어

JavaScriptExecutor 인터페이스를 사용하여 Selenium 테스트 자동화에 대처할 수 있는 몇 가지 시나리오를 살펴봅시다.

버튼을 클릭하려면:

Java

js.executeScript("document.getElementById('enter element id').click();");

//or

js.executeScript("arguments[0].click();", okButton);

sendKeys() 메소드를 사용하지 않고 텍스트 상자에 텍스트를 입력하려면:

Java

js.executeScript("document.getElementById(id').value='someValue';");

js.executeScript("document.getElementById('Email').value='SeleniumTesting.com';");

값을 true 또는 false로 전달하여 체크박스를 처리하려면:

Java

js.executeScript("document.getElementById('enter element id').checked=false;");

Selenium WebDriver에서 경고 팝업 창을 생성하려면:

Java

js.executeScript("alert('Welcome To Selenium Testing');");

JavaScript를 사용하여 브라우저 창을 새로 고침하려면:

Java

js.executeScript("history.go(0)");

Selenium에서 전체 웹페이지의 innertext를 가져오려면:

Java

String innerText = js.executeScript(" return document.documentElement.innerText;").toString();

System.out.println(innerText);

웹 페이지의 제목을 가져오려면:

Java

String titleText =  js.executeScript("return document.title;").toString();

System.out.println(titleText);

도메인 이름을 가져오려면:

Java

String domainName=  js.executeScript("return document.domain;").toString();

System.out.println(domainName);

​

웹 페이지의 URL을 가져오려면:

Java

String url=  js.executeScript("return document.URL;").toString();

System.out.println(url);

웹 페이지의 높이와 너비를 가져오려면:

Java

js.executeScript(“return window.innerHeight;”).toString();

js.executeScript(“return window.innerWidth;”).toString();

JavaScript를 사용하여 다른 페이지로 이동하려면:

Java

js.executeScript("window.location = 'https://www.google.com");

Selenium을 사용하여 애플리케이션을 스크롤하려면:

페이지를 수직으로 500px 스크롤하려면:
Java
js.executeScript(“window.scrollBy(0,500)”);

페이지를 끝까지 수직으로 스크롤하려면:

Java

js.executeScript(“window.scrollBy(0,document.body.scrollHeight)”);

문서 객체 모델(DOM)에 요소를 추가하는 방법:

Java

js.executeScript("var btn=document.createElement('newButton');"

+ "document.body.appendChild(btn);");

​

DOM에서 그림자 루트를 가져오기:

Java

WebElement element = driver.findElement(By.id("shadowroot"));

js.executeScript("return arguments[0].shadowRoot", element);

결론

WebDriver 명령이 의도한 대로 작동하지 않을 때 사용되는 JavaScriptExecutor라는 인터페이스가 Selenium에 있습니다. JavaScriptExecutor를 사용하면 웹사이트에서 JavaScript 코드를 실행할 수 있어 Java만 사용하는 것으로는 불가능한 다양한 작업을 우아하고 효과적으로 처리할 수 있습니다.

이 블로그에서는 Selenium에서 JavaScriptExecutor를 사용하는 방법과 다양한 메서드를 살펴보았습니다. 더불어 다양한 시나리오를 다루어 다른 메서드를 사용하여 실용적인 예제를 통해 효과적인 해결책을 얻는 방법을 다루었습니다.

Source:
https://dzone.com/articles/how-to-use-javascriptexecutor-in-selenium