극작가의 첫 번째 리뷰를 빠르게 실행

경고

나는 극작가, 훑어 본 모범 사례 및 무작위로 관련된 기사에 대해서만 읽었습니다. 이 게시물에서는 playwright을 사용하여 웹 테스트를 만들고 검토할 것입니다.

나는 이것을 통해 서두르고 이 게시물에 대한 메모 + 스크린샷을 기록할 것입니다. 그렇게 함으로써 아마도 분명한 것을 놓칠 것입니다. 그러지 않기를 바랍니다.

클리

가장 먼저 배운 것은 ... 극작가는 기본적으로 헤드리스로 실행됩니다.
npx playwright test e2e/example2.spec.ts --headed

보고서

npx playwright show-report
최신 실행을 위해 html 보고서를 호스팅하기 위해 로컬 서버를 실행합니다. 표준 보고서에 매우 만족합니다.



테스트가 실패하면 보고서를 자동으로 로드합니다. 각 테스트 보고서는 최신으로 교체되므로 실행 기록을 저장하기 위해 타임스탬프를 조사해야 합니다.

로케이터

솔직히 말해서 단일 헤더 요소의 유효성을 검사하는 데 예상보다 오랜 시간을 보냈습니다.



아니, 작동하지 않았다. 🙃

const title = page.locator('Checkboxes');
await expect(title).toHaveText("Playwright");

아니요, 이것도 작동하지 않았습니다! 🤭

const title = page.locator('Checkboxes').textContent();
await expect(title).toEqual("Playwright");

아니요! 도대체 내가 뭘 잘못하고 있는거야?! 💀

const title = page.locator('h3');
await expect(title).toEqual("Playwright");

성공! 반환된 요소를 각각의 어설션 함수와 일치시키지 않았습니다. 😎

const title = page.locator('h3');
await expect(title).toHaveText("Checkboxes");

나는 css 선택자를 선호하지만 다른 극작가 가이드가 text 를 통해 요소를 찾기 위해 노력하는 것을 보았습니다. 동적 HTML로 인해 로드 시 속성이 변경될 수 있지만 이제 text가 더 안정적이고 일관성이 있습니다.

css에 대해 말하자면 this link 최고의 css 선택자 교육을 따르십시오.

헤드리스 vs 헤딩 결과

매우 빠릅니다. 나는 모든 단계에서 더 오래 걸릴 것으로 예상했습니다. 아마도 캐싱이 여기에 영향을 미쳤을 것입니다. 나는 극작가의 캐싱 및 저장 능력에 익숙하지 않습니다.

목이 없는

향하고

구성

나는 playwright.config.ts에 미리 채워진 수많은 옵션이 있고 직접 구성을 추가하는 대신 내가 원하는 것을 활성화/비활성화하기만 하면 된다는 점이 마음에 들었습니다.

github 작업

성공! 인스턴트 트리거 켜짐git push . 그래도 극작가를 설치하려면 57s 걸렸습니다.

요약

전반적으로 나는 극작가에게 유쾌하게 만족합니다.



프레임워크 자체는 매우 유용하며 내가 본 바로는 웹 자동화의 모든 필수 요소를 편안하게 다룹니다. 기본적으로 iframe, 드래그 앤 드롭, 파일 저장 등과 같은 복잡한 기능을 지원합니다.

앞으로 나는 그 기능을 더 자세히 탐구하는 것을 목표로 할 것입니다. 작별!