TestCafe : Node.js를 사용한 더 쉬운 엔드 투 엔드 웹 앱 테스트

testCafe : 웹 애플리케이션의 자동 테스트를 단순화하기위한 node.js 프레임 워크

코어 포인트 :

testCafe는 Node.js를 기반으로하는 웹 응용 프로그램 테스트 프레임 워크로 자동 테스트의 설정 및 실행 프로세스를 단순화합니다. 브라우저 시작, 테스트 실행, 결과 수집 및 보고서 생성 등 모든 테스트 단계를 다룹니다. testCafe는 브라우저 플러그인 또는 기타 종속성이 필요하지 않으며 인기있는 최신 데스크톱 또는 모바일 브라우저에서 테스트를 지원합니다. 또한 플러그인 생태계를 통해 클라우드 테스트 서비스 및 비 전통적인 브라우저와 호환됩니다. testCafe는 호버에서 파일 업로드에 이르기까지 다양한 테스트 작업을 제공하며 대기 또는 최대 절전 모드를 수동으로 추가하지 않고 내장 자동 대기 메커니즘이 있습니다. 또한 테스트중인 페이지의 객체 표현을 소개하고 테스트 코드에서 사용하는 페이지 객체 패턴을 지원합니다.

testCafe는 인기있는 작업 러너 및 지속적인 통합 시스템과 통합 될 수 있으므로 일상적인 작업을위한 일반적인 도구가되고 자동화 된 개발 워크 플로우에서 프로젝트 테스트를 설정할 수 있습니다. 또한 여러 브라우저에서 동시에 테스트를 실행하여 테스트 프로세스 속도를 높일 수 있습니다.

• 이 기사는 TestCafe 팀의 멤버 인 Vasily Strelyaev에 의해 설명 되어이 새로운 node.js 기반 응용 프로그램 테스트 프레임 워크의 장점을 설명하기 위해 설명합니다.
프론트 엔드 웹 개발자는 웹 애플리케이션을위한 자동 테스트를 설정하는 것이 얼마나 어려운지 알고 있습니다. 테스트 프레임 워크를 설치하더라도 어려울 수 있습니다. 많은 기존 솔루션에는 브라우저 플러그인과 JDK와 함께 제공되는 Selenium이 필요합니다.
• 테스트를 시작하기 전에 테스트 환경을 설정해야합니다. 즉, 구성 파일을 처리하는 것을 의미합니다. 나중에 테스트 환경의 일부 (예 : 보고서)가 누락되었으며 별도로 찾아 설치해야한다는 것을 알 수 있습니다.
testCafe는 웹 애플리케이션을위한 새로운 오픈 소스 Node.js 기반 엔드 투 엔드 테스트 프레임 워크입니다.
• 모든 테스트 단계를 담당합니다. 브라우저 시작, 테스트 실행, 테스트 결과 수집 및 보고서 생성. 브라우저 플러그인이나 기타 의존성이 필요하지 않습니다. 상자에서 작동합니다.
이 기사에서는 다음과 같은 방법을 보여 드리겠습니다

첫 번째 테스트 작성

로컬 머신 및 클라우드 테스트 서비스 에서 실행하십시오 작업 러너

에 대한 테스트 작업을 만듭니다

testCafe 설치 먼저 컴퓨터에 node.js를 설치해야합니다. 하나가없는 경우 웹 사이트를 방문하여 다운로드하거나 버전 관리자 (예 : NVM) 사용을 고려하십시오. node.js를 완료 한 후 TestCafe를 설치하면 하나의 명령 만 있으면됩니다. Linux/Mac을 사용하고 있으며 Sudo를 추가 해야하는 경우 NPM 권한 수정을 고려해야합니다.

쓰기 테스트 우리는 TestCafe 데모 페이지에 대한 테스트를 작성합니다.

선택의 코드 편집기를 열고 새로운 test.js 파일을 만듭니다.

먼저, http://devexpress.github.io/testcafe/example/demo 웹 페이지를 가리키는 고정구 문을 추가하십시오.

그런 다음 테스트를 추가하십시오

