[Cypress] 자동화 테스트

카테고리 : Development
태그: development · cypress · testing · CI/CD · BDD · TDD
등록일: 2023년 05월 02일
최근 업데이트: 2023년 05월 02일

1. 사용자 액션

describe

• 모든 파일의 시작
• 콜백 함수에 담을 내용 정리

beforeEach - 단위 테스트 진행되기 전마다 실행될 명령

cy.visit('url') - url로 이동 후 체크

cy.viewport(width, height) - cypress 테스트 화면 지정

it('단위 테스트명', () => {}) -

• 콜백 함수에 테스트 할 명령어 입력
• it가 시작하기 전마다 beforeEach 실행

cy.get - DOM 엘리먼트 코드

.click() - 마우스 클릭 이벤트가 발생합니다.

.**contains()**

• 원하는 내용을 포함하고 있는 엘리먼트 선택
• contains가 찾는 엘리먼트 없으면 에러

.type() - 인풋 박스 등에 키보드 입력가 발생합니다.

.check() - 체크 박스에 체크합니다.

.uncheck() - 체크 박스에 체크를 해제합니다.

.select() - select 박스를 선택합니다.

cy.wait(ms) - 잠깐 멈춤이 필요할 때 사용

invoke() -

• invoke('text')
  • cy.get 엘리먼트의 텍스트를 가져옴
• invoke('val')
  • cy.get 엘리먼트의 값을 가져옴

should -

• should('have.text', 'abc')
  • abc가 텍스트에 포함되어 있어야 함
• should('have.value', '123')
  • 123이 값으로 들어가 있어야 함
• should('(not.)be.exist')
  • element가 존재하거나 존재하지 않음
• should('(not.)be.visible')
  • display가 none으로 보이거나 보이지 않아야 함
• should('(not.)be.checked')
  • 체크박스가 체크 되거나 안 되어있거나
• shoule('have.length', 3)
  • 길이가 3이어야 함. children 등과 사용 가능

clear() - **** input등의 값을 비움

---

2. E2E Testing

• 테스트할 브라우저를 선택합니다. 보통 크롬 브라우저로 테스트. 설치되어 있는 브라우저 목록이 표시됌. “Start E2E Testing in Chrome

---

3. 테스트 파일(Specs) 만들기

• 새로운 테스트를 만들기 위해서 “Create new empty spec”을 선택

---

4. Testing Strategies

describe("WebdriverUniversity.com에서 테스트 코드 제출", () => {
  /* 개별 테스트는 it */
  it("연락처를 테스트 코드로 제출", () => {
    //cypress code
    cy.visit("http://www.webdriveruniversity.com/Contact-Us/contactus.html");
    // cy.get('#contact-us').click({force:true});
    cy.get('[name="first_name"]').type("");
    cy.get('[name="last_name"]').type("ABEL");
    cy.get('[name="email"]').type("dn10003@gmail.com");
    cy.get("textarea.feedback-input").type("안녕하세요 필드 전송 테스트입니다");
    cy.get('[type="submit"]').click();
  });
  it("연락처를 테스트 코드로 비정상적인 제출", () => {
    //cypress code
    cy.visit("http://www.webdriveruniversity.com/Contact-Us/contactus.html");
    // cy.get('#contact-us').click({force:true});
    cy.get('[name="first_name"]').type("");
    cy.get('[name="last_name"]').type("Abel");
    cy.get("textarea.feedback-input").type("안녕하세요 필드 전송 테스트입니다");
    cy.get('[type="submit"]').click();
  });
});