[Python] Pytest - Playwright 로 웹 UI 테스트 자동화하기 (원티드 로그인 페이지)

 

이전 글에서는 pytest와 requests 패키지를 사용하여 간단하게 API 테스트를 진행해보았습니다.

 

[Python] Pytest로 간단하게 API 테스트 자동화하기

 

오늘은 Playwright라는 도구를 사용하여 웹 UI 테스트를 자동화하는 방법을 알아보겠습니다.

참고로 Test Automation University에서 제공하는 Pytest 마지막 강의입니다. 마지막까지 힘차게 달려보겠습니다.

---

목차

• Playwright 가 뭐지?
• Playwright 설치 및 설정하기
• Playwright를 활용한 웹 UI 테스트 자동화 (원티드 로그인 페이지)
• 마무리

---

Playwright 가 뭐지?

Playwright는 Microsoft에서 만든 웹 브라우저 자동화 도구입니다. 웹 요소를 클릭하거나 텍스트를 스크래핑하는 등 모든 브라우저와 상호작용을 할 수 있는 강력한 도구입니다. 또한 보통 테스트 코드를 작성할 때에는 wait 함수를 추가하여 다음 요소를 기다려야했는데, 고맙게도 playwright에서는 이 모든 상호작용을 자동으로 기다려주므로, 테스트를 안정적으로 진행할 수 있습니다. 그리고 하나의 브라우저 인스턴스를 모든 테스트에서 공유하고 병렬 테스트도 할 수 있어서 Selenium이나 Cypress 보다 훨씬 빠르다는게 장점이라고 합니다.

 

Playwright 설치 및 설정하기

먼저 playwright 패키지를 설치합니다.

pip install playwright

 

그리고 pytest 에서 playwright를 더 쉽게 사용할 수 있도록 도와주는 pytest 플러그인도 설치합니다.

pip install pytest-playwright

 

마지막으로 Playwright가 사용할 브라우저의 엔진들을 설치합니다. Playwright는 우리가 사용하는 크롬이나 파이어폭스 같은 브라우저에서 직접 테스트하는 것이 아니라, 엔진을 테스트하는 방식을 사용합니다. 크롬은 Chromium, 파이어폭스는 Gecko, 사파리는 WebKit 엔진을 사용합니다. 

아래 명령어를 사용하면 필요한 브라우저 엔진을 자동으로 다운로드합니다.

playwright install

 

Playwright를 활용한 웹 UI 테스트 자동화 (원티드 로그인 페이지)

테스트를 위한 웹 어플리케이션을 준비합니다.

저는 원티드 로그인 페이지를 테스트해보겠습니다.

 

우선 테스트해야하는 이메일, 비밀번호 입력란과 로그인 버튼의 요소를 찾아줍니다.

찾는 방법은 다들 아실테니 빠르게 넘어가도록 하겠습니다.

 

import pytest
from playwright.sync_api import Page, expect

@pytest.mark.ui
def test_wanted_login(page: Page):
    # Arrange
    page.goto(
        "https://id.wanted.jobs/login?amp_device_id=fde8d8b5-3e63-4a2a-9765-88d2acf60e4a&service=wanted&before_url=https%3A%2F%2Fsocial.wanted.co.kr%2Fmy%2Fprofile&client_id=AhWBZolyUalsuJpHVRDrE4Px&redirect_url=https%3A%2F%2Fwww.wanted.co.kr%2Fapi%2Fchaos%2Fauths%2Fv1%2Fcallback%2Fset-token&message_key=userweb_default&step=PASSWORD_ENTRY"
    )

    # Act
    page.locator("id=email").fill("아이디 값")
    page.locator("data-testid=Input_password").fill("비밀번호 값")
    page.locator("data-testid=Button").click()

    # Assert
    expect(page.locator("div.logo-w")).to_be_visible()
    expect(page.locator("ul.main-menu")).to_be_visible()
    expect(page.get_by_text("Add Account")).to_be_visible()
    expect(page.get_by_text("Make Payment")).to_be_visible()

 

필요한 패키지를 먼저 import 하고 테스트 함수를 작성했습니다.

테스트함수의 패턴은 이전에 설명드렸던 Arrange - Act - Assert 패턴을 사용했습니다.

 

