저는 결혼식을 위한 몇 개의 웹사이트와 여행 중에 음식을 번역하는 음식 번역 웹사이트를 운영하고 있습니다. 제가 발견한 재미있는 것 중 하나는 이러한 웹사이트를 테스트하고 모든 것이 제대로 작동하는지 확인하는 방법입니다.
제가 찾은 SIRV와 Playwright라는 두 가지 도구는 웹사이트를 운영하고 사이트의 일부를 테스트하는 데 도움이 될 수 있습니다. 몇 가지 테스트를 수행하고 상황을 개선하는 방법을 알아낸 후에는 해당 테스트를 기반으로 업데이트하고 변경할 수 있습니다. 이를 테스트 중심 개발이라고 하며, 테스트를 통해 애플리케이션의 격차를 드러내고 테스트를 기반으로 변경합니다.
대개 이러한 격차는 테스트 실패의 형태로 발생합니다. 예를 들어, 웹 사이트에 양식이 있는데 식이 요법에 따라 구두점을 입력할 때 실패하는 경우 구두점을 허용하도록 양식 입력을 변경할 수 있습니다. 이를 통해 사용자에게 더 나은 애플리케이션을 제공하고 이제 실행한 원래 테스트를 기반으로 새로운 기능을 갖게 되었습니다.
그렇다면 애플리케이션에 대한 테스트를 어떻게 작성합니까?
SIRV는 정적 사이트 서버입니다. 정적 자산에 대한 요청을 처리하기 위해 최적화된 미들웨어입니다. 따라서 SIRV는 정적 사이트가 있을 때 가장 잘 작동합니다.
반면 Playwright는 웹 애플리케이션을 위한 테스트 방법입니다. 이들을 함께 사용한다는 것은 Playwright가 테스트를 작성하고 실행하는 데 사용할 도구라는 것을 의미합니다. SIRV는 애플리케이션 실행을 확인하고 어떤 테스트가 통과 또는 실패하는지 확인할 수 있는 인터페이스입니다.
코드를 테스트하려면 테스트를 작성해야 합니다. 이 예에서는 웹페이지에 특정 단어나 제목이 있는지 확인하는 테스트를 작성하고 있습니다. 저는 이를 위한 테스트 작성을 돕기 위해 GitHub Copilot을 사용했습니다. Playwright 문서는 테스트 작성을 위한 올바른 시작점을 제공했습니다.
테스트 글쓰기에 Playwright를 사용하려면 이를 가져와야 합니다. 테스트 작성의 출발점은 다음과 같습니다.
'@playwright/test'에서 { 테스트, 기대 } 가져오기;
저희 결혼식을 위한 웹사이트를 구축했는데 페이지에 "Mish and Max"라는 제목이 감지되는지 테스트하고 싶었습니다. 이를 테스트하는 데 사용한 코드는 다음과 같습니다.
test('Contact Mish and Max', async ({ page }) => {
// Navigate to the page
await page.goto('http://localhost:8080/contact.html');
// Assert that the title says "Contact Mish and Max"
await expect(page).toHaveTitle("Contact Mish and Max")
});
확장자가 .spec.test인 새 파일을 프로젝트에 추가하게 됩니다. 반드시 저장하고, 변경할 때마다 저장하세요. 이제 테스트를 작성했으니 실행해 보겠습니다.
먼저 이 작업을 수행하려면 Node가 필요합니다. Node.js 문서의 가이드에 따라 Windows, MacOs 또는 Linux용 Node를 설치하세요.
코드를 테스트할 준비가 되면 VS Code 또는 선택한 편집기에서 터미널을 엽니다. 저는 VS Code를 사용하고 있으므로 여기 데모에서는 VS Code를 사용합니다. 보기 >를 선택하여 터미널을 엽니다. 메뉴 표시줄에서 터미널을 실행하거나 Ctrl + ` 키보드 단축키를 누르세요.
터미널이 있으면 실행해야 할 몇 가지 명령이 있습니다.
npm install @playwright/test - 테스트 라이브러리를 설치하여 Playwright 테스트를 설정합니다.
npx 극작가 설치 - Chrome, FireFox, Safari 등의 테스트 버전을 다운로드합니다.
npx sirv-cli . - 테스트를 위해 SIRV 로컬 버전을 실행합니다.
이제 SIRV 및 Playwright 설정이 완료되었으므로 테스트를 실행할 수 있습니다. VS Code(또는 선택한 편집기)에서 새 터미널을 열고 다음 명령을 실행합니다.
npx playwright test --ui 이는 테스트를 실행하고 실행 중인 테스트를 볼 수 있는 새 창을 엽니다.
위의 실행 명령은 모두 다음과 같습니다.
극작가 터미널 테스트 창:
위 테스트에서 실행 시 실패하는 것을 볼 수 있습니다. 이런 일이 발생하는 이유를 조사하면 문제를 해결하는 방법을 결정할 수 있습니다. "오류" 탭을 보면 어떤 오류가 발생했는지 확인할 수 있습니다.
이 경우에는 다음과 같이 표시됩니다.
예상 문자열: "Mish와 Max에게 연락하세요"
수신된 문자열: "연락처"
즉, "Contact Mish and Max"를 받을 것으로 예상했는데 대신 "Contact"라고 표시됩니다. 내 *.html 파일을 보면 두 개의
이번에는 ✔️가 보이고 테스트에 통과되었네요 ?.
이제 SIRV 및 Playwright를 사용하여 테스트를 작성하고 실행하는 방법을 알았으므로 더 복잡한 테스트를 작성할 수 있습니다. 예를 들어, 위와 동일한 문의 양식에서 GitHub Copilot의 도움을 받아 문의 양식을 작성하고 제출할 수 있는지 확인하는 테스트를 작성했습니다.
이 테스트를 실행하고 테스트의 각 부분을 단계별로 진행하면서 웹사이트에서 변경된 부분을 UI에서 확인할 수 있습니다.
직접 시도해 보고 어떤 테스트를 작성하고 있는지, 이 가이드가 도움이 되었는지 알려주세요.
위 내용은 웹사이트 테스트 방법: TDD(테스트 중심 개발)에 SIRV 및 Playwright 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
