yarn run cypress open

• 사이프레스 로컬에서 테스트

describe('테스트 이름', () => {})

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

beforeEach

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

cy.visit('url')

• url로 이동 후 체크

cy.viewport(width, height)

• cypress 테스트 화면 지정

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

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

cy.get

• 사이프레스 오픈 후 왼쪽 상단 과녁? 누르고 원하는 엘리먼트 누르면 ':nth-child(3) > ul > li' 처럼 코드 얻을 수 있음
• .class, #id 처럼 개발자 도구에서 직접 보고 사용 가능

.click()

• 제곧내

contains('')

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

cy.wait(ms)

• 가끔 너무 빨라서 명령어가 제대로 인식이 안 되거나, 제대로 확인해보고 싶어 잠깐 멈춤이 필요할 때 사용
• setTimeout같은 느낌

type

• input이나 textArea등에 타이핑

alert 텍스트 확인

cy.on('window:alert', (str) => {
	expect(str).to.equal('상품명은 필수항목입니다.');
});

select

• select 항목 중 원하는 항목 선택

invoke()

• invoke('text')
  • cy.get 엘리먼트의 텍스트를 가져옴
• invoke('val')
  • cy.get 엘리먼트의 값을 가져옴
• 그 외 여러가지 명령어가 있음
• then을 이용해 text나 val을 받아 함수 작성 가능

then(val => {})

• 앞 명령어의 엘리먼트 혹은 invoke 된 값을 매개변수를 받아와 함수 작성

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 등과 사용 가능

children()

• 자식 엘리먼트를 가져옴
• children().should('have.length', 3) 처럼 길이 확인 가능

find()

• find에 들어가는 엘리먼트를 찾음

each

function noticeCategoryCheck(select, categories) {
      cy.get(':nth-child(11) > .module-section__list > ul > li.row > :nth-child(1) > .selectbox > select').select(select)
      cy.get(':nth-child(11) > .module-section__list > ul > li.row > .row').find('.column').each((el, i) => {
        cy.get(el).find('span').contains(categories[i])
        cy.get(el).find('input').type('abc').should('have.value', 'abc');
      })
 }

• forEach처럼 find나 get 등으로 찾아진 엘리먼트 배열을 하나하나 돌며 체크

clear()

• input등의 값을 비움

selectFile

cy.get(':nth-child(1) > .column > .row > .upload-list > li > .image-upload > label').selectFile('../../image.jpg');
cy.get(':nth-child(2) > .image-upload > label').selectFile('../../image.jpg').wait(500);
cy.get(':nth-child(3) > .image-upload > label').selectFile('../../image.jpg').wait(500)

• 이미지파일이나 일반 파일 등을 업로드

치트시트

https://cheatography.com/aiqbal/cheat-sheets/cypress-io/pdf/