셀레니움과 쿠키퍼를 활용한 자동화를 위한 COM 디자인 패턴

Selenium

Component Object Model (COM)은 테스트 자동화 프로젝트에서 테스트를 구조화하는 데 도움을 주는 디자인 패턴입니다. 인기 있는 Page Object Model (POM)에서 영감을 받아 COM은 전체 페이지를 다루는 데 그치지 않고 버튼, 텍스트 필드, 드롭다운 메뉴 또는 기타 재사용 가능한 요소와 같은 특정 UI 구성 요소에 초점을 맞춥니다.

이 튜토리얼에서는 Selenium WebDriver와 Cucumber를 사용하여 웹 애플리케이션을 테스트하는 데 COM을 구현하는 방법과 이 접근 방식이 테스트를 더 유연하고 모듈식으로 유지, 유지보수하기 쉽게 만드는 방법에 대해 설명하겠습니다.

Component Object Model이란?

Component Object Model (COM)은 POM 모델의 진화입니다. 페이지 전체를 객체로 모델링하여 모든 페이지 요소와 상호 작용하는 메서드를 갖는 것 대신 COM은 다음과 같은 개별 구성 요소로 사용자 인터페이스를 분할합니다:

버튼
텍스트 필드
드롭다운 메뉴
검색 바
테이블

각 구성 요소는 Java 클래스에 캡슐화되어 있으며 상호 작용은 특정 메서드에 의해 관리되어 각 요소가 독립적으로 유지 및 테스트되도록 합니다. 이는 코드의 재사용성, 유지 보수 및 테스트의 유연성을 향상시킵니다.

왜 COM 대신 POM을 사용해야 하는가?

1. 증가된 모듈성

COM을 사용하면 각 구성 요소(예: 버튼 또는 텍스트 필드)가 독립적인 개체로 간주됩니다. 구성 요소가 변경되면(예: 버튼의 텍스트 변경) 다른 구성 요소나 페이지에 영향을 미치지 않고 해당 구성 요소 클래스만 수정하면 됩니다. 이는 높은 모듈성을 제공하며 작은 조정을 위해 전체 페이지를 수정할 필요가 없게 합니다.

2. 재사용성과 유연성

구성 요소는 응용 프로그램의 여러 페이지에서 재사용될 수 있어 코드 중복을 줄입니다. 예를 들어 ButtonComponent는 버튼이 나타나는 모든 페이지에서 사용할 수 있어 중복을 줄이고 테스트의 유연성을 높입니다.

3. 간소화된 유지 보수

COM으로 유지 보수가 더 쉽습니다. 구성 요소가 변경되면(예: 버튼이나 텍스트 필드) 해당 구성 요소를 나타내는 클래스만 수정하면 됩니다. 해당 구성 요소를 사용하는 모든 테스트가 자동으로 업데이트되어 각 테스트 시나리오를 다시 방문할 필요가 없습니다.

4. 동적 인터페이스에 적응

현대 애플리케이션은 인터페이스가 자주 변경되는 동적 특성을 가지고 있습니다. COM은 인터페이스와 독립적으로 구성 요소를 테스트할 수 있기 때문에 이러한 애플리케이션에 이상적입니다. 다른 애플리케이션 부분에 대한 테스트에 영향을 주지 않고 구성 요소를 수정하거나 추가할 수 있습니다.

5. 더 빠른 테스트 자동화

COM은 테스트 자동화를 가속화합니다. 구성 요소와의 상호작용을 재사용 가능한 클래스로 중앙 집중화함으로써, 테스터는 모든 페이지나 구성 요소에 대해 동작을 재정의할 필요가 없습니다. 예를 들어, “버튼 클릭”단일 단계 정의는 프로젝트의 모든 테스트에서 사용될 수 있어, 테스트 자동화에 필요한 시간을 크게 줄입니다.

6. 테스터 간의 작업 반복 방지

COM을 사용하면 테스터는 각 테스트에 대해 동일한 작업을 반복할 필요가 없습니다. “버튼 클릭”이나 “텍스트 입력”과 같은 일반적인 동작을 위한 중앙 집중화된 단계 정의는 프로젝트의 모든 테스터가 사용할 수 있습니다. 이는 테스트의 일관성을 보장하면서 불필요한 반복을 피하고, 테스터 간의 효율성과 협업을 향상시킵니다.

COM 프로젝트 아키텍처

COM 기반 프로젝트의 아키텍처는 세 가지 주요 요소인 구성 요소, 단계 정의, 및 러너를 중심으로 구성됩니다.

1. 구성 요소

각 구성 요소는 버튼, 텍스트 필드 또는 드롭다운 메뉴와 같은 UI 요소를 나타냅니다. 이러한 클래스는 해당 요소와의 모든 상호 작용을 캡슐화합니다.

