극작가와 인형 배우를 위한 E2E 테스트 스크립트 무눈물 가이드
브라우저 자동화 스크립트를 원하는 대로 실행하면 코드와 끝없는 싸움처럼 느껴집니다.나는 몇 년 전 깊은 밤에 내가 하고 있는 변화를 위해 Selenium 스크립트를 쓴 것을 아직도 똑똑히 기억한다.나는 시험에서 펼칠 셀렌 주문이 거의 다 떨어졌기 때문에 책상에 머리를 부딪쳤다.
오늘에 접어들면서 나는 오류 로그와 엉뚱한 자동화 스크립트 대신 믿을 만한 E2E 테스트를 신속하게 작성하기 위해 이 안내서를 쓰고 있었다.
녹음기를 사용하다
레코더는 사용자가 수행한 브라우저 작업을 기록하고 이를 완전히 작동하는 자동화 스크립트로 변환하는 도구입니다.따라서 사용자처럼 사용자 흐름을 통과하기만 하면 테스트 코드를 작성할 수 있습니다.
나는 어떤 사람들이 의심하는 태도를 보일지 모르지만, 내 말을 끝까지 들어 주십시오.자동화 프레임워크가 시간의 추이에 따라 현저하게 개선되었듯이 테스트 기록기도 시간의 추이에 따라 엄숙한 사랑을 받았다.
테스트 레코더가 다음과 같은 이유로 유용하다는 것을 알게 되었습니다.
다음과 같은 몇 가지 녹음기로 시작하실 수 있습니다.
안정적인 선택기 사용
동적 CSS 클래스와 요소는 현재의 정상적인 상태이기 때문에 빠르게 변화하는 코드 라이브러리, 심지어 비동기 논리로 인해 빠르게 변화하는 웹 페이지에 대한 건장한 선택기를 선택하기 어렵다.
특히 프로젝트가Tailwinds, 스타일링 구성 요소, 심지어React나 Vue 등 JS 프레임워크를 사용하면 비동기적 논리로 요소를 나타내기 때문에 신뢰할 수 있는 목표 요소를 찾기 어려울 수도 있습니다.
첫 번째 솔루션: ID 테스트
이러한 문제점을 해결하는 가장 좋은 방법은 테스트할 요소를 위한 안정적인 선택기를 현시적으로 도입하는 것이다. 응용 프로그램에 테스트 ID를 도입하는 것만큼 안정성을 높일 수 있는 것은 없다.
이 개념은 매우 간단하다. 상호작용이 필요한 요소에 HTML 요소에
data-test-id=”my-element” 속성을 추가한다.자동화 스크립트에서 사용 가능await page.click('[data-test-id="my-element"]')
그러나 이것은 위치를 지정해야 하는 요소에 새로운 속성을 추가해야 합니다.프로그램 소유자가 이 새 속성을 추가하는 개방 정도에 따라 의존하기 어려울 수도 있습니다.테스트 ID를 사용할 수 없는 경우 다음 최적의 솔루션을 선택하겠습니다.
두 번째 해결 방안: 접근성 선택기
다행히도, 접근성이 웹 응용 프로그램의 더 높은 우선순위가 됨에 따라, 상호작용을 필요로 하는 관건적인 요소들이 기계의 우호적인 라벨을 붙이고 있을 것이다.
일반적으로 상호작용할 요소의 속성을 볼 수 있습니다. 예를 들어
aria-label, alt 또는 title입니다.이러한 속성은 흔히 CSS 클래스보다 안정적이어서 테스트가 필요한 요소에 대해 테스트 ID를 실현할 수 있을 때까지 좋은 방법으로 사용할 수 있습니다.이러한 속성을 사용하는 스크립트는 다음과 같을 수 있습니다
await page.click('[alt="Main Logo"]')
마지막 해결 방안: 텍스트 내용 선택기
테스트 중인 프로그램이 접근 가능한 선택기를 모두 구축하지 않았을 수도 있고, 테스트 ID를 실현할 시간이 없을 수도 있습니다. 마지막으로 고려할 수 있는 해결 방안은 텍스트 내용을 통해 요소를 지정하는 것입니다.
언뜻 보기에는 매우 약한 제안일 수도 있다.확실히 어떤 요소에 있어서는 이것이 가장 좋은 해결 방안일 수도 있지만 다른 요소에 있어서는 이것이 가장 좋은 안정적인 해결 방안일 수도 있다.팀에서 프로그램의 '로그인' 단추 텍스트를 마지막으로 업데이트한 시간을 기억하십니까?
비동적 텍스트 내용이 있는 요소는 일반적으로 단추나 입력 차지 문자이며 텍스트 내용은 목표 요소의 상당히 믿을 만한 방식이 될 수 있다.
다행히도 극작가들 사이에서는 텍스트를 통해 요소를 포지셔닝하는 것이 매우 쉽다. 예를 들어 다음과 같다.
page.click('text=Sign In')
await page.waitForXPath('//*[contains(., "Sign In")]')
const [element] = await page.$x('//*[contains(., "Sign In")]');
await element.click();
자동 선택
여기서 언급한 안정된 선택기의 이러한 최선의 실천과 더 많은 실천은 이미 DeploySentinel Recorder’s 선택기 선택 논리에 내장되어 있다.따라서 특정 테스트 ID나 액세스 가능 선택기를 찾을 필요가 없습니다.
디버그 기능 열기
테스트 스크립트가 왜 작동하지 않는지 알아내려고 한다면, 디버깅 모드를 빨리 시작하는 것이 스크립트가 하고 싶은 일을 하지 않은 이유를 찾아내는 가장 빠른 방법일 수도 있다.
극작가의 검사원과 추적 관찰자
PlayerWright가 있으면 스크립트 앞에
PWDEBUG=1을 추가하는 것이 매우 쉽습니다. Playwright Inspector을 조정하면 테스트 기간에 PlayerWright가 하고 있는 모든 일을 자세히 알 수 있습니다.단계에 문제가 있으면 await page.pause()을 추가하여 이 시간에 페이지를 검사할 수 있도록 테스트 실행을 중지할 수 있습니다.원격 환경에서 스크립트를 실행하는 경우 각 작업 전후의 세부 로그와 DOM 스냅샷을 기록한 작가의 Trace Viewer을 활용할 수 있습니다.
Deploy Sentinel을 사용하여 테스트를 실행하면 기본적으로 극작가의 추적 정보를 포착하고 디버깅 테스트가 실행될 때 언제든지 볼 수 있습니다.
아바타 모드와 슬로우 모션
일반적으로, 스크립트가 실행 중인 동작을 직관적으로 볼 수 있도록 머리 모드를 사용하고, 느린 동작을 사용할 수 있습니다.극작가와 인형 배우 모두 두 줄의 추가 코드만 있으면 이 점을 지원할 수 있다.Playwright 및 Puppeteer 설명서를 참조하십시오.
DeploySentinel Recorder은 항상 이 두 옵션을 주석하지만, 로컬 디버깅을 위해 생성된 모든 스크립트의 일부분으로 삽입합니다.
Chrome 개발 도구 사용
마지막으로 인터넷 요청이나 브라우저 로그를 볼 필요가 있는 문제가 발생하면 극작가와 인형 배우가 브라우저가 시작될 때 크롬 개발 도구 패널을 열어 처음부터 모든 로그와 인터넷 요청을 자동으로 포착할 수 있도록 한다.Playwright docs 또는 Puppeteer’s debugging docs의 개발 도구 섹션을 참조하십시오.
준비 다 됐어!
나는 이 기교들이 네가 인형 배우나 극작가를 위해 테스트 각본을 창작하는 데 도움을 줄 수 있기를 바란다.
테스트를 쉽고 경제적으로 실행하려면 try DeploySentinel for free을 사용하십시오. 이러한 모범 사례는 별도의 노력 없이 얻을 수 있습니다.
Reference
이 문제에 관하여(극작가와 인형 배우를 위한 E2E 테스트 스크립트 무눈물 가이드), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/mikeshi/no-tears-guide-to-creating-e2e-test-scripts-for-playwright-puppeteer-127a텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
