Cypress란?
웹 서비스 테스팅 앱으로
Mac, Window, Linux 모두 지원한다.
Cypress 설치
// node.js에서 설치
npm i cypressJavaScript End to End Testing Framework
Fast, easy and reliable testing for anything that runs in a browser. Install Cypress in seconds and take the pain out of front-end testing.
www.cypress.io
Cypress 실행하기
cypress open
Cypress 파일 만들기
//cypress/integration/test.js (폴더중요)
describe('My First Test', () => {
it('Does not do much!', () => {
expect(true).to.equal(true)
})
})
// 'My First Test' = 테스트 이름
// 'Does not do much!' = 함수 이름
// expect(A).to.equal(B) = A,B가 똑같으면 테스트 통과
Cypress 테스트 하기위한 브라우저 설치
Cypress는 크롬, 파이어폭스 등 여러가지 브라우저를 지원하지만,
평소에 사용하는 브라우저는 상시 업데이트를 통해 기능이 변경되는 일이 많으므로
예상치 못한 에러가 발생하는 경우가 있다.
따로 테스트를 위한 브라우저를 설치하는 것이 좋다! ( Chromium 설치 )
Chromium Downloads Tool
chromium.cypress.io
Cypress 테스트 하기
// 명령창에서 테스트 하기
// chromium 브라우저 사용해서 테스트 하기
// 테스트할 파일을 제외하고, integration 폴더 내용을 비워주세요!
cypress run --browser chromium
package.json에 단축명령어 만들기
// package.json
{
"scripts": {
"cypress": "cypress open",
"cypress:chrome": "cypress run --browser chrome"
}
}
// npm run cypress
// yarn cypressCypress로 사이트 접속하기
// /integration/test.js
describe("My First Test", () => {
it("Visits the Kitchen Sink", () => {
//cy.visit("url") 사용!
cy.visit("https://example.cypress.io");
});
});
사이트에 포함되어 있는 요소 검사하기
describe("My First Test", () => {
it("Visits the Kitchen Sink", () => {
cy.visit("https://example.cypress.io");
//cy.contain(요소) 사용! - "type" 찾기
cy.contain("type");
});
});
찾은 요소 클릭하기
// click() 함수를 사용한다.
cy.contain("type").click()
현재 url 상태 검사하기
// url()함수로 현재 url을 가져올 수 있다.
// sould()함수로 조건에 만족하는지 검사하여, 테스트를 진행할 수 있다.
cy.url().should("include", "/commands/actions");
// url속에, "/commands/actions"문자열이 "include"되는지 테스트
Input 요소 찾고, 타이핑하기
cy.get('.action-email')
.type('fake@email.com')
.should('have.value', 'fake@email.com')
// action-email 이란 클래스를 가진 요소를 선택한다.
// 'fake@email.com'이란 문자열을 타이핑한다.
// shoud()함수를 통해, 'fake@email.com'이란 문자열을 값으로 가지고 있는지 테스트한다.
중간에 일시정지하기
cy.visit("https://example.cypress.io");
// 사이트 방문 후
cy.pause()
// 'type' 클릭 전
cy.contain('type').click()
반응형
