Playwright Python: Tutorial #3 - Test Generator

Playwright Python: Tutorial #3 - Test Generator 

Tutorial #1 https://helloahram.tistory.com/221 

Tutorial #2 https://helloahram.tistory.com/222

 

 

Codegen 을 이용하여 Test Code 를 간단하게 생성할 수 있다 

Playwright 공식 문서 https://playwright.dev/python/docs/codegen-intro

playwright codegen https://www.saucedemo.com

 

Inspector 의 Code 를 복사해서 내가 필요한 것만 사용할 수 있다 

# https://youtu.be/IRTeqUXkPbA?si=ZhBPwp9c6E1mKzLj

import re
from playwright.sync_api import Playwright, sync_playwright, expect


def test_example(playwright: Playwright) -> None:
    browser = playwright.chromium.launch(headless=False)
    context = browser.new_context()
    page = context.new_page()
    page.goto("https://www.saucedemo.com/")

    page.locator("[data-test=\"username\"]").fill("standard_user")
    
    page.locator("[data-test=\"password\"]").fill("secret_sauce")

    page.locator("[data-test=\"login-button\"]").click()
    expect(page).to_have_url("https://www.saucedemo.com/inventory.html")

 

Emulate Device 

Playwright 공식 문서 https://playwright.dev/python/docs/codegen#emulate-devices

 

Playwright 에서는 Emulation 기능을 제공하여 특정 모바일 장치나 태블릿을 Emulate 하여

실제 디바이스에서 실행되는 것처럼 테스트를 진행할 수 있도록 도와준다  

이 기능을 사용하면 웹 애플리케이션의 반응형 디자인을 확인하거나 모바일 환경에서의 동작을 검증할 수 있다 

Viewport 크기 설정도 가능하고, iPhone 13 처럼 특정 모델을 선택할 수도 있다 

뿐만 아니라 네트워크 속도 제한이나 GPS 위치 설정도 가능하다

playwright codegen --device="iPhone 13" www.saucedemo.com

 

# https://youtu.be/IRTeqUXkPbA?si=loMOjIme6g00Q-5W

import re
from playwright.sync_api import Playwright, sync_playwright, expect


def test_codegen2(playwright: Playwright) -> None:
    browser = playwright.webkit.launch(headless=False)
    context = browser.new_context(**playwright.devices["iPhone 13"])
    page = context.new_page()
    page.goto("https://www.saucedemo.com/")
    
    page.locator("[data-test=\"username\"]").fill("standard_user")
    
    page.locator("[data-test=\"password\"]").fill("secret_sauce")

    page.locator("[data-test=\"login-button\"]").click()
    expect(page).to_have_url("https://www.saucedemo.com/inventory.html")
    
    # ---------------------
    context.close()
    browser.close()


# with sync_playwright() as playwright:
#     run(playwright)

 

Youtube 에서는 browser context 를 별도 함수도 만들어 줬는데, 내 환경에서는 그냥 아래 한 줄만 변경되었다 

context = browser.new_context(**playwright.devices["iPhone 13"])

 

Emulate ViewPort 

--viewport-size=width,height 로 ViewPort 를 설정할 수 있다 

공식 문서에는 "width,height" 로 하라는데, " " 없이도 가능하다 

playwright codegen --viewport-size=800,600 playwright.dev

 

Emulate Color Scheme 

--color-scheme=dark / light 옵션으로 Color Scheme 을 변경할 수 있다 

playwright codegen --viewport-size=800,600 --color-scheme=dark playwright.dev

 

Light Mode

Dark Mode

Emulate Language 

글로벌 회사라면 모를까 이걸 쓰는 일이 얼마나 있을까 싶긴 한데, --lang 옵션으로 언어도 설정할 수 있다 

아 이제 회사가 글로벌 진출하니까 쓸 일이 있으려나,.ㅎㅎㅎㅎ 

아래 예제는 이탈리어어고, 다른 언어들 옵션은 천천히 찾아봐야겠다 

playwright codegen --lang="it-IT" google.com

 

Inspector 

Playwright 공식 문서 https://playwright.dev/python/docs/debug#playwright-inspector

 

Inspector 는 Playwright 를 디버깅할 수 있도록 도와주는 GUI Tool 이다 

PWDEBUG=1 pytest -s 로 실행하면 Pytest 를 단계별로 실행할 수 있고

Inspector 의 Resume, Pause or Step Over 기능을 활용하여 차근차근 디버깅할 수 있다 

PWDEBUG=1 pytest -s

 

또는 디버깅하고 싶은 부분에 BreakPoint 를 찍는 것처럼, page.pause() 를 써두면 

해당 지점에서 실행이 멈추고 Inspector 가 출력되어 이후 단계부터 Step Over 를 수행할 수 있다

Async 는 await page.pause() 를 써주면 된다 

# Path /tutorial/05_codegen_demo.py 
...
page.goto("https://www.saucedemo.com/")
page.pause()

page.locator("[data-test=\"username\"]").fill("standard_user")
...

 

Log 를 통해 단계별 실행 과정을 확인할 수 있고, 특정 Code Line 을 수행하기 위해 어떤 요소들을 대기하는지 상세하게 확인할 수도 있다

 

Debugging Selector 

Playwright 공식 문서 https://playwright.dev/python/docs/debug#browser-developer-tools

 

Inspector 에 EXPLORER 에서 확인할 수도 있고 << 나는 안 보인다ㅠ 왜 안 보이지 

Chrome Develop Mode Console 에서도 확인할 수 있다 

 

Console 에 playwright.inspect('input') 를 기재하고 Enter Key 를 누르면 첫번째 Input 의 Element 로 이동한다 

2번째, 3번째를 찾고 싶다면 아래와 같이 [ ] 안에 인덱스를 넣으면 된다 

document.querySelectorAll('input')[1]  // 두 번째 <input> 요소 선택
document.querySelectorAll('input')[2]  // 세 번째 <input> 요소 선택