Cypress에서 Window 객체 Stub하기 (앱 딥링크 테스트)

딥링크 예시 이미지

개요

Cypress를 사용해서 딥링크를 검증하는 방법에 대해서 알아보자

딥링크란?

모바일 환경에서 유저가 URL을 클릭했을 때, 앱을 실행시키고 특정 페이지로 이동하도록 돕는 기술

ex) OO앱 다운로드, OO앱에서 확인

딥링크 어떻게 구현될까?

onClick이벤트에서 window.location.href, window.location.replace를 사용해서 앱을 실행시키거나, 앱 스토어로 이동을 시킨다.

 

실제 사이트에서 딥링크 확인해 보기

딥링크가 적용된 코드

딥링크

딥링크

코드가 난독화되어 모든 코드를 알기 어렵지만 c라는 변수는 IOS 스토어의 주소를 가지고 있다.

var t 함수에서 접속한 단말기의 OS를 체크하고  window.location.href을 사용해서 앱 스토어로

이동을 하는 것을 알 수 있다.

 

테스트 방법

Cypress에서 제공하는 Stub을 사용하여 실제 페이지를 이동시키지 않고 앱스토어 링크가 유효한지 검증을 진행하였다.

 

Stub 이란?

함수나 메서드를 대체하여 원하는 반환값이나 동작을 Mock 하는 함수

Stub 자세히 보러 가기

테스트 코드

describe('window 객체 Stub 테스트', () => {
  const windowObjectStub = (url:string) => {
    cy.on('window:before:load', (win) => {
      win.__location = {
        replace: cy.stub().as('replace')
      }

      Object.defineProperty(win.__location,'href', {
        get: () => '',
        set: cy.stub().as('href')
      })
    })

    cy.intercept('GET', url, (req) => {
      req.continue((res) => {
        res.body = res.body.replaceAll('location', 'window.__location')
      })
    })
  }

  beforeEach(()=>{
    const pageDownLoadUrl = 'http://localhost:5173/src/pages/WindowObjectTest.tsx*'
    const pageUrl = '/window-object-test'

    windowObjectStub(pageDownLoadUrl)
    cy.visit(pageUrl)
  })

  it('구글 플레이 스토어 딥링크 테스트(http 사용)',()=>{
    const playStore = 'http://play.google.com/store/apps/details?id=com.nhn.android.search&hl=ko'

    //클릭
    cy.get('#httpProtocol').click()

    //검증
    cy.get('@replace').should(
      'have.been.calledOnceWith',
      playStore
    )
  })

  it('구글 플레이 스토어 딥링크 테스트(market scheme 사용)', () => {
    const market = 'market://details?id=com.nhn.android.search&hl=ko'
    
    //클릭
    cy.get('#market').click()

	//검증
    cy.get('@href').should(
      'have.been.calledOnceWith',
      market
    )
  })

  it('앱 스토어 딥링크 테스트',()=>{
    const playStore = 'http://play.google.com/store/apps/details?id=com.nhn.android.search&hl=ko'

    //클릭
    cy.get('#httpProtocol').click()

    //검증
    cy.get('@replace').should(
      'have.been.calledOnceWith',
      playStore
    )
  })
})

 

참고한 코드

https://glebbahmutov.com/blog/stub-window-open/