Arrange에서 로그인 페이지로 이동하고

Act에서 로그인 정보를 입력한 후 로그인 버튼을 클릭합니다.

- locator 메서드를 사용하여 요소를 선택하고 fill 메서드로 값을 입력한 후 .click 메서드로 로그인 버튼 클릭

 

Assert에서는 로그인이 성공한 후에 특정 요소들이 정상 표시되는지 확인합니다.

(Assert 부분은 원티드 페이지와 관련없는 샘플 코드입니다. 필요하신분은 연습겸 한번 만들어보세요)

- expect : 요소의 상태를 검증하는 메서드

- to_be_visible : 해당 요소가 화면에 나타나 있는지 확인하는 메서드

 

그리고 아래 명령어로 실행해봅니다.

참고로 playwright는 브라우저 UI없이 진행하는 헤드리스 모드로 실행되기 때문에 화면에 표시되지 않습니다.

UI 테스트 과정을 관찰하고 싶으면 아래 명령어를 참고해주세요.

속도조절을 하지 않으면 너무 빨리지나가서 속도조절도 필요합니다.

python -m pytest tests/test_ui.py
python -m pytest tests/test_ui.py --headed #UI 테스트 과정을 화면에 표시
python -m pytest tests/test_ui.py --headed --slowmo=500 #테스트 동작을 0.5초씩 지연시켜 관찰 가능

 

테스트를 실행해보니 아래 오류가 발생합니다.

원인은 동일한 조건을 가진 요소가 3개가 검색되어서 발생한 현상이였는데, 친절하게 모두 표시해주네요..

E           playwright._impl._errors.Error: Locator.click: Error: strict mode violation: locator("data-testid=Button") resolved to 3 elements:
E               1) <button type="submit" class="css-14q7s2s" data-testid="Button" data-attribute-id="signup__email__login">…</button> aka get_by_role("button", name="로그인")
E               2) <button type="button" class="css-kcksh6" data-testid="Button">…</button> aka get_by_role("button", name="이메일로 회원가입")
E               3) <button type="button" class="css-1hfuen3" data-testid="Button">…</button> aka get_by_role("button", name="비밀번호 재설 정")
E
E           Call log:
E             - waiting for locator("data-testid=Button")

.venv\lib\site-packages\playwright\_impl\_connection.py:528: Error
======================================================== short test summary info ========================================================= 
FAILED tests/test_ui.py::test_acme_bank_login[chromium] - playwright._impl._errors.Error: Locator.click: Error: strict mode violation: locator("data-testid=Button") resolved to 3 elements:

 

그렇다면 로그인 텍스트를 포함하고 있는 요소만 찾을 수 있도록 코드를 수정합니다.

    page.locator("data-testid=Button").filter(has_text="로그인").click()

 

이제 테스트가 잘되네요.

아래와 같이 테스트를 성공한 모습을 확인할 수 있습니다.

(.venv) PS C:\Python\pytest> python -m pytest .\tests\test_ui.py --headed --slowmo=500
========================================================== test session starts ===========================================================
platform win32 -- Python 3.10.2, pytest-8.3.4, pluggy-1.5.0 -- C:\Python\pytest\.venv\Scripts\python.exe
cachedir: .pytest_cache
rootdir: C:\Python\pytest
configfile: pytest.ini
plugins: base-url-2.1.0, playwright-0.7.0
collected 1 item                                                                                                                          

tests/test_ui.py::test_wanted_login[chromium] PASSED                                                                                [100%]

=========================================================== 1 passed in 4.78s ============================================================

 

마무리

이전에 셀레니움으로 웹테스트를 잠깐 해본적이 있는데 playwright와 비교해보니, 속도도 빠르고 코드도 간결해서 신세계를 경험한것 같습니다. 왜 하이브리드 앱을 개발하는 기업들에서 playwright를 사용하고 있는지 알겠네요.

 

playwright 에서는 코드 생성도구, 트레이스로그, API 테스트 기능까지 지원한다고 합니다. 아래 공식문서로 다들 한번 공부해보시는것을 추천드립니다.

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

 

 

---

위 내용은 Test Automation University - Pytest 강의 내용을 정리하고, 추가로 이해한 내용을 작성한 게시물임을 참고 부탁드립니다.

 

Chapter 11 - UI Testing