Selenium WebDriver로 기능 테스트 자동화

이 기사는 웹 애플리케이션의 프론트 엔드를 테스트하는 데 시간을 덜 쓰고 싶지만 모든 기능이 제대로 작동한다는 확신을 원하는 웹 개발자를 위한 것입니다. Selenium WebDriver로 반복적인 온라인 작업을 자동화하여 시간을 절약할 수 있습니다. WordPress의 로그인 기능을 자동화하고 테스트하기 위한 단계별 예제를 찾을 수 있지만 다른 로그인 양식에도 예제를 적용할 수 있습니다.

셀레늄이란 무엇이며 어떻게 도움이 될까요?

Selenium은 웹 애플리케이션의 자동화된 테스트를 위한 프레임워크입니다. Selenium을 사용하면 기본적으로 실제 사람이 작업을 실행하는 것처럼 브라우저의 모든 작업을 자동화할 수 있습니다. 다른 브라우저에 명령을 보내는 데 사용되는 인터페이스를 Selenium WebDriver라고 합니다. 이 인터페이스의 구현은 Mozilla Firefox, Google Chrome 및 Internet Explorer를 포함한 모든 주요 브라우저에서 사용할 수 있습니다.

Selenium WebDriver로 기능 테스트 자동화

어떤 유형의 웹 개발자입니까? 각 배포 후에 웹 애플리케이션의 모든 주요 기능을 테스트하는 훈련된 유형입니까? 그렇다면 이 반복적인 테스트가 얼마나 많은 시간을 소비하는지에 대해 짜증이 날 것입니다. 아니면 핵심 기능을 테스트하는 데 신경 쓰지 않고 항상 "더 테스트해야 하지만 새로운 것을 개발하고 싶다"고 생각하는 유형입니까? 그렇다면 우연히 또는 고객이나 상사가 버그에 대해 불평할 때만 버그를 찾을 수 있습니다.

저는 독일의 유명한 온라인 소매업체에서 꽤 오랫동안 일해 왔으며 항상 두 번째 범주에 속했습니다. 온라인 상점의 새로운 기능을 생각하는 것은 매우 흥미로웠고 각각의 새로운 소프트웨어 배포 후 이전의 모든 기능에 대해 다시 한 번. 따라서 전략은 거의 모든 주요 기능이 작동하기를 바라는 것이었습니다.

어느 날 전환율이 크게 떨어졌고 이러한 하락의 원인을 찾기 위해 웹 분석 도구를 조사하기 시작했습니다. 이전 소프트웨어 배포 이후로 체크아웃이 제대로 작동하지 않는다는 것을 알기까지는 꽤 오랜 시간이 걸렸습니다.

이 날은 웹 응용 프로그램의 테스트 프로세스 자동화에 대한 연구를 시작했고 Selenium과 WebDriver를 우연히 발견했습니다. Selenium은 기본적으로 웹 브라우저를 자동화할 수 있는 프레임워크입니다. WebDriver는 모든 주요 브라우저(모바일 및 데스크톱)에 명령을 보내고 실제 사용자처럼 작업할 수 있는 주요 인터페이스의 이름입니다.

Selenium WebDriver로 첫 번째 테스트 준비하기

첫째, 프레임워크가 Java에서 가장 일반적으로 사용되기 때문에 Selenium이 제 요구 사항에 적합한지 약간 회의적이었습니다. 저는 Java 전문가가 아닙니다. 나중에 저는 Selenium 프레임워크의 장점을 활용하기 위해 Java 전문가가 될 필요가 없다는 것을 배웠습니다.

간단한 첫 번째 테스트로 WordPress 프로젝트 중 하나의 로그인을 테스트했습니다. 왜 워드프레스인가? WordPress 로그인 양식을 사용하는 것은 내가 일부 사용자 정의 웹 응용 프로그램을 참조하는 것보다 모든 사람이 더 쉽게 따를 수 있는 예이기 때문입니다.

Selenium WebDriver를 사용하려면 무엇이 필요합니까? Java에서 가장 일반적인 Selenium 구현을 사용하기로 결정했기 때문에 작은 Java 환경을 설정해야 했습니다.