이제 테스트가 "개발자 이름"입력 필드에 텍스트를 입력하고 "제출"버튼을 클릭하십시오.

여기에서 우리는 typetext를 사용하고 테스트 작업을 클릭합니다. TestCafe는 호버링에서 파일 업로드에 이르기까지 이러한 많은 작업을 제공합니다.

테스트로 돌아 갑시다. 제출 버튼은 "감사합니다, %사용자 이름 %!"라는 페이지로 리디렉션됩니다.

npm install -g testcafe

<<>

이 페이지의 텍스트에 올바른 이름이 포함되어 있는지 확인합니다.

fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;

이렇게하려면 기사 제목을 식별하기위한 선택기를 만듭니다. 테스트 작업 후, 우리는 텍스트에 "감사합니다, Peter Parker!"라고 말하는지 확인하기 위해 어설 션을 추가합니다. <🎜 🎜> 페이지 객체 <🎜 🎜> testCafe 팀은 테스트에서 페이지 객체 패턴을 사용하도록 권장합니다. 이 패턴을 사용하면 테스트중인 페이지의 객체 표현을 소개하고 테스트 코드에서 사용할 수 있습니다. 우리가 어떻게 그렇게하는지 봅시다.

새 page-object.js 파일을 만들고 페이지 클래스를 선언합니다 : <🎜 🎜>

지금까지 테스트는 개발자 이름 입력, 제출 버튼 및 "감사"제목의 세 페이지 요소와 상호 작용합니다. 그래서 우리는 페이지 클래스에 세 개의 선택기를 추가합니다 : <🎜 🎜>

fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;

test('My first test', async t => {
    // 我们稍后将添加测试代码
});

테스트 파일에서 Page-Object.js를 참조하고 페이지 클래스의 인스턴스를 작성하고 테스트 작업에서 필드를 사용하십시오.

페이지 객체 모드 사용하면 모든 선택기를 한 위치에 저장할 수 있습니다. 테스트중인 웹 페이지가 변경되면 하나의 파일 -Page-Object.js 만 업데이트하면됩니다.

테스트를 국부적으로 실행합니다 <🎜 🎜> 로컬 컴퓨터 에서이 테스트를 실행하려면 하나의 명령 만 있으면됩니다.

testCafe는 Google 크롬을 자동으로 찾고 시작하여 테스트를 실행합니다.

마찬가지로, 단순히 이름을 지정하여 Safari 또는 Firefox 에서이 테스트를 실행할 수 있습니다.

당신은 testCafe-list-browsers 명령을 사용하여 컴퓨터에서 TestCafe에서 감지 한 브라우저 목록을 볼 수 있습니다 : <🎜 🎜> <<>

<<> 테스트 작동 보고서 <🎜 🎜> 테스트가 완료된 후 TestCafe는 보고서를 콘솔로 출력합니다.

<<>

테스트가 실패하면 TestCafe는 오류가 발생한 위치를 보여주는 통화 스택이있는 콜 사이트를 제공합니다.

<<> 5 개의 내장 보고서 형식 중에서 선택하거나 다른 형식을 지원하는 애드온을 검색 할 수 있습니다.

IDE에서 테스트를 시작하십시오 전용 플러그인을 사용하여 vs 코드 또는 Sublimetext와 같은 인기있는 IDE에서 TestCafe 테스트를 실행할 수 있습니다.

<<>

클라우드 테스트 서비스에서 테스트를 실행합니다 TestCafe는 인기있는 최신 데스크탑 또는 모바일 브라우저에서 상자 밖으로 테스트를 실행할 수 있지만 클라우드 테스트 서비스, 헤드리스 브라우저 및 기타 비 전통적인 브라우저와 호환되는 플러그인 생태계도 있습니다.

<,>이 섹션에서는 인기있는 자동 테스트 클라우드 인 Saucelabs에서 테스트를 실행합니다. 운영 체제와 브라우저가 다른 수백 개의 가상 머신을 호스팅합니다.

