Cypress는 웹 애플리케이션용으로 구축된 강력한 엔드투엔드 테스트 프레임워크입니다. 테스트를 간단하고 안정적으로 수행할 수 있도록 설계되어 개발자와 QA 엔지니어가 간단한 상호 작용부터 복잡한 사용자 작업 흐름까지 모든 것을 테스트할 수 있습니다. Cypress를 사용하면 최소한의 설정으로 사용자 작업을 시뮬레이션하고, 프런트엔드 동작을 확인하고, UI 기능을 확인하는 테스트를 만들 수 있습니다.
Cypress는 주로 웹 애플리케이션의 엔드투엔드 테스트에 사용되지만 프런트엔드 환경의 통합 및 단위 테스트에도 효과적입니다. 다음은 몇 가지 일반적인 사용 사례입니다.
사용자 흐름 자동화: 인증, 양식 제출, 전자상거래 거래 등 복잡한 사용자 흐름을 테스트합니다.
반응형 디자인 테스트: Cypress는 다양한 뷰포트 크기에 대한 테스트를 허용하므로 반응형 디자인 테스트에 이상적입니다.
회귀 테스트: 테스트 사례를 자동화하면 새로운 코드 변경으로 인해 버그가 발생하지 않았는지 빠르게 확인할 수 있습니다.
UI 구성 요소 테스트: Cypress는 Storybook과 같은 도구와 함께 사용하여 프런트엔드 구성 요소를 개별적으로 검증하여 다양한 시나리오에서 예상대로 작동하는지 확인할 수 있습니다.
Cypress는 CI/CD 파이프라인에 원활하게 통합할 수 있는 강력한 대시보드와 CLI를 제공하므로 최신 웹 개발에서 자동화되고 지속적인 테스트를 위한 선택이 됩니다.
Cypress에서는 테스트 실행기(GUI)와 명령줄 인터페이스(CLI)를 사용하여 두 가지 주요 방법으로 테스트를 실행할 수 있습니다.
두 가지 방법에 대한 빠른 안내는 다음과 같습니다.
Cypress Real World 앱과 함께 Cypress Test Runner를 대화형으로 사용하려면 다음 단계를 따르세요. 이 앱은 사용자 가입, 로그인 및 거래 흐름에 대한 시나리오와 함께 실제 Cypress 테스트의 확실한 예를 제공합니다.
Cypress의 샘플 앱인 "Cypress Real World App"을 예로 들어보겠습니다.
Cypress Real World 앱을 로컬에서 설정 및 실행:
샘플 앱을 설정하는 초기 단계는 다음과 같습니다
git clone https://github.com/cypress-io/cypress-realworld-app cd cypress-realworld-app yarn //run the app yarn dev
Cypress 테스트 실행기 열기:
이제 Cypress Test Runner를 대화형 모드로 열려면 다음 단계를 따르세요.
다음 명령을 실행하세요.
npx cypress open
실행할 테스트를 보고 선택할 수 있는 Cypress Test Runner GUI가 시작됩니다.
E2E를 클릭하면 cypress/tests 아래에 전체 테스트 목록이 포함된 이 대시보드를 볼 수 있습니다.
cypress/tests/ui/custom.spec.ts 아래 디렉터리에 custom.spec.ts라는 새 테스트를 만들어 보겠습니다
git clone https://github.com/cypress-io/cypress-realworld-app cd cypress-realworld-app yarn //run the app yarn dev
설정(beforeEach): 각 테스트 전에 데이터베이스가 일관된 상태로 시작되도록 시드되고, 가입을 위한 API 호출과 GraphQL 요청이 모니터링을 위해 가로채어집니다.
테스트:
npx cypress open
각 테스트는 안전하고 사용자 친화적인 계정 관리를 위한 중요한 기능을 보장합니다.
참고: 여기에 잘못된 로그아웃 및 사용자 이름 흐름을 추가해 보세요
CI 환경이나 일괄 테스트 실행에서 CLI는 간소화된 접근 방식을 제공합니다. 모든 테스트를 실행하거나 개별 테스트 파일을 지정합니다.
describe("User Sign-up and Login", function () {
beforeEach(function () {
// Seed the database before each test
cy.task("db:seed");
// Intercept signup and login API calls
cy.intercept("POST", "/users").as("signup");
cy.intercept("POST", "/graphql").as("gqlRequests");
});
it("should redirect unauthenticated user to signin page", function () {
cy.visit("/personal");
cy.location("pathname").should("equal", "/signin");
});
it("should allow a visitor to sign-up, login, and logout", function () {
const userInfo = {
firstName: "Bob",
lastName: "Ross",
username: "PainterJoy90",
password: "s3cret",
};
// Sign-up User
cy.visit("/signup");
cy.getBySel("signup-first-name").type(userInfo.firstName);
cy.getBySel("signup-last-name").type(userInfo.lastName);
cy.getBySel("signup-username").type(userInfo.username);
cy.getBySel("signup-password").type(userInfo.password);
cy.getBySel("signup-confirmPassword").type(userInfo.password);
cy.visualSnapshot("About to Sign Up");
cy.getBySel("signup-submit").click();
cy.wait("@signup");
// Login User
cy.visit("/signin");
cy.login(userInfo.username, userInfo.password);
// Verify successful login
cy.location("pathname").should("equal", "/");
* **Redirect for Unauthenticated User**: Checks if an unauthenticated user visiting a restricted page (`/personal`) is redirected to the `/signin` page. * **Sign-up, Login**: A new user is signed up, logged in, and logged out. The test verifies the user can register, sign in by being redirected to `/signin`.
Cypress는 빠른 실행, 간편한 설정, 강력한 테스트 기능으로 유명합니다. 다음은 몇 가지 주요 이점입니다.
실시간 다시 로드 및 대화형 테스트: Cypress는 변경 사항이 있을 때 테스트를 다시 로드하여 즉각적인 피드백을 제공하므로 개발자는 앱 동작에 대한 즉각적인 통찰력을 얻을 수 있습니다.
플레이크 없는 테스트: Cypress는 고유한 아키텍처 덕분에 테스트의 플레이키를 줄여 테스트 결과를 더욱 신뢰할 수 있게 만듭니다.
자동 대기: Cypress는 요소가 로드, 응답 및 렌더링될 때까지 기다리므로 명시적인 대기를 추가할 필요가 없습니다.
내장된 어설션 및 모킹: Cypress에는 API 응답 모의 및 사용자 상호 작용 시뮬레이션을 위한 풍부한 어설션 및 도구 세트가 함께 제공됩니다.
Cypress가 사용자 상호 작용을 자동화하여 효율적인 E2E 테스트를 지원하는 것처럼 Keploy는 백엔드에 초점을 맞춰 테스트에 강력한 차원을 제공합니다.
Cypress는 프런트엔드와 사용자 경험을 검증하는 데 빛을 발하고 Keploy는 추가 스크립팅 없이 API 테스트를 자동으로 생성하고 유지 관리하여 이를 보완합니다.
Keploy는 실제 상호 작용을 캡처하고 이를 실행 가능한 테스트로 변환하는 데 특히 효과적이며 애플리케이션 규모에 따라 백엔드 일관성과 데이터 안정성을 보장합니다.
자동 테스트 플랫폼: Keploy는 백엔드 서비스, 특히 API 및 데이터베이스 상호 작용에 대한 테스트를 자동으로 생성하는 데 중점을 둡니다.
캡처 및 재생: Keploy는 실제 트래픽을 캡처하고 테스트 환경에서 재생하여 실제 테스트 사례를 만듭니다.
노코드 테스트 생성: 쉽게 설계되었으며 사용자 지정 스크립트 없이 테스트를 생성합니다.
Keploy를 사용한 E2E 테스트:
API 중심 E2E 테스트: 백엔드 구성 요소에 대한 엔드투엔드 테스트를 자동화하여 백엔드 기능이 하나의 단위로 검증되도록 합니다.
오류 감지 및 재생: API 요청/응답을 캡처하고 상호 작용을 재생하며 회귀를 조기에 감지합니다.
일관적인 데이터 검증: 데이터 흐름의 응답과 변경 사항을 추적하여 배포 전반에 걸쳐 정확성을 보장합니다.
원활한 통합: CI/CD 파이프라인과 쉽게 통합되어 팀이 백엔드 변경 사항에 대한 E2E 확인을 자동화하는 데 도움이 됩니다.
이 분야에는 다양한 도구가 있으며, 각 도구는 Puppeteer의 브라우저별 테스트부터 Playwright 및 Selenium의 브라우저 간 호환성에 이르기까지 다양한 유형의 테스트 환경에 적합한 기능을 제공합니다.
올바른 도구를 선택하는 것은 궁극적으로 테스트 요구 사항과 애플리케이션 요구 사항에 따라 달라집니다.
Cypress는 주로 프런트엔드 테스트 도구입니다. 백엔드 API 및 모의 응답과 상호 작용할 수 있지만 광범위한 백엔드 테스트용으로 설계되지 않았습니다. 백엔드별 테스트의 경우 Keploy와 같은 도구는 서버 측 기능에 대한 단위 및 통합 테스트 기능을 제공하여 Cypress를 보완할 수 있습니다.
예, Cypress는 Chrome, Edge 및 Firefox를 지원합니다. 그러나 더 넓은 브라우저 간 호환성을 제공하는 Selenium 또는 Playwright와 같은 도구에 비해 지원이 제한적입니다.
Cypress는 테스트 코드에서 직접 HTTP 요청을 생성하여 API 테스트를 수행할 수 있습니다. cy.request()를 사용하여 API 응답을 검증하면 동일한 엔드투엔드 테스트 프레임워크 내에서 API를 쉽게 테스트할 수 있습니다.
Cypress는 기본적으로 자세한 로그와 스크린샷을 제공하며, Test Runner를 사용하면 테스트와 시각적으로 상호 작용할 수 있습니다. .only를 추가하여 실패한 테스트를 격리하고, cy.pause()를 사용하여 실행을 중지하고, 추가 디버깅을 위해 Chrome DevTools를 활용할 수 있습니다.
위 내용은 사이프러스 실행과 사이프러스 오픈을 한번에 실행하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