내 예를 따르고 싶다면 원하는 Java 환경을 사용할 수 있습니다. 아직 설정하지 않았다면 Eclipse를 설치하고 Java에서 간단한 "Hello world" 스크립트를 실행할 수 있는지 확인하는 것이 좋습니다.

Chrome에서 로그인을 테스트하고 싶었기 때문에 Chrome 브라우저가 이미 내 컴퓨터에 설치되어 있는지 확인했습니다. 그게 내가 준비한 모든 것입니다.

ChromeDriver 다운로드

모든 주요 브라우저는 WebDriver 인터페이스의 자체 구현을 제공합니다. Chrome에서 WordPress 로그인을 테스트하고 싶었기 때문에 Chrome의 WebDriver 구현인 ChromeDriver가 필요했습니다.

ZIP 아카이브의 압축을 chromedriver.exe 실행 파일을 나중에 기억할 수 있는 위치에 저장했습니다.

Eclipse에서 Selenium 프로젝트 설정하기

내가 Eclipse에서 취한 단계는 Java 및 Eclipse를 많이 사용하는 사람에게 매우 기본적인 것일 수 있습니다. 그러나 이것에 익숙하지 않은 저와 같은 사람들을 위해 개별 단계를 살펴보겠습니다.

1. 이클립스를 엽니다.
2. "새로 만들기" 아이콘을 클릭합니다.
   

   

3. 마법사를 선택하여 새 "Java 프로젝트"를 만들고 "다음"을 클릭합니다.
   

   

4. 프로젝트 이름을 지정하고 "마침"을 클릭합니다.
   

   

5. 이제 화면 왼쪽에 새 Java 프로젝트가 표시되어야 합니다.
   

   

프로젝트에 Selenium 라이브러리 추가하기

이제 Java 프로젝트가 있지만 Selenium은 여전히 ​​누락되었습니다. 따라서 다음으로 Selenium 프레임워크를 Java 프로젝트에 가져와야 합니다. 내가 취한 단계는 다음과 같습니다.

1. 최신 버전의 Java Selenium 라이브러리를 다운로드하십시오.
   

   

2. 아카이브의 압축을 풀고 기억하기 쉬운 곳에 폴더를 저장합니다.
3. Eclipse로 돌아가서 "프로젝트" → "속성"으로 이동합니다.
   

   

4. 대화 상자에서 "Java Build Path"로 이동한 다음 "Libraries"를 등록합니다.
5. "외부 JAR 추가"를 클릭하십시오.
   

   

6. Selenium 라이브러리가 있는 방금 다운로드한 폴더로 이동합니다. 모든 .jar 파일을 강조 표시하고 "열기"를 클릭합니다.
   

   

7. 하위 폴더 libs 의 모든 .jar 파일에 대해서도 이 작업을 반복합니다.
8. 결국 프로젝트 라이브러리에 있는 모든 .jar 파일이 표시되어야 합니다.
   

   

그게 다야! 지금까지 우리가 한 모든 것은 일회성 작업입니다. 지금 이 프로젝트를 다른 모든 테스트에 사용할 수 있으며 모든 테스트 사례에 대해 전체 설정 프로세스를 다시 수행할 필요가 없습니다. 깔끔하죠?

테스트 클래스 생성 및 Chrome 브라우저 열기

이제 Selenium 프로젝트가 있지만 다음은 무엇입니까? 작동 여부를 확인하기 위해 Chrome 브라우저를 여는 것과 같이 정말 간단한 것을 시도하고 싶었습니다.

이렇게 하려면 첫 번째 테스트 사례를 실행할 수 있는 새 Java 클래스를 만들어야 했습니다. 이 실행 가능한 클래스에 몇 개의 Java 코드 라인을 복사했고 믿거 나 말거나 작동했습니다! 마술처럼 Chrome 브라우저가 열리고 몇 초 후에 저절로 닫힙니다.

직접 시도해 보세요:

1. "새로 만들기" 버튼을 다시 클릭하십시오(새 프로젝트의 폴더에 있는 동안).
   

   

