Selenium, Cypress, Playwright 비교

최근, 팀에서 e2e 테스트를 도입하게 되면서 웹 ui 자동화 도구로 유명한 Selenium, Playwright을 사용해 보았습니다.

* E2E(End to End) 테스트란?
소프트웨어 시스템이나 애플리케이션이 전체적으로 기대한 대로 동작하는지를 확인하기 위한 테스트 방법
사용자의 관점에서 시스템이 예상대로 작동하는지 확인하고, 모든 구성 요소 및 서비스 간의 통합을 검증한다.

 

최종적으로 팀에선 Playwright를 e2e 테스트 도구로서 선정했습니다.

Playwright 를 선정하게 된 이유에 대해선 Selenium, Cypress 와 함께 비교해 보며 뒤에서 이야기하도록 하겠습니다😉

자동화 도구에 대한 설명은 각 라이브러리의 공식 document를 참고해 주세요. 이 글에선 깊게 설명하지 않습니다.
각각 어떤 차이점이 있는지에 대해 설명하고, 사용해 보면서 느꼈던 점을 주로 정리할 것입니다.

---

Selenium

https://www.selenium.dev/documentation/

The Selenium Browser Automation Project

• Selenium은 가장 인지도가 높고 많이 사용되는 도구 중 하나이며 무료입니다.
• 주로 크롤링에서 많이 사용됩니다.
• Windows, Linux, macOS 운영체제를 지원합니다. (크로스 플랫폼)
• Java, Python, C#, Ruby, JavaScript 외 여러 언어를 지원합니다.
• Chrome, Edge, Firefox, IE, Safari, Opera 브라우저를 지원합니다. (크로스 브라우저)
• 브라우저를 외부에서 제어합니다. (속도 저하 발생)
• 웹 요소를 찾기 위해선 아래와 같은 Locator를 사용할 수 있습니다.

Locator 를 사용 예시 코드입니다. (짜깁기 한 코드이니 문법만 확인해 주세요😅)

<Java>
WebDriver driver = new ChromeDriver();
Wait<WebDriver> wait = new WebDriverWait(driver, Duration.ofSeconds(2));

WebElement textBox = wait.until(driver.findElement(By.name("my-text")));
WebElement submitButton = wait.until(driver.findElement(By.cssSelector("button")));

 

어떤 사이트에 접속할 때, 페이지가 한 번에 다 보이지 않고, 요소들이 조금씩 로드 되어서 보이는 경험 있으시지 않나요?
이처럼 모든 element들이 다 로드되지 않았는데, Selenium이 element를 찾으려고 하니 에러가 자주 발생합니다.

그래서 WebDriverWait.until() 로 findElement()함수를 감싸주어, 어떤 요소를 찾을 때까지 기다린다를 명시적으로 표기해야 합니다.

이 점이 Selenium을 쓰면서 가장 불편하다고 느꼈던 점입니다.
요소 하나를 찾기 위해서 사용해야 할 코드들이 너무 많았죠😢

---

Cypress

https://docs.cypress.io/guides/overview/why-cypress

Why Cypress? | Cypress Documentation

• e2e 테스트뿐만 아니라 컴포넌트, 통합, 단위 테스트 등에서도 활용할 수 있습니다.
• Node.js (Javascript, Typescript) 만 지원합니다.
• Windows, Linux, macOS 운영체제를 지원합니다.
• Chrome, Edge, Electron, Firefox, Webkit(실험적) 브라우저를 지원합니다.
• 셀레니움과 달리 브라우저 내부에서 직접 실행됩니다. (상대적으로 셀레니움보다 빠름)
• element가 표시되거나 활성화될 때 까지 자동으로 기다립니다.
• 사이트 내에 튜토리얼, 강의가 잘 되어 있습니다.

<JavaScript>

describe('My First Test', () => {
  it('Gets, types and asserts', () => {
    cy.visit('https://example.cypress.io')

    cy.contains('type').click()

    // Should be on a new URL which
    // includes '/commands/actions'
    cy.url().should('include', '/commands/actions')

    // Get an input, type into it
    cy.get('.action-email').type('fake@email.com')

    //  Verify that the value has been updated
    cy.get('.action-email').should('have.value', 'fake@email.com')
  })
})

직접 사용해보진 않았습니다. Node.js 계열만 지원되어 백엔드 분들과 함께 쓰기 어렵다는 점에서 고려사항에서 제외되었기 때문이죠. 프론트 개발자만 테스트를 진행한다면 cypress 를 쓰는 편이 더 편할거라고 생각됩니다.

 

---

Playwright

https://playwright.dev/

Fast and reliable end-to-end testing for modern web apps | Playwright

 

• Windows, Linux, macOS 운영체제를 지원합니다.
• Chrome, Edge, Firefox, Safari 브라우저를 지원합니다. (크로스 브라우저)
• JavaScript, TypeScript, Python, Java, .NET 언어를 지원합니다.
• 모바일 Chrom, Safari 등 에서도 테스트가 가능합니다.
• 🌟Auto Wait🌟 을 지원합니다.
• 다양한 Locator 를 지원합니다.
  • 권장 Locator : role, label, placeholder, text, alt text, title, test id
  • css 와 xpath 기반 지원

<Java>

package org.example;

import java.util.regex.Pattern;
import com.microsoft.playwright.*;
import com.microsoft.playwright.options.AriaRole;

import static com.microsoft.playwright.assertions.PlaywrightAssertions.assertThat;

public class App {
    public static void main(String[] args) {
        try (Playwright playwright = Playwright.create()) {
            Browser browser = playwright.chromium().launch();
            Page page = browser.newPage();
            page.navigate("http://playwright.dev");

            // Expect a title "to contain" a substring.
            assertThat(page).hasTitle(Pattern.compile("Playwright"));

            // create a locator
            Locator getStarted = page.getByRole(AriaRole.LINK, new Page.GetByRoleOptions().setName("Get Started"));

            // Expect an attribute "to be strictly equal" to the value.
            assertThat(getStarted).hasAttribute("href", "/docs/intro");

            // Click the get started link.
            getStarted.click();

            // Expects page to have a heading with the name of Installation.
            assertThat(page.getByRole(AriaRole.HEADING,
               new Page.GetByRoleOptions().setName("Installation"))).isVisible();
        }
    }
}

Playwright 는 찾으려는 element가 활동이 가능할 때까지 기다립니다.(얼마나 기다릴 지 설정 가능)
이 점과 다양한 언어를 지원한다는 점이 Playwright 를 선정하게 했던 가장 큰 이유였습니다. 작성해야 할 코드가 줄어들었던 점도 있고, 백엔드 분들도 같이 사용할 수 있다는 점이 큰 장점이었습니다.

 

---

 

Selenium은 유명한 만큼 레퍼런스가 가장 풍부합니다. 크로스 브라우저 테스트에 유리합니다.

Cypress는 프론트 테스트 자동화에 특화되어 있습니다. 스크린샷, 비디오 녹화등의 기능을 제공합니다.

Playwright는 크로스 브라우저와 모바일 웹 테스트에 유리합니다. 웹소켓, 트레이싱 등의 고급 기능을 제공합니다.

모든 차이점이 기술되어 있지는 않지만, 세 가지 중 정답은 없습니다. 각각 상황에 맞춰 필요한 도구를 사용하면 됩니다😊