saucelabs에서 테스트를 실행하려면 saucelabs 계정이 필요합니다. 하나가없는 경우 https://saucelabs.com/을 방문하여 새 계정을 만듭니다. 필요한 자격 증명을 얻을 수 있습니다 : 사용자 이름 및 액세스 키.

이제 saucelabs와 호환되는 TestCafe 플러그인을 설치해야합니다.

이 플러그인은 로컬 디렉토리에 설치되어 있으므로 TestCafe를 로컬로 설치해야합니다.

Saucelabs 플러그인을 사용하기 전에 Saucelabs 문서의 지침을 따르십시오. 사용자 이름과 액세스 키를 환경 변수 SAUCT_USERNAME 및 SAUCT_ACCESS_KEY에 저장하십시오. 이제 클라우드에서 Saucelabs 가상 머신에서 테스트를 실행할 수 있습니다 : <🎜 🎜>

다음 명령을 실행하여 Saucelabs에서 사용 가능한 브라우저 및 가상 머신의 전체 목록을 볼 수 있습니다.

작업 러너에 작업을 추가하십시오 작업 러너는 개발 워크 플로에서 일상적인 작업을 자동화해야 할 때 유용합니다.

작업 러너와의 통합은 개발 시간에 TestCafe 테스트를 실행하는 좋은 솔루션입니다. 그렇기 때문에 TestCafe 커뮤니티가 가장 인기있는 Node.js 작업 러너와 통합하는 플러그인을 개발 한 이유입니다.

이 튜토리얼에서는 gulp.js를 사용할 것입니다.

컴퓨터에 Gulp.js가 설치되어 있지 않으면 다음 명령을 사용하여 전 세계 및 로컬 프로젝트에 설치하십시오.

testcafe를 gulp.js와 통합하는 Gulp 플러그인 설치 : <🎜 🎜>

프로젝트에 gulpfile.js 파일이있는 경우 다음 작업을 추가하십시오. 그렇지 않으면이 작업을 사용하여 새로운 gulpile.js를 만듭니다.

이 작업은 Chrome 및 Firefox의 Test.js 파일에서 테스트를 실행합니다. Gulp 플러그인 API에 대한 자세한 내용은 Github 페이지를 참조하십시오.

이제 다음과 같이 명령 줄 에서이 작업을 실행할 수 있습니다.

연속 통합 플랫폼에서 테스트 <🎜 🎜> testCafe는 강력한 명령 줄 및 프로그래밍 인터페이스를 제공하므로 대부분의 최신 CI 시스템에서 쉽게 사용할 수 있습니다.

테스트 실행 보고서는 가장 인기있는 CI 시스템에서 이해하는 JSON, XUNIT 및 NUNIT 형식으로 렌더링 할 수 있습니다.

npm install -g testcafe

testCafe 문서에는 Travis CI에서 GitHub 프로젝트에 대한 테스트를 설정하는 방법을 설명하는 레시피가 포함되어 있습니다.

요약 이 기사에서는 첫 번째 TestCafe 테스트로 시작하고 결국 E2E 테스트를 프로젝트 프로세스에 통합하는 방법을 보여줍니다. TestCafe로 웹 응용 프로그램을 테스트하는 것이 얼마나 쉬운 지 직접 경험할 수 있습니다.

testCafe에 대해 궁금한 점이 있으면 아래에 의견을 말하고 포럼에서 질문을하거나 GitHub 페이지를 방문하십시오.

testCafe faq

테스트 카페는 다른 엔드 투 엔드 테스트 도구와 어떻게 다릅니 까?

testCafe는 WebDriver 또는 기타 테스트 소프트웨어가 필요하지 않기 때문에 고유 한 엔드 투 엔드 테스트 도구입니다. Node.js에서 실행되며 프록시를 사용하여 스크립트를 브라우저에 주입합니다. 이를 통해 사용자 작업을 자동화하고 페이지의 요소가 예상대로 실행된다고 주장 할 수 있습니다. 모바일 장치를 포함한 여러 브라우저 및 플랫폼에서 테스트를 지원합니다. 또한 자동 대기, 실시간 진단 및 동시 테스트 실행과 같은 기능도 제공합니다.

모바일 테스트에 TestCafe를 사용할 수 있습니까?

