Ecom Cypress 테스트

Cypress를 사용한 E2E 테스트에서는 Cypress를 사용하여 E2E(엔드 투 엔드) 테스트를 수행하는 방법을 알려줍니다. 는 JavaScript, 특히 웹 애플리케이션의 자동화 테스트를 위한 가장 널리 사용되는 도구 중 하나입니다. 모든 개념과 단계를 자세히 설명드리겠습니다.

---

E2E 테스트란 무엇인가요?

E2E(엔드 투 엔드 테스트)는 인터페이스와의 사용자 상호 작용을 시뮬레이션하여 처음부터 끝까지 애플리케이션의 전체 동작을 확인하는 자동화된 테스트입니다. 이러한 테스트는 실제 환경에서 애플리케이션의 모든 부분이 예상대로 함께 올바르게 작동하는지 검증하기 때문에 중요합니다.

Cypress: 정의 및 작동 방식

Cypress는 웹 애플리케이션의 자동화된 테스트를 위한 도구입니다. 사용하기 쉽고 강력하며 빠르게 설계되었습니다. 이를 통해 사용자와 동일한 방식(버튼 클릭, 양식 작성, 텍스트 유효성 검사 등)으로 애플리케이션의 사용자 인터페이스와 상호 작용하는 테스트를 작성할 수 있습니다.

Cypress의 몇 가지 중요한 기능:

• 실시간 테스트: 브라우저 자체에서 테스트를 실행하므로 실시간으로 실행되는 테스트를 확인할 수 있습니다.
• 설정 용이성: 시작하는 데 복잡한 설정이 필요하지 않습니다.
• 빠른 실행: Cypress는 브라우저에서 실행되므로 다른 E2E 테스트 도구에 비해 테스트 실행이 빠릅니다.
• CI/CD 통합: 테스트 자동화를 위해 CI/CD 파이프라인과 쉽게 통합됩니다.

---

모듈 34 연습

1. Cypress 도구 개념화

Cypress는 주로 E2E 테스트를 위한 웹 애플리케이션용 자동화된 테스트 도구입니다. 브라우저에서 애플리케이션 코드와 직접 상호 작용하도록 설계되어 테스트 효율성이 더욱 높아졌습니다.

2. 머신에 Cypress 설치

Cypress를 사용하려면 프로젝트에 Cypress를 설치해야 합니다. 설치 명령은 다음과 같습니다.

npm install cypress --save-dev

이렇게 하면 Cypress가 프로젝트의 개발 종속 항목으로 설치됩니다.

3. 사이프러스 시작하기

Cypress를 설치한 후 터미널에서 다음 명령을 사용하여 열 수 있습니다.

npm install cypress --save-dev

그러면 브라우저에서 실행 중인 테스트를 볼 수 있는 Cypress Test Runner가 열립니다. 또한 모든 테스트와 구성이 저장되는 Cypress 폴더를 프로젝트에 생성합니다.

4. 설명 기능을 사용하여 테스트 그룹화

Cypress(및 Jest)에서는 describe를 사용하여 동일한 제품군 또는 모듈의 일부인 여러 테스트를 그룹화합니다. 이는 테스트를 보다 체계적으로 구성하는 데 도움이 됩니다.

npx cypress open

위의 예에서:

• describe는 로그인 관련 테스트를 그룹화하는 데 사용됩니다.
• it은 그룹 내의 특정 테스트를 정의합니다. 그 안에는 검증(테스트 단계)을 수행하는 코드가 있습니다.

5. it 기능 사용하기

it 함수는 개별 테스트 사례를 정의하는 데 사용됩니다. 각 테스트 사례는 독립적이어야 하며 애플리케이션의 특정 기능이나 동작을 나타내야 합니다.

6. cy.get 함수를 사용하여 요소 검색

cy.get 함수는 테스트에서 상호작용할 페이지 요소를 선택하는 데 사용됩니다.

예:

describe('Teste de Login', () => {
  it('Deve realizar o login com sucesso', () => {
    cy.visit('https://exemplo.com/login');
    cy.get('input[name="username"]').type('usuario');
    cy.get('input[name="password"]').type('senha123');
    cy.get('button[type="submit"]').click();
    cy.url().should('include', '/dashboard');
  });
});

여기에서 cy.get은 name="username"인 입력과 type="submit"인 제출 버튼을 검색한 다음 type 및 클릭.

7. VScode 및 자동 완성 소개