ButtonComponent 클래스의 예시는 다음과 같습니다:

Plain Text

public class ButtonComponent {

​

      private WebDriver driver;

      public ButtonComponent(WebDriver driver) {

          this.driver = driver;

}

      public void clickButton(String buttonText) {

          WebElement button = driver.findElement(By.xpath("//button[text()='" + buttonText + "']"));

          button.click();

}

  }

​

2. 단계 정의

단계 정의는 Gherkin 파일에 정의된 단계를 구성 요소의 메서드에 연결합니다. 이들은 구성 요소와 상호 작용하고 테스트 시나리오에 명시된 작업을 구현하는 역할을 합니다.

ButtonStepDefinition의 예시는 다음과 같습니다:

Plain Text

public class ButtonStepDefinition {

      private ButtonComponent buttonComponent;

​

      public ButtonStepDefinition(WebDriver driver) {

          this.buttonComponent = new ButtonComponent(driver);

}

​

      @When("I click on the button {string}")

      public void iClickOnTheButton(String buttonText) {

          buttonComponent.clickButton(buttonText);

}

  }

3. 실행기

실행기 클래스는 테스트를 JUnit이나 TestNG를 사용하여 실행하는 역할을 합니다. 이는 .feature 파일에 정의된 테스트 시나리오를로드하고 해당 단계 정의를 사용하여 실행할 수 있도록 Cucumber를 구성합니다.

TestRunner의 예시는 다음과 같습니다:

Plain Text

@RunWith(Cucumber.class)

  @CucumberOptions(

          features = "src/test/resources/features",

          glue = "com.componentObjectModel.stepDefinitions",

          plugin = {"pretty", "html:target/cucumber-reports.html"}

)

  public class TestRunner {

​

  }

Gherkin 시나리오 작성 및 설명

Cucumber를 사용한 자동화의 필수 요소 중 하나는 테스트 시나리오를 작성하기 위해 Gherkin 언어를 사용하는 것입니다. Gherkin을 사용하면 비기술적인 사람들도 이해할 수 있고 읽기 쉬운 방식으로 테스트를 설명할 수 있습니다.

버튼과 상호 작용을 테스트하려는 시나리오를 고려해 보겠습니다. 앞서 정의한 ButtonComponent를 사용하는 방법은 다음과 같이 Gherkin으로 작성될 수 있습니다:

Scenario: User clicks on the "Submit" button
   Given I am on the login page
   When I click on the button "Submit"
   Then I should be redirected to the homepage

시나리오 설명

시나리오

이 시나리오는 사용자가 로그인 페이지에서 ‘제출’ 버튼을 클릭하고 클릭 후 홈페이지로 리디렉션되는 행동을 설명합니다.

내가 로그인 페이지에 있습니다: 테스트의 초기 상태는 사용자가 로그인 페이지에 있는 것입니다.
“제출” 버튼을 클릭할 때“: 테스트에서 수행되는 행동은 ‘제출’ 버튼을 클릭하는 것입니다.
그러면 홈페이지로 리디렉션되어야 합니다: 기대되는 검증은 사용자가 버튼을 클릭한 후 홈페이지로 리디렉션되는 것입니다.

COM과 연결

이 시나리오의 각 단계는 단계 정의와 ButtonStepDefinition에 매핑되어 있으며, 클릭 동작은 ButtonComponent에 의해 처리되어 테스트를 모듈화하고 유지 관리가 용이합니다.

추가 설명

단계가 버튼(또는 입력 필드의 자리 표시자 등)에 표시된 텍스트를 매개변수로 사용한다는 점에 유의하십시오. 이렇게 하면 시나리오가 더 읽기 쉽고 일반적이게 됩니다. 예를 들어 위의 시나리오에서 “제출” 버튼의 텍스트가 “제출” 버튼을 클릭할 때 사용됩니다. 이렇게 함으로써 Gherkin 시나리오에서 텍스트를 간단히 변경하여 “로그인”과 같은 다른 버튼을 테스트하는 데 동일한 단계 정의를 재사용할 수 있습니다. 이는 테스트 코드의 재사용성을 향상시키면서 시나리오를 직관적이고 유연하게 만듭니다.

COM으로 단계 재사용성 향상

COM의 주요 장점 중 하나는 다양한 버튼에 대한 단계 정의의 재사용성입니다. 예를 들어, “버튼을 클릭할 때 {string}”이라는 동일한 단계를 모든 버튼에 사용할 수 있습니다. COM 접근 방식을 통해 버튼 텍스트에 따라 클릭 작업을 동적으로 매개변수화할 수 있습니다.