예, TestCafe는 모바일 테스트를 지원합니다. iOS 및 Android 장치뿐만 아니라 모바일 에뮬레이터 및 에뮬레이터에서 테스트를 실행할 수 있습니다. 데스크탑 브라우저에서 모바일 장치를 시뮬레이션 할 수도 있습니다. 따라서 반응 형 웹 응용 프로그램을 테스트하기위한 보편적 인 도구가됩니다.

TestCafe는 비동기 작업을 어떻게 처리합니까?

testCafe에는 자동 대기 메커니즘이 내장되어 있습니다. 즉, 테스트에 대기 또는 최대 절전 모드를 수동으로 추가 할 필요가 없습니다. TestCafe는 각 작업 전후에 페이지로드 및 XHR을 자동으로 기다립니다. 또한 요소와 상호 작용하기 전에 요소가 보이기를 기다립니다.

여러 브라우저에서 TestCafe 테스트를 동시에 실행할 수 있습니까?

예, TestCafe를 사용하면 여러 브라우저에서 동시에 테스트를 실행할 수 있습니다. 이것은 테스트 프로세스 속도를 크게 높일 수 있습니다. 테스트를 시작할 때 동시 테스트 실행 수를 지정할 수 있습니다.

testCafe에서 테스트를 디버그하는 방법은 무엇입니까?

testCafe는 디버깅 및 테스트를위한 몇 가지 방법을 제공합니다. 테스트를 일시 중지하는 디버그 모드가 포함되어 있으며 현재 테스트중인 페이지의 상태를 볼 수 있습니다. 또한 실시간 테스트 상태 보고서, 스크린 샷 및 테스트 세션의 비디오 녹화를 제공합니다.

크로스 브라우저 테스트에 TestCafe를 사용할 수 있습니까?

예, TestCafe는 크로스 브라우저 테스트를 지원합니다. 로컬 머신이든 원격 장치에서 여러 브라우저에서 동시에 테스트를 실행할 수 있습니다. Chrome, Firefox, Safari 및 Internet Explorer를 포함한 모든 인기있는 브라우저를 지원합니다.

테스트 카페는 페이지 탐색을 어떻게 처리합니까?

testCafe는 자동으로 페이지 탐색을 처리합니다. 테스트가 시작되기 전에 페이지가로드되고 새 페이지가 발생하는 각 조치 후에 기다립니다. 즉, 페이지 탐색을 처리하기 위해 특수 코드를 추가 할 필요가 없습니다.

지속적인 통합 시스템과 함께 TestCafe를 사용할 수 있습니까?

예, TestCafe는 Jenkins, TeamCity, Travis 등과 같은 인기있는 연속 통합 시스템과 통합 될 수 있습니다. 이러한 시스템에서 사용할 수있는 Xunit을 포함하여 다양한 형식의 보고서를 생성 할 수 있습니다.

testCafe에서 파일 업로드를 처리하는 방법은 무엇입니까?

testCafe는 파일 업로드에 대한 특별 작업을 제공합니다. t.setFilestUpload 작업을 사용하여 파일을 업로드 할 수 있습니다. 이 작업은 파일 입력을 식별하는 선택기와 파일 업로드 경로를 지정하는 문자열을 식별합니다.

성능 테스트에 TestCafe를 사용할 수 있습니까?

TestCafe는 주로 기능 테스트에 사용되지만 성능 테스트에도 사용될 수 있습니다. 작업을 완료하는 데 걸리는 시간, 페이지로드 및 AJAX 요청을 완료하는 데 걸리는 시간을 측정하는 데 사용할 수 있습니다. 그러나보다 자세한 성능 테스트를 위해서는 전용 성능 테스트 도구를 사용해야 할 수도 있습니다.

이 개정 된 출력은 원래 이미지 위치와 형식을 유지하면서 독창성을 위해 컨텐츠를 역설하고 더 나은 독서를 위해 전체 구조를 향상시킵니다.

위 내용은 TestCafe : Node.js를 사용한 더 쉬운 엔드 투 엔드 웹 앱 테스트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!