2. "클래스" 마법사를 선택하고 "다음"을 클릭합니다.
   

   

3. 클래스 이름(예: "RunTest")을 지정하고 "마침"을 클릭합니다.
   

   

4. 새 클래스의 모든 코드를 다음 코드로 바꿉니다. 변경해야 할 유일한 것은 컴퓨터의 chromedriver.exe 경로입니다.
   

    import org.openqa.selenium.WebDriver; import org.openqa.selenium.chrome.ChromeDriver; /** * @author Nils Schuette via frontendtest.org */ public class RunTest { static WebDriver webDriver; /** * @param args * @throws InterruptedException */ public static void main(final String[] args) throws InterruptedException { // Telling the system where to find the chrome driver System.setProperty( "webdriver.chrome.driver", "C:/PATH/TO/chromedriver.exe"); // Open the Chrome browser webDriver = new ChromeDriver(); // Waiting a bit before closing Thread.sleep(7000); // Closing the browser and WebDriver webDriver.close(); webDriver.quit(); } }

5. 파일을 저장하고 재생 버튼을 클릭하여 코드를 실행합니다.
   

   

6. 모든 작업을 올바르게 수행했다면 코드에서 Chrome 브라우저의 새 인스턴스를 열고 잠시 후 닫아야 합니다.
   

   

WordPress 관리자 로그인 테스트

이제 나는 첫 번째 작은 기능 테스트를 자동화할 수 있을 것이라고 낙관했습니다. 브라우저가 내 WordPress 프로젝트 중 하나로 이동하여 관리 영역에 로그인하고 로그인이 성공했는지 확인하기를 원했습니다. 그렇다면 어떤 명령을 조회해야 했습니까?

1. 로그인 양식으로 이동하여,
2. 입력 필드를 찾고,
3. 사용자 이름과 비밀번호를 입력 필드에 입력하고,
4. 로그인 버튼을 누르고,
5. 현재 페이지의 헤드라인을 비교하여 로그인에 성공했는지 확인하십시오.

다시 말하지만, 코드에 필요한 모든 업데이트를 완료하고 Eclipse에서 실행 버튼을 클릭한 후, 내 브라우저는 WordPress 로그인을 통해 마법처럼 스스로 작동하기 시작했습니다. 첫 번째 자동화된 웹 사이트 테스트를 성공적으로 실행했습니다!

직접 시도하려면 Java 클래스의 모든 코드를 다음으로 바꾸십시오. 나중에 코드를 자세히 살펴보겠습니다. 코드를 실행하기 전에 4개의 값을 자신의 값으로 바꿔야 합니다.

1. chromedriver.exe 파일의 위치(위 참조),

2. 테스트하려는 WordPress 관리자 계정의 URL,

3. 워드프레스 사용자 이름,

4. 워드프레스 비밀번호.

그런 다음 저장하고 다시 실행하십시오. Chrome이 열리고 WordPress 웹 사이트 로그인으로 이동하여 로그인하고 현재 페이지의 h1 헤드라인이 "대시보드"인지 확인합니다.

 import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.chrome.ChromeDriver; /** * @author Nils Schuette via frontendtest.org */ public class RunTest { static WebDriver webDriver; /** * @param args * @throws InterruptedException */ public static void main(final String[] args) throws InterruptedException { // Telling the system where to find the chrome driver System.setProperty( "webdriver.chrome.driver", "C:/PATH/TO/chromedriver.exe"); // Open the Chrome browser webDriver = new ChromeDriver(); // Maximize the browser window webDriver.manage().window().maximize(); if (testWordpresslogin()) { System.out.println("Test Wordpress Login: Passed"); } else { System.out.println("Test Wordpress Login: Failed"); } // Close the browser and WebDriver webDriver.close(); webDriver.quit(); } private static boolean testWordpresslogin() { try { // Open google.com webDriver.navigate().to("https://www.YOUR-SITE.org/wp-admin/"); // Type in the username webDriver.findElement(By.id("user_login")).sendKeys("YOUR_USERNAME"); // Type in the password webDriver.findElement(By.id("user_pass")).sendKeys("YOUR_PASSWORD"); // Click the Submit button webDriver.findElement(By.id("wp-submit")).click(); // Wait a little bit (7000 milliseconds) Thread.sleep(7000); // Check whether the h1 equals “Dashboard” if (webDriver.findElement(By.tagName("h1")).getText() .equals("Dashboard")) { return true; } else { return false; } // If anything goes wrong, return false. } catch (final Exception e) { System.out.println(e.getClass().toString()); return false; } } }

모든 작업을 올바르게 수행했다면 Eclipse 콘솔의 출력은 다음과 같아야 합니다.

코드 이해하기

당신은 아마도 웹 개발자이고 다른 프로그래밍 언어에 대한 기본적인 이해가 있기 때문에 코드의 기본 개념을 이미 이해하고 있다고 testWordpressLogin 합니다. 우리의 주요 방법.

메서드가 true 또는 false를 반환하는지 여부에 따라 이 특정 테스트의 통과 또는 실패 여부를 알려주는 출력이 콘솔에 표시됩니다.

이것은 필요하지 않지만 이 방법을 사용하면 이 클래스에 더 많은 테스트 케이스를 쉽게 추가할 수 있고 여전히 읽을 수 있는 코드를 가질 수 있습니다.

이제 단계별로 우리의 작은 프로그램에서 일어나는 일이 다음과 같습니다.

1. 먼저 Chrome용 특정 WebDriver를 찾을 수 있는 위치를 프로그램에 알려줍니다.
   

    System.setProperty("webdriver.chrome.driver","C:/PATH/TO/chromedriver.exe");

2. Chrome 브라우저를 열고 브라우저 창을 최대화합니다.
   

    webDriver = new ChromeDriver(); webDriver.manage().window().maximize();

3. 여기에서 하위 메서드로 이동하여 true 또는 false를 반환하는지 확인합니다.
   

    if (testWordpresslogin()) …

4. 하위 메서드의 다음 부분은 이해하기가 직관적이지 않을 수 있습니다.
   try{…}catch{…} 블록. 모든 것이 예상대로 진행되면 try{…} 에 있는 코드만 실행되지만, try{…} 를 실행하는 동안 문제가 발생하면 catch{} 에서 계속 실행됩니다. findElement 로 요소를 찾으려고 할 때 브라우저가 이 요소를 찾을 수 없으면 예외가 발생하고 catch{…} 의 코드가 실행됩니다. 제 예시에서는 문제가 발생하고 catch{} 가 실행될 때마다 테스트가 "실패"로 표시됩니다.
5. 하위 방법에서는 WordPress 관리 영역으로 이동하고 ID를 찾아 사용자 이름과 비밀번호 필드를 찾는 것으로 시작합니다. 또한 이 필드에 주어진 값을 입력합니다.
   

    webDriver.navigate().to("https://www.YOUR-SITE.org/wp-admin/"); webDriver.findElement(By.id("user_login")).sendKeys("YOUR_USERNAME"); webDriver.findElement(By.id("user_pass")).sendKeys("YOUR_PASSWORD");

   
   

   

6. 로그인 양식을 작성한 후 ID로 제출 버튼을 찾아 클릭합니다.
   

    webDriver.findElement(By.id("wp-submit")).click();

7. 테스트를 시각적으로 따르기 위해 여기에 7초의 일시 중지를 포함합니다(7000밀리초 = 7초).
   

    Thread.sleep(7000);

8. 로그인에 성공하면 현재 페이지의 h1 헤드라인이 WordPress 관리 영역을 나타내는 "대시보드"여야 합니다. h1 헤드라인은 모든 페이지에 한 번만 있어야 하므로 여기에서 태그 이름을 사용하여 요소를 찾습니다. 대부분의 다른 경우에는 HTML 태그 이름이 웹 페이지에서 거의 고유하지 않기 때문에 태그 이름은 좋은 로케이터가 아닙니다. h1 을 찾은 후 getText() 를 사용하여 요소의 텍스트를 추출하고 "Dashboard" 문자열과 같은지 확인합니다. 로그인에 성공하지 못하면 "대시보드"를 현재 h1 으로 찾지 못합니다. 그래서 로그인 성공 여부를 확인하기 위해 h1 을 사용하기로 했습니다.
   

    if (webDriver.findElement(By.tagName("h1")).getText().equals("Dashboard")) { return true; } else { return false; } 

   
   

   

9. 하위 메서드의 이전 부분에서 문제가 발생했다면 프로그램은 다음 부분으로 바로 이동했을 것입니다. catch 블록은 콘솔에 발생한 예외 유형을 인쇄하고 이후에 기본 메서드에 false 를 반환합니다.
   

    catch (final Exception e) { System.out.println(e.getClass().toString()); return false; }

테스트 케이스 조정

자신의 테스트 사례를 적용하고 추가하려는 경우 여기가 흥미로워집니다. Chrome 브라우저에서 작업을 수행하기 위해 항상 webDriver 개체의 메서드를 호출하는 것을 볼 수 있습니다.

먼저 창을 최대화합니다.

 webDriver.manage().window().maximize();

그런 다음 별도의 방법으로 WordPress 관리 영역으로 이동합니다.

 webDriver.navigate().to("https://www.YOUR-SITE.org/wp-admin/");

우리가 사용할 수 있는 webDriver 객체의 다른 메소드가 있습니다. 위의 두 가지 외에도 다음을 많이 사용할 것입니다.

 webDriver.findElement(By. …)

findElement 메소드는 DOM에서 다른 요소를 찾는 데 도움이 됩니다. 요소를 찾는 다양한 옵션이 있습니다.

• By.id
• By.cssSelector
• By.className
• By.linkText
• By.name
• By.xpath

가능하다면 요소의 ID는 항상 고유해야 하고(예: className 과 달리) By.id 를 사용하는 것이 좋으며 일반적으로 DOM 구조가 변경되더라도(예: xPath 와 달리) 영향을 받지 않습니다. .

참고 : 여기에서 WebDriver로 요소를 찾는 다양한 옵션에 대해 자세히 알아볼 수 있습니다.

findElement 메소드를 사용하여 요소를 확보하자마자 요소의 다른 사용 가능한 메소드를 호출할 수 있습니다. 가장 일반적인 것은 sendKeys , click 및 getText 입니다.

로그인 양식을 작성하기 위해 sendKeys 를 사용하고 있습니다:

 webDriver.findElement(By.id("user_login")).sendKeys("YOUR_USERNAME");

제출 버튼을 클릭하여 로그인 양식을 제출하려면 click 을 사용했습니다.

 webDriver.findElement(By.id("wp-submit")).click();

그리고 getText 는 제출 버튼을 클릭한 후 h1 에 어떤 텍스트가 있는지 확인하는 데 사용되었습니다.

 webDriver.findElement(By.tagName("h1")).getText()

참고 : 요소와 함께 사용할 수 있는 모든 사용 가능한 메서드를 확인하십시오.

결론

Selenium WebDriver의 힘을 알게 된 이후로 웹 개발자로서의 제 삶은 바뀌었습니다. 나는 단순히 그것을 좋아한다. 프레임워크에 대해 더 깊이 파고들수록 더 많은 가능성을 발견하게 됩니다. Chrome, Internet Explorer 및 Firefox에서 동시에 하나의 테스트를 실행하거나 심지어 내 스마트폰에서도 실행하거나 다른 페이지의 스크린샷을 자동으로 찍고 비교하는 것입니다. 오늘날 나는 테스트 목적뿐만 아니라 웹에서 반복적인 작업을 자동화하기 위해 Selenium WebDriver를 사용합니다. 웹에서 작업을 자동화할 기회가 있을 때마다 초기 WebDriver 프로젝트를 복사하여 다음 작업에 적용합니다.

Selenium WebDriver가 적합하다고 생각한다면 Selenium의 모든 가능성(예: Selenium Grid를 사용하여 여러 (모바일) 장치에서 동시에 작업 실행)에 대해 알아보기 위해 Selenium의 설명서를 살펴보는 것이 좋습니다.

WebDriver가 저만큼 유용하다는 소식을 듣고 싶습니다!