VSCode를 사용하여 테스트를 편집하고 Cypress 자동 완성 기능을 활용할 수 있습니다. Cypress 자동 완성 기능을 사용하면 입력할 때 메서드와 명령을 제안하여 테스트를 올바르게 작성하기가 쉬워집니다.

8. 계층적 관계 사용

Cypress를 사용하면 더 복잡한 CSS 선택기를 사용하여 페이지 계층 구조를 기반으로 요소를 선택할 수 있습니다. 예를 들어 특정 클래스가 있는 div 내부에 있는 버튼을 선택할 수 있습니다.

cy.get('input[name="username"]').type('usuario');
cy.get('button[type="submit"]').click();

9. 필터링 테스트 구축

필터링 테스트의 예로는 필터를 적용할 때 항목 목록이 올바르게 업데이트되는지 확인하는 것입니다. Cypress를 사용하면 필터와 상호 작용하고 결과를 확인하면서 이러한 유형의 테스트를 쉽게 수행할 수 있습니다.

cy.get('.modal').find('button').click(); // Encontra o botão dentro de .modal e clica

10. beforeEach 함수 사용

beforeEach 함수는 각 테스트 전에 애플리케이션 상태를 구성하는 데 유용합니다. 이는 테스트를 실행하기 전에 애플리케이션이 초기 상태인지 확인해야 할 때 특히 중요합니다.

npm install cypress --save-dev

11. Cypress 반환 유형 알아보기

Cypress는 약속을 사용하여 비동기 시간을 관리하지만 이러한 약속을 자동으로 처리하므로 테스트가 더 간단해집니다. Cypress가 이를 내부적으로 처리하므로 대부분의 경우 wait 또는 .then()을 사용할 필요가 없습니다.

12. 줄을 줄이기 위한 코드 구성

테스트를 체계적으로 유지하고 재사용 가능하게 유지하는 것이 중요합니다. 도우미 함수를 만들고 코드 조각을 재사용할 수 있습니다.

예:

npx cypress open

13. Cypress의 추가 기능 알아보기

• 스크린샷 찍기: Cypress는 테스트 중에 자동으로 스크린샷을 찍을 수 있습니다. 이는 테스트가 실패했을 때 어떤 일이 일어났는지 시각화하는 데 도움이 됩니다.

describe('Teste de Login', () => {
  it('Deve realizar o login com sucesso', () => {
    cy.visit('https://exemplo.com/login');
    cy.get('input[name="username"]').type('usuario');
    cy.get('input[name="password"]').type('senha123');
    cy.get('button[type="submit"]').click();
    cy.url().should('include', '/dashboard');
  });
});

• 보고서 생성: Cypress를 사용하면 테스트 실행 보고서를 생성할 수 있으므로 결과를 더 쉽게 분석할 수 있습니다.

• Cypress Run: 헤드리스 모드(그래픽 인터페이스 없이)에서 테스트를 실행하려면 다음 명령을 사용하세요.
  

cy.get('input[name="username"]').type('usuario');
cy.get('button[type="submit"]').click();

• HTTP 요청 모킹: 실제 호출을 하지 않고도 Cypress를 사용하여 서버 응답을 시뮬레이션할 수 있습니다. 이는 특정 데이터를 사용하여 시나리오를 테스트하는 데 유용합니다.

cy.get('.modal').find('button').click(); // Encontra o botão dentro de .modal e clica

14. 모의서비스워커(MSW) 설치

Mock Service Worker는 테스트에서 HTTP 요청을 가로챌 수 있는 도구입니다. Cypress와 함께 사용하여 요청을 시뮬레이션하고 응답을 제어할 수 있습니다.

cy.get('.filter').select('Option 1');
cy.get('.item-list').should('have.length', 5);

그런 다음 요청을 가로채도록 네트워크 핸들러를 구성할 수 있습니다.

---

결론

모듈 34에서는 Cypress를 사용하여 애플리케이션에서 E2E 테스트를 수행하여 실제 사용 상황에서 올바르게 작동하는지 확인하는 방법을 배웠습니다. Cypress를 구성하고, 테스트를 작성하고, 페이지 요소와 상호 작용하고, beforeEach, cy.get, 스크린샷, 보고서 등과 같은 기능을 사용하는 방법을 배웠습니다. 이러한 테스트는 애플리케이션이 올바르게 작동하고 새로운 버그가 발생하지 않는지 확인하는 데 중요합니다.

위 내용은 Ecom Cypress 테스트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!