깍돌이

안녕하세요 깍돌이 입니다. 오랜만에 인사드리네요 기존에 작업했던 내용들 ( UI ) 혹은 그 뒤에 작업했던 내용들이

사실 거의 다 대외비성이라 이게 .. 참 포스팅을 할수 없다는게 아쉽네요 

이번에도 시작은 이렇게 하고 또 대외비로 빠질진 모르겠지만..  나름의 큰 프로젝트를 하고있기도 하고 이번 UI는 있는거 에 한해서 이래저래 조합조합 해서 진행할 예정입니다.

PlayWright 입니다. 핫하기도하고 팀내에서 먼저 쓰고 있는 분들이 있기도하고 일단 간단하게 맛만 봤었을때 특이점이 하나 있어서 선택해보게 되었습니다.

물론 저는 셀레니움 버전 1 , 버전 2(RC타입) , 퍼펫티어도 어느정도 해봤으니 이래저래 팀내 프로젝트도 진행하고있고 여러 이유를 이용해서 이걸 시작해도 되지만 같이 해야 하는 인원이 있는 만큼  여러 가지 고민중 선택하게 된 계기는 

러닝커브가 매우 낮다 입니다.

셀레니움에서 고민해야될 부분 들이 100가지가 있다면 실제로 playwright 에서는 없다고 봐도 무방합니다. (기본적인 트러블 슈팅이 아닌 근본적인 고민 부분에 대한 이야기입니다. ) 

대표적으로 Find Element 에 대한 모듈 분리 및 다른 전략들이 필요로 하는데 이중에 예외처리 해야되는 것들 중 자동화 하시는 분들이 어려워하는게 Element 를 찾지 못하는 경우 입니다.  해당 Text 값같은 걸 찾는 경우 

Element에서 inner Text인지 textContents인지 value인지 data-property 인지 매번 예외처리를 해주었어야 했지만 playwright 에서는 해당 부분을 전부 자체 개발된 API 를 통해서 지원해주기 때문에 러닝커브가 매우 낮다고 판단하였습니다.

https://playwright.dev/docs/intro

기본적으로 설치 하고 튜토리얼을 해보면서 Puppeteer와 차이점? 같은 부분을 적고 정리 하는 과정을 적어 보겠습니다.

( 솔직히 PlayWright 검색하면 다 누구껄 복붙했는지 다 같은 내용의 블로그 밖에 없네요 ;; 인생 좀 쉽게 쉽게 가고 싶었지만 한땀 한땀 다시 찾아서 포스팅을 시작.. 추후에는 또 어떻게 될지 모르겠지만 ) 

설치나 이런것들은 여기저기 많이 있으니까 제외 튜토리얼 대로 

npm init playwright@latest 아래와같이 설치 

타입스크립트 선택

E2E 테스트 파일을 어디에 넣을건가 -> tests

Github Actions  - Yes

수동 실행 브라우저 설치 - Yes

설치 후 나오는 설명을 보면서 하나씩 다 해보게 되면

npx playwright test 

e2e 테스트를 실행한다고 되어있는데 이게 무슨 기준일까 해서 실행해보니

프로젝트 - tests 폴더에 example.spec.ts 를 실행합니다. 

-> 실행 경로는 playwright.config.ts에서 바꿀수 있지만 이건 나중에 다시 적겠습니다.

npx playwright test --ui

UI 모드로 실행하는 명령어입니다.

폴더에 tests - example.spec.ts를 기준으로 나타나게 되네요

클릭하는 시점에 어딜 누르는 지도 보여줍니다.

로그도 있고 잘만들어진거 같습니다. 당장은 쓸일이 있나 모르겠네요 하면서 경험적인 내용들을 포스팅하겠습니다.

npx playwright test --project=chromium

플레이라이트 내부에서는 여러 프로젝트들이 있는데 그 부분들 중에 선택해서 진행할수 있게 하는 명령어입니다.

TS다보니 해당 리스트가 type으로 표현되어있는데요 

수많은 장치들이 있고 맨 밑에 저희가 대부분 써야 할 

데스크탑 앱이 있네요 저게 다 되는지 어떻게 차이가있는지 그냥 해상도로만 구분한건지는 좀더 확인해봐야 할거 같습니다.

npx playwright test example

파일을 선택하여 실행한다고 되어있는데 

도대체 example을 뭘로보고 실행하는건지 이해가 되지않았습니다.  파일명의 spec.ts를 무시하고 실행한다 해도

changeexample로 제가 바꿔놨기 때문입니다. 그래서 몇번의 테스트를 해보았는데

일단 npx playwright test 명령어를 치게되면 config의 testDir을 기준으로 바라 보게 됩니다.

그래서 1차적으로 해당 폴더의 위치를 하게 되고 파일명을 변경해가면서 테스트를 해보니 

demo-todo-app.spec.ts에서

demo 도 되고 todo 되고 app 되고 - 도 됩니다. 결론은 like 검색으로 포함되어있다면 해당 파일을 실행하는거같습니다.

둘다 demo를 넣고 실행하게되면  아래의 사진은 demo가 먼저 걸리는 파일을 실행하는거같은데 이 순서를 바꿔보겠습니다.

순서를 바꿔서 1_demo 로 앞에 오는 것을 기대하고 테스트를 해보았으나 기존과같이 밑에 demo-todo를 실행하게 됩니다.

1_demo ( 케이스 2개 )

demo-todo ( 24개 ) 

조금 이상함을 느껴서 npx playwright test로 전체 테스트를 돌렸으나

전체가 돌아가지 않음을 확인했습니다. 

그래서 다시 이상함을 느끼고 확인해보니

.spec 이 들어가야 같이 돌아가는걸로 보여 다시 재 테스트를 하였습니다.

다시 demo를 공통으로 넣으니

다 돌아가는거 보면 demo가 포함되는 모든 것들이 돌아가는걸로 보입니다.

마지막 테스트 ppap 로변경하고 실행

tc-seocnd.spec.ts로 변경하고 직접 실행

spec을 제외하고 직접 실행

결론 : spec이 들어가야 실행이 가능 

npx playwright test --debug

디버그로 실행하여 한땀한땀 실행하면서 내용을 확인할수 있게 됩니다.

Resume을 누르면 그냥 통으로 실행하고 다음 스텝으로 넘어갑니다.  Step over 는 해당 테스트 안에서 한스텝씩 넘어 갈수 있습니다.

npx playwright codegen

말 그대로 코드젠입니다. 내가 하는 액션들을 코드로 간단하게 먼저 뽑아주는 역할을 합니다.

npx playwright test

여기까지가 기본 OVER VIEW였습니다.

포스팅 시간이 짧아서 OVER VIEW 2탄으로 돌아오겠습니다.

2탄 내용은

playwright.config 옵션에 대해

github action 연결 

내부 test모듈 구조 

왜 이 틀을 구조가 강제화되어있는가

worekr 구조 

개인적인 궁금증 해결 입니다.