n일 동안 보지 않기 모달 테스트 자동화 하기

개요

'n일 동안 보지 않기' 같은 모달창은 어떻게 구현이 되고 Cypress를 사용해서 검증할 수 있는지 알아보자

'n일 동안 보지 않기' 모달 어떻게 구현될까?

'n일 동안 보지 않기' 모달은 주로 쿠키(Cookie)를 사용해 구현이 된다. 사용자가 모달 창에서 'n일 동안 보지 않기' 버튼을 클릭하면, 해당 정보가 브라우저 쿠키에 저장된다. 이 쿠키는 일정 기간 동안 브라우저에 남아 있어, 사용자가 다시 웹사이트에 방문할 때 이를 확인하여 모달을 표시할지 말지를 결정한다.

브라우저 Dev Tool에서 보는 'n일 동안 보지 않기' 모달 HTML 코드

브라우저 Dev Tool의 Sources탭에서 보는 '오늘 하루 그만보기' 코드

클래스 네임이 pop-close-01인 버튼을 클릭했을 때 setMainPopCookie함수를 통해
rankPopMain이라는 이름으로 쿠키를 생성하는 걸 알 수 있다. 그렇다면 이제 Cypress를
사용해서 테스트 코드를 작성해 보자

테스트할 UI

실제 서비스 중인 웹사이트에서 자동화는 UI가 변경될 수도 있기 때문에 React를 사용해서 직접 구현해서 진행하였다.(구현 코드는 깃 참조)

테스트 시나리오 및 테스트 코드

테스트 시나리오

1. 모달창 텍스트 확인
2. "닫기" 버튼 클릭 후 모달이 잘 종료되었는지 확인
3. "닫기" 버튼 클릭 후 페이지에 다시 접근 했을때 모달창이 잘 보이는지 확인
4. "오늘 하루 열지 않기" 버튼 클릭 후 쿠키에 잘 저장되었는지 검증
5. "오늘 하루 열지 않기" 버튼 클릭 후 페이지에 다시 접근했을 때 모달창이 안 보이는지 확인

테스트 코드

describe('모달 테스트',()=>{
  const element = {
    oneDayCloseBtn:'#oneDayCloseBtn',
    closeBtn:'#closeBtn',
    modal: '#modal'
  }

  beforeEach(()=>{
    cy.visit('/')
    cy.get('#modal-test').click()

  })

  it('모달창 텍스트 확인',()=>{
    const { modal, closeBtn, oneDayCloseBtn} = element

    //모달이 존재하는지 확인
    cy.get(modal).should('exist')

    //모달 본문 텍스트 검증
    cy.get('p').contains('공지사항').should('exist').should('be.visible')
    cy.get('p').contains('여기에 공지 내용을 작성하세요.').should('exist').should('be.visible')

    //모달 버튼 텍스트 검증
    cy.get(oneDayCloseBtn).should('be.visible').and('contain', '오늘 하루 열지 않기');
    cy.get(closeBtn).should('be.visible').and('contain','닫기')
  })

  it('닫기 버튼 클릭 후 모달이 잘 종료되었는지 확인',()=>{
    const { modal,closeBtn, } = element

    //모달이 존재하는지 확인
    cy.get(modal).should('exist')

    //모달 닫기 버튼 클릭
    cy.get(closeBtn).click()

    //모달 종료 확인
    cy.get(modal).should('not.exist')
  })

  it('닫기 버튼 클릭 후 페이지에 다시 접근 했을때 모달창이 잘 보이는지 확인',()=>{
    const { modal,closeBtn, } = element

    //모달이 존재하는지 확인
    cy.get(modal).should('exist')

    //모달 닫기 버튼 클릭
    cy.get(closeBtn).click()

    //모달 종료 확인
    cy.get(modal).should('not.exist')

    //페이지 리로드
    cy.reload()

    //모달이 존재하는지 확인
    cy.get(modal).should('exist')
  })


  it('오늘 하루 열지 않기 버튼 클릭 후 쿠키에 값이 잘 저장되는지 확인', () => {
    const { modal,oneDayCloseBtn, } = element

    //모달이 존재하는지 확인
    cy.get(modal).should('exist')
    
    //오늘 하루 열지 않기 버튼 클릭
    cy.get(oneDayCloseBtn).click()

    //모달 종료 확인
    cy.get(modal).should('not.exist')

    //쿠키가 있는지 검증
    cy.getCookie('hideNoticeModal').should('exist')
  })

  it('오늘 하루 열지 않기 버튼 클릭 후 페이지에 다시 접근 했을때 모달창이 안보이는지 확인',()=>{
    const { modal,oneDayCloseBtn, } = element

    //모달이 존재하는지 확인
    cy.get(modal).should('exist')

    //오늘 하루 열지 않기 버튼 클릭
    cy.get(oneDayCloseBtn).click()

    //모달 종료 확인
    cy.get(modal).should('not.exist')

    //쿠키가 있는지 검증
    cy.getCookie('hideNoticeModal').should('exist')

    //페이지에 다시 접근 했을때 모달이 열리지 않는지 검증
    cy.reload()
    cy.get(modal).should('not.exist')
  })

})

테스트 결과

전체 코드 보러 가기

https://github.com/HeeSeok-kim/Cypress_UI_E2E