다른 버튼이 있는 다른 시나리오를 고려해 봅시다:

시나리오

Plain Text

User clicks on the "Login" button

    Given I am on the login page

    When I click on the button "Login"

    Then, I should be redirected to the dashboard

두 경우 모두에서 ButtonComponent의 clickButton 메서드가 사용될 것이지만 시나리오에 따라 버튼 텍스트가 변경됩니다. 이는 COM이 동일한 구성 요소와 단계 정의를 재사용하여 테스트를 유연하고 모듈식으로 만드는 방법을 보여줍니다.

COM이 테스트 자동화를 어떻게 개선하는지

COM은 테스트 자동화를 여러 가지 방법으로 개선합니다:

코드 중복 감소: 재사용 가능한 구성 요소를 사용함으로써 테스트에서 코드 중복을 줄일 수 있습니다. 예를 들어, 애플리케이션의 여러 페이지에서 사용되는 ButtonComponent는 반복적인 테스트를 작성할 필요를 없애줍니다.
더 읽기 쉽고 수정 가능한 테스트: 테스트는 페이지별 구현 세부정보와 분리되어 있어 명확하고 이해하기 쉽습니다. 기본 페이지 구조에 대한 걱정 없이 구성 요소와 상호작용하는 데 집중할 수 있습니다.
유지 보수 용이성: 구성 요소에 대한 수정(예: 버튼 텍스트 변경)은 테스트가 아닌 구성 요소 클래스에만 영향을 미칩니다. 이것은 유지 보수를 훨씬 더 간단하고 빠르게 만듭니다.
더 유연한 테스트: 구성 요소가 서로 독립적이기 때문에 UI 변경에 쉽게 적응할 수 있습니다. 새로운 구성 요소를 테스트하거나 기존 구성 요소를 교체해도 다른 테스트에 영향을 주지 않습니다.

COM 디자인 패턴을 언제 추천하나요?

이 디자인 패턴은 테스트 중인 웹 애플리케이션이 모든 구성 요소에 대한 통합 디자인 시스템을 사용하는 경우에 추천됩니다. 예를 들어, 모든 버튼이 동일한 방식으로 선언되고 모든 UI 요소에 대해 일관된 구조를 가진 경우입니다. 이러한 경우 COM을 사용하면 각 유형의 구성 요소(버튼, 텍스트 필드 등)와의 상호작용을 중앙 집중화할 수 있어 테스트가 더 모듈화되고 재사용 가능하며 유지 보수가 용이해집니다.

다양한 제품에서 단계 정의 재사용하기

같은 디자인 시스템을 사용하는 여러 제품을 개발하고 테스트하는 경우, 각 구성 요소에 대한 모든 단계 정의와 작업(또는 거의 모든 작업)을 포함하는 라이브러리를 만들 수 있습니다. 이를 통해 테스터는 Gherkin 시나리오 작성에만 집중할 수 있으며, 테스트는 자동화됩니다. 모든 웹 요소가 동일한 방식(HTML)으로 작성되기 때문에 버튼, 텍스트 필드 및 기타 UI 요소와 같은 구성 요소는 모든 프로젝트에서 일관되게 작동합니다.

그 결과, 테스터는 더 이상 동일한 작업을 반복할 필요가 없습니다. 즉, 여러 프로젝트의 동일한 구성 요소에 대한 단계 정의 및 작업을 정의하는 것이죠. 이 접근 방식은 시간을 절약하고 유지 관리성을 향상시킵니다. 웹 요소가 수정되면(예: XPath가 변경되는 경우), 공유 라이브러리에서 해당 요소만 업데이트하면 되고, 수정 사항은 모든 자동화 프로젝트에 자동으로 적용됩니다. 이는 오류의 위험을 줄이고 다양한 제품 간의 업데이트를 더 효율적으로 만듭니다.

결론

구성 요소 객체 모델(Component Object Model, COM)은 테스트 자동화를 구성하기 위한 강력한 디자인 패턴입니다. 재사용 가능한 구성 요소에 집중함으로써 COM은 더 모듈화되고 유지 관리가 용이하며 확장 가능한 테스트를 생성할 수 있게 해줍니다. 이 패턴은 사용자 인터페이스가 빠르게 변화하고 독립적인 구성 요소와 상호작용하는 것이 필수적인 현대 애플리케이션에 특히 유용합니다.

재사용 가능한 테스트, 간소화된 유지 관리, 유연한 아키텍처를 갖춘 COM는 Selenium 및 Cucumber 프로젝트의 테스트 자동화를 위한 이상적인 솔루션입니다.

Source:
https://dzone.com/articles/com-design-pattern-selenium-and-cucumber