Cypress 실행해보기

프론트 엔드 테스트를 해보기 위한 도구입니다.

node용 test framework인 mocha와 assertion 라이브러리 chai를 기반으로 만들어 졌다.

우테코 코스에서 cypress가 있어 접하게 되었습니다.

기본적인 내용은 Cypress 에서 보시기 바랍니다.

 

실행

> 1. 설치 <

• package.json이 없어서 설치 경고가 뜨는 경우가 있습니다. 그럼 그냥 package.json 파일을 만들어주고 실행하면 됩니다.

//원하는 폴더(front_end)로 들어가기
$cd font_end

//cypress 설치  
$npm install cypress

 

> 2. Cypress 실행 <

• cypress open으로 실행을 하면 cypress 폴더 와 cypress.json이 생겨야 합니다.
• 이 후 프로그램이 실행되는 것을 볼 수 있습니다.
• 안될 경우 프로그램을 끄고 다시 켜서 해보면 잘 됩니다. :)

//원하는 폴더(front\_end)로 들어가기  
$cd font\_end

// **VSCode Live Server 켜기 

//cypress 실행  
$npx cypress open

+ cypress 폴더 +

> integration

• test 코드가 위치하는 곳
• examples 폴더에 예제 파일들이 추가되어 있다.

> fixtures

• 네트워크 응답과 같은 테스트에 필요한 정적인 데이터를 만들어 둘 수 이는 곳
• cy.fixture()를 통해 사용

> plugins

• 플러그인(cypress lifecycle의 특정 단계에 실행할 코드 작성, 동적으로 설정 구성 등)을 작성할 수 있다.
• 기본으로 cypress/plugins/index.js이 포함되어 있는데 각 spec 파일이 실행되기 전에 한 번 수행

> support

• plugins처럼 cypress/support/index.js 파일이 각 테스트 파일 수행 전 실행
• custom command, 모든 spec 파일에 적용하거나 사용할 코드를 작성 (ex, before, beforeEach)

 

 

> test 제작 <

1. integration 폴더 에서 spec파일(test.spec.js) 생성하여 제작

ex)

describe('cypress', () => {  
    context('검색', () => {  
        it('검색 후 결과 네이버 클릭시 이동', () => {  
            cy.visit('[https://naver.com'](https://naver.com'))  
        });  
    });  
});

> describe : 테스트를 분류

> it : 실제 테스트 코드 작성

> context : descript과 같은 역할을 하며 가독성을 위해 다르게 사용

https://filiphric.com/cypress-basics-before-beforeeach-after-aftereach