cypress

cypress typescript설정

{
  "compilerOptions": {
    ...,
    "types": ["cypress", "node"] // 없으면 cy.ts파일 cy에러
  },
  "include": ["src","cypress"], // 없으면 src폴더에서 import 불가능
  ...
}

로그인 테스트 예제

const username = 'usernaem'
const password = 'password'
describe('login', () => {
  it('passes', () => {
    cy.visit('/') // config에 root으로 설정된 특정주소 방문

    cy.get('input[name=username]') // name이 username인
      .type(username) // element를 선택해 username을 typing한다
    cy.get('input[name=password]') // name이 password인
      .type(password) // element를 선택해 password를 typing한다

    cy.contains('로그인') // '로그인'이라는 글자가 포함된
      .click() // element를 클릭한다.
    
    cy
      .get('a.user') // login후 user의 정보를 나타내는 element에
      .should('contain', username) // username이 포함되어있는지 확인
    
  })
})

query 테스트 예제

describe('allShop', () => {
  it('passes', () => {
    cy.visit('/') //config에 root으로 설정된 특정주소 방문

    
    cy.get('span') // span태그중에
      .contains('설정') // 설정이라는 글자가 포함된
      .click() // element를 클릭한다
    
    cy
      .get('a') // a태그중에
      .contains('쇼핑몰/ID관리') //쇼핑몰/ID관리라는 글자가 포함된
      .click() // element를 클릭한다

    cy.get('tbody').should('not.be.empty')//테이블이 비어있지 않으면 true
  })
})

mutation 테스트 예제

export const addShopAccount = () => {
  cy.intercept('POST', REQUEST_URL, {
    fixture: 'fakeResponse.json',
  })

  cy.get('#mall-add-POP a').contains('추가').click()
  cy.get('#add-Id-POP input').eq(0).type('test')
  cy.get('#add-Id-POP input').eq(1).type('test')
  cy.get('#add-Id-POP input').eq(2).type('test')
  cy.get('button').contains('저장').click()
  cy.on('window:confirm', (str) => {
    if (str === '등록하시겠습니까?') {
      return true
    }
  })

  cy.on('window:alert', (text) => {
    expect(text).to.contains('등록되었습니다.')
  })
}

should에 쓸 수 있는것
용도 : 선택한 element로 테스트할 조건을 입력한다 true또는 false다

should('be.empty') // 비어있으면 true
should('be.visible') // 보이면 true
its(foo).sould('eq',bar) // foo와 bar가 같으면 true
should('have.css', 'font-family') // css가 font-family 속성을 가지면 true
get('checkbox').should('be.disabled') // checkbox가 disabled이면 true
get('input').should('not.have.value', 'Jane') //input이 Jane을 가지고 있지 않으면 true

알럿으로 결과를 확인할때

//한번만 실행할때는 cy.once를 사용한다
cy.on('window:alert', (text) => {
      expect(text).to.contains('This is an alert!');
    });

confirm창이 떴을때 제어하기

 cy.on('window:confirm', (str) => {
    if (str === '등록하시겠습니까?') {
      return true
    }
 })

mock api

cy.intercept('POST', REQUST_URL, {
    fixture: 'response.json',
 })

n번째 요소 선택하기

cy.get('.left-nav.nav').find('>li').